Colour Scheme Generator
Build complementary, analogous, triadic, tetradic, split-complementary and monochromatic palettes from any base colour, with CSS variables ready to copy.
How to use it
- Pick a base colour with the swatch or by typing a hex value.
- Choose a harmony rule — each rotates the hue by a different set of angles.
- Copy the CSS custom properties straight into your stylesheet.
Colour harmony rules are just fixed rotations around the hue wheel applied to a base colour you choose — each rule below picks the angles differently, and the generator works them out and shows the resulting palette with CSS custom properties ready to paste into a stylesheet.
The six harmony rules
| Scheme | How it is built | Effect |
|---|---|---|
| Complementary | Base hue plus its opposite, 180° away | Maximum contrast, strong emphasis |
| Analogous | Base hue plus neighbours roughly 30° either side | Calm, cohesive, low tension |
| Triadic | Three hues 120° apart | Vivid but balanced, no single dominant colour |
| Tetradic | Two complementary pairs, 90° apart | Rich and varied, harder to balance |
| Split-complementary | Base hue plus the two neighbours of its opposite | Strong contrast with less tension than complementary |
| Monochromatic | One hue at varying saturation and lightness | Safest, most cohesive, no clashing risk |
Which one to reach for
Monochromatic is the lowest-risk starting point — a single hue at different lightness and saturation values essentially cannot clash with itself. Complementary gives the strongest emphasis and is what makes a call-to-action button pop against its surroundings. Analogous produces the calm, cohesive feel typical of editorial and lifestyle sites. Triadic and tetradic bring more colour variety at the cost of needing a steadier hand to keep the result balanced rather than busy.
Harmony is not accessibility
A colour scheme being harmonious says nothing about whether any given text-and-background pairing from it is readable. Two hues can sit in a textbook-correct complementary relationship and still fail contrast requirements badly — hue harmony and luminance contrast are unrelated properties. Always run any text-on-background combination through a contrast checker before using it, rather than assuming a “nice” palette is automatically a usable one.
Questions people ask
Which scheme should I choose?
Complementary for maximum contrast and emphasis, analogous for a calm and cohesive look, triadic for something vivid but balanced. Monochromatic is the safest starting point.
Are these palettes accessible?
Not automatically. Harmony rules say nothing about contrast — always check any text and background pair with the contrast checker before shipping it.
Is anything uploaded?
No. Everything runs in your browser — no file, image or snippet you use here ever leaves your device.
Last updated 22 August 2026