A color palette generator built on colour harmony
Choosing colours that work together is easier when you start from rules designers have used for centuries. This color palette generator takes one base colour — usually your brand or accent colour — and places related hues around the colour wheel. You get five colours, a small interface mock-up showing them in use, and ready-to-paste code.
Harmony rules explained
- Complementary: the base plus the hue directly opposite (180°). Maximum contrast; use one as the main colour and the other sparingly for calls to action.
- Split complementary: the base plus the two hues next to its complement (150° and 210°). Strong contrast with less tension.
- Analogous: neighbours 30° either side. Calm, cohesive palettes that are common in nature.
- Triadic: three hues 120° apart. Balanced and colourful; let one dominate.
- Tetradic and square: four hues (60°/180°/240° or every 90°). Rich palettes that need careful balancing.
- Monochromatic: one hue at five lightness levels. Safe, elegant and easy to keep accessible.
When a rule yields fewer than five colours, the generator fills the remaining slots with lighter and darker variants of the harmony colours so you always have tints for backgrounds and shades for text.
Why hues are rotated in OKLCH
A classic HSL colour wheel is not perceptually even: rotating a vivid blue by 180° in HSL can give a yellow that looks far brighter. The generator rotates hues in OKLCH, a modern colour space where lightness and chroma stay visually consistent, so the resulting palette feels balanced. For example, the triadic scheme for #0f766e keeps a similar perceived lightness for all three hues.
Random palettes with locking
Press Space (or the button) to generate a random palette. Hues are spaced by the golden angle (about 137.5°) with controlled lightness and chroma, which avoids muddy combinations. Lock the colours you want to keep and regenerate the others until the set feels right.
Export formats
:root {
--palette-1: #377552;
--palette-2: #0f766e;
--palette-3: #137286;
}The CSS tab produces custom properties, SCSS gives $variables, the Tailwind tab outputs a v4 @theme block and JSON suits design tokens or scripts.
From palette to interface
A palette is only the start. Check every text/background pair with the contrast checker, build 50–950 scales for each colour with the tints and shades generator, and look at how the palette appears to people with colour-vision deficiencies in the colour blindness simulator. A good rule of thumb is 60-30-10: 60% neutral background, 30% secondary colour, 10% accent.
Common palette mistakes
The most frequent problem is using several saturated colours at equal strength, which makes a page feel noisy and hides the one button that matters. Let one colour lead and push the others back by reducing their saturation or using them as tints. A second pitfall is picking colours only by hue: two colours with very different hues but identical lightness can still look alike in greyscale and to people with colour-vision deficiencies. Finally, remember neutrals. Almost every interface needs a range of greys for text, borders and surfaces; tinting those greys slightly toward your primary hue makes the whole palette feel related.
Privacy
The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.