colourdesign.co.uk
Colour scheme generator

One colour in. A whole scheme out.

Pick a seed colour and a harmony. You get companion colours, six-step tints and shades, WCAG contrast badges, and CSS variables ready to paste. Every palette lives at its own URL.

Harmony modes

Add the mode to the URL: /23577a-triad. Leave it off for split-complement.

Monochrome One hue, varied in lightness and saturation. Calm and cohesive. -mono Analogous Five neighbouring hues, 30° apart. Harmonious with gentle variety. -analogous Adjacent Three neighbouring hues, 30° apart. Subtle and unified. -adjacent Complementary Two hues opposite on the wheel. Maximum contrast. -complement Split-complement The seed plus the two hues either side of its complement. Contrast without tension. -split Triadic Three hues evenly spaced at 120°. Vibrant and balanced. -triad Tetradic Four hues evenly spaced at 90°. Rich, needs a dominant colour. -tetrad

Examples

A few seeds to start from. Or browse every named colour.

Steel blue#23577A Indigo#540D6E Crimson#EE4266 Medium spring green#0EAD69 Chocolate#D2691E Gold#FFD23F

Override any colour

Add more hex codes before the mode to replace the derived companions in order: /005588-ee4266-ffd23f-triad. Exports are at /{slug}.css and /{slug}.json.