Color Palette Generator
Build harmonious colour schemes from one colour, or roll random palettes.
How to use: Pick a base colour and a harmony type, then click any swatch to copy its HEX code. Press Random for a fresh palette.
How to use the Color Palette Generator
Choosing colours that work together is easier with a little colour theory. Harmony rules use positions on the colour wheel to find shades that feel balanced, and this generator applies them instantly to any base colour, such as your brand colour.
Analogous palettes use neighbours on the wheel, 30 degrees either side, for calm and natural schemes. Complementary pairs opposite colours for maximum energy and contrast. Split complementary softens that by using the two colours beside the opposite. Triadic spaces three colours evenly, and tetradic uses four in a square for rich, playful designs.
For interfaces, the shades option creates a nine-step scale from very light to very dark at the same hue, similar to the 50 to 900 scales in popular design systems. Use the light end for backgrounds, the middle for buttons and the dark end for text. Monochrome gives five gentler variations.
Press Random to explore unexpected combinations with pleasant saturation and lightness. Click a swatch to copy its HEX code, or copy all colours as CSS custom properties. Check text colours with the contrast checker before you publish.
Frequently asked questions
Which harmony should I use for a website?
Many sites use one brand colour, a shades scale for backgrounds and text, and one complementary accent for calls to action.
Are the palettes accessible?
Harmony rules do not guarantee contrast. Test text and background pairs with the contrast checker.
Can I start from a photo?
Yes. Use the Color Palette from Image tool to extract colours, then paste one here as the base.