Color Palette Generator
Shuffle a harmonious palette, build one from a base colour, or pull the dominant colours out of a photo. Lock what you like, copy the hex codes and export them as CSS. Nothing leaves your device.
Three ways to build a palette
Random picks a base colour and applies a harmony rule, so the results look related instead of like noise. Harmony lets you choose the base colour and the rule yourself. Extract from an image reads the photo and pulls out its dominant colours, which is a quick way to match a brand or a mood board to a picture you already have.
Harmony rules
| Rule | What it does | Good for |
|---|---|---|
| Analogous | Neighbours on the colour wheel, about 30 degrees apart | Calm, cohesive designs |
| Complementary | Opposite hues, 180 degrees apart | Strong contrast, call-to-action buttons |
| Triadic | Three hues evenly spaced, 120 degrees apart | Playful, balanced palettes |
| Split complementary | A base plus the two hues beside its opposite | Contrast with less tension |
| Tetradic | Four hues, 90 degrees apart | Rich palettes that need careful balance |
| Monochromatic | One hue at different lightness levels | Backgrounds, dashboards, subtle UI |
How colours are pulled from an image
The image is shrunk to a small sample, then a median-cut algorithm repeatedly splits the pixels into groups along the colour channel with the widest spread. The average of each group becomes one palette colour, ordered from the most common to the least. Fully transparent pixels are ignored. Photos with large flat areas, like a sky, will put those colours first.
Using the result
Click any swatch to copy its hex code, or export the whole palette as a HEX list, CSS variables, RGB, HSL or JSON. Before you use a pair of colours for text and background, check them with the Color Contrast Checker, because attractive colours do not always pass accessibility contrast. For a smooth blend between two of them, try the CSS Gradient Generator.
Frequently asked
Are my images uploaded anywhere?
No. The image is read by your browser on your own device and never sent to Curious Assistant or anywhere else.
What does locking a colour do?
A locked colour stays the same when you generate again, so you can keep the colours you like and keep shuffling the rest.
Why do random palettes look related?
They are built from a colour-wheel rule such as analogous or triadic, starting from a random base colour. That keeps the hues in harmony instead of picking unrelated colours.
Can I get fewer or more than five colours?
Yes. Choose between 3 and 8 colours. Changing the number keeps your existing colours and only adds or removes slots.
Which export format should I use?
Use CSS variables for a stylesheet, HEX for design tools like Figma, RGB or HSL when your code needs those formats, and JSON when you are feeding the palette to a script.