Colour Palette Generator
Build palettes from hue geometry: complementary, analogous, triadic, tetradic, mono.
About Colour Palette Generator
In HSL a complementary colour is nothing exotic: it is the base hue plus 180 degrees, triadic steps by 120, tetradic by 90. The real trap is that HSL is not perceptually uniform — yellow and blue at an identical 53% lightness measure the same but read as wildly different brightness, which is why every swatch here also carries its WCAG contrast ratio. All the maths runs in your browser; no colour is ever sent anywhere.
How to use Colour Palette Generator
- 1
Pick a base colour with the colour input, or paste a HEX code — the hue, saturation and lightness sliders sync instantly.
- 2
Choose one of six schemes: complementary, analogous, triadic, split-complementary, tetradic or monochromatic.
- 3
For analogous, split-complementary and tetradic, drag the angle slider to widen or tighten the hue spread.
- 4
Lock any swatch you want to keep, then hit Randomise so only the unlocked slots are rebuilt.
- 5
Set a variable prefix, choose CSS, SCSS, JSON or plain HEX, and copy the exported block.
Frequently asked questions
Is the complementary colour always the best accent?
No. Two hues exactly 180 degrees apart, both at high saturation, vibrate along their shared edge and tire the eye. For an accent, split-complementary (150 and 210 degrees) usually lands softer, or simply drop the saturation of the complement with the slider.
Why do saturation and lightness stay fixed across most schemes?
Because classical colour harmony is defined purely as a hue rotation, and holding S and L constant is what makes the results feel evenly weighted. The one exception is monochromatic, which locks the hue and builds five lightness stops 15 points apart; if the base is very light or very dark the whole 60-point window slides instead of clipping, so all five stops stay distinct.
Does a harmonious palette mean an accessible palette?
No, and this is the most common misconception. Harmony is only about hue spacing and guarantees nothing about legibility. The number beside each swatch is that colour against the black or white label auto-picked for the chip itself, not against your site background — measure text on your real background separately.
Why do my locks disappear when I switch scheme?
Because the slot count differs per scheme: complementary has two, analogous and triadic three, tetradic four, monochromatic five. Keeping a lock on slot four inside a two-slot scheme is meaningless, so locks reset on every scheme change. The base colour itself is untouched.