Color palette generator
Build a palette from one base color: complementary, analogous, triadic.
Runs in this tab. The file stays here.
:root {
--color-base: #0ea5e9;
--color-complementary: #e9520e;
--color-analogous-1: #0ee9bf;
--color-analogous-2: #0e38e9;
--color-triadic-1: #e90ea5;
--color-triadic-2: #a5e90e;
}This runs in your browser. Nothing is uploaded.
About Color palette generator
Start from one colour, or pull five out of an image, and get its complementary, analogous, and triadic partners as swatches and CSS variables.
Pick a base colour with the colour box or type a hex value, and the page lays out the base plus three harmonies: the complementary colour (opposite on the wheel), two analogous neighbours 30 degrees either side, and two triadic colours 120 and 240 degrees round. Every swatch shows its hex code, and the CSS panel underneath is a :root block of custom properties named --color-base, --color-complementary, --color-analogous-1, and so on. Copy it and rename the variables to suit your project.
The harmonies only rotate the hue. Saturation and lightness stay exactly what the base colour had, so a pale base gives you a family of pale colours, and a dark one a family of dark ones. That's tidy but flat: a real palette usually needs lighter and darker steps too, a neutral or two, and a colour reserved for errors. Treat the output as the starting hues, and build the rest by hand or with the Tailwind colours page.
The second route starts from a picture instead. Choose an image and the page shrinks it, groups the pixels into five clusters, and shows the five average colours largest first. Click any of them to make it the base colour, and the harmonies update. The same image always gives the same five colours. They're also added to the CSS as --color-image-1 to 5. There's no tetradic or split-complementary option, and nothing checks contrast.
How to use Color palette generator
- 1Choose a base colour, or type a hex code.
- 2Optionally pick an image to extract five colours, and click one to use it as the base.
- 3Check the base, complementary, analogous, and triadic swatches.
- 4Copy the CSS variables.
What it won't do
- Hue rotation only: lightness and saturation are copied from the base.
- Three harmonies; no tetradic, split-complementary, or tints and shades.
- No contrast checking; image extraction gives exactly five colours.
Common questions
Does it check accessibility?
No. Harmonies say nothing about whether two colours are readable together. Run text and background pairs through the contrast checker before you use them.
Which harmonies does it make?
Complementary, analogous (30 degrees either side), and triadic, all from the hue of your base. Tetradic and split-complementary aren't included.
How does the image extraction work?
The image is reduced to about 64 pixels on its long edge and the pixels are clustered into five groups by colour. Each swatch is the average of one group, ordered by size. Mostly transparent pixels are ignored. It's a quick summary, not a design-grade palette: tiny accents get averaged away.
Is the image uploaded?
No. It's decoded and shrunk in a canvas in this tab. Only the five hex codes are kept.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation