Colour Scheme Designer

Understanding Colour Harmonies

Colour harmony is the principle that certain combinations of hues are naturally pleasing to the eye. These relationships are defined by their positions on the colour wheel and have been used in art and design for centuries. This tool calculates six standard harmonies from any base colour you select.

Harmony Modes

Monochromatic

Variations of a single hue at different saturation and lightness levels. Safe, cohesive and easy to apply.

Complementary

Two hues opposite each other on the wheel (180° apart). High contrast, works well for call-to-action elements against a background.

Split-Complementary

A base hue plus the two colours adjacent to its complement. Retains strong contrast with less visual tension than a straight complement.

Triadic

Three hues spaced equally at 120° intervals. Balanced and vibrant, often used in illustrations and branding.

Tetradic (Rectangle)

Four hues forming two complementary pairs. Offers the most variety but requires careful balance so no single colour dominates.

Analogous

Three to five hues sitting next to each other on the wheel. Produces a calm, unified feel common in nature photography and editorial design.

Using the CSS Output

Click Copy CSS to get the generated palette as CSS custom properties. Paste them into your stylesheet’s :root block and reference them as var(--colour-1) through your markup. This keeps your palette in one place and makes theme changes a single-line edit.