Base colour

A hex, a CSS name like rebeccapurple, or an rgb(…) / hsl(…) value.

Highlight

Scheme

Every scheme is shown either way — this just outlines the one you came for. Only the hue is rotated; saturation and lightness are carried across untouched, so what you see is the relationship rather than a design built on top of it.

Complementary

Two colours from opposite sides of the wheel. The highest contrast pairing.

#3B82F6base

#F6AF3B+180°

#3B82F6hsl(217.2, 91.2%, 59.8%)
#F6AF3Bhsl(37.2, 91.2%, 59.8%)

Analogous

Neighbours on the wheel. Calm, and the safest scheme to use at large sizes.

#3BDFF6+330°

#3B82F6base

#513BF6+30°

#3BDFF6hsl(187.4, 91.2%, 59.8%)
#3B82F6hsl(217.2, 91.2%, 59.8%)
#513BF6hsl(247.1, 91.2%, 59.8%)

Triadic

Three colours evenly spaced. Vivid, and balanced without being loud.

#3B82F6base

#F63B82+120°

#82F63B+240°

#3B82F6hsl(217.2, 91.2%, 59.8%)
#F63B82hsl(337.2, 91.2%, 59.8%)
#82F63Bhsl(97.2, 91.2%, 59.8%)

Split complementary

The complement's two neighbours instead of the complement itself. Softer than complementary.

#3B82F6base

#F6523B+150°

#DFF63B+210°

#3B82F6hsl(217.2, 91.2%, 59.8%)
#F6523Bhsl(7.4, 91.2%, 59.8%)
#DFF63Bhsl(67.4, 91.2%, 59.8%)

Tetradic (square)

Two complementary pairs, evenly spaced. The most colours to balance, so usually one leads.

#3B82F6base

#F63BDF+90°

#F6AF3B+180°

#3BF652+270°

#3B82F6hsl(217.2, 91.2%, 59.8%)
#F63BDFhsl(307.4, 91.2%, 59.8%)
#F6AF3Bhsl(37.2, 91.2%, 59.8%)
#3BF652hsl(127.4, 91.2%, 59.8%)

Rectangle

Two complementary pairs, unevenly spaced — a tetradic with one hue dominant.

#3B82F6base

#AF3BF6+60°

#F6AF3B+180°

#82F63B+240°

#3B82F6hsl(217.2, 91.2%, 59.8%)
#AF3BF6hsl(277.2, 91.2%, 59.8%)
#F6AF3Bhsl(37.2, 91.2%, 59.8%)
#82F63Bhsl(97.2, 91.2%, 59.8%)

Monochromatic

One hue at five lightnesses. No hue conflict is possible, by definition.

#073B91L 30%

#0A59DAL 45%

#3B82F6base

#84B1F9L 75%

#CDDFFDL 90%

#073B91hsl(217.4, 90.8%, 29.8%)
#0A59DAhsl(217.2, 91.2%, 44.7%)
#3B82F6hsl(217.2, 91.2%, 59.8%)
#84B1F9hsl(216.9, 90.7%, 74.7%)
#CDDFFDhsl(217.5, 92.3%, 89.8%)

Angles are measured on the HSL colour wheel — the one colour-theory references draw — and read back off the colours produced, not echoed from the request. The Palette Generator rotates in OKLCH instead, which holds perceived brightness steadier across a rotation; that is the better choice when you want a palette to build with, and this is the better one when you want the textbook relationship.

Colour Harmony Generator

How it works

Related tools in Colour