Colour · T-06
Colour harmony from one colour
Give one colour and choose a harmony. Kleurstaal turns the hue on the OKLCH wheel and keeps lightness and chroma, so the partners look as strong as your colour.
Your files stay on your device
Questions
Good to know
Why the OKLCH wheel and not the usual colour wheel?
On the usual HSL wheel, yellow and blue at the same settings look very different: yellow seems much lighter. OKLCH is built on how eyes see, so the partners of your colour really look as light and as strong.
What does clipped mean on a swatch?
An ordinary screen cannot show that hue so saturated. Kleurstaal keeps the lightness and the hue and makes the colour a little greyer until it fits, as CSS itself does.
Should I use all the colours equally?
Better not. A common rule is 60, 30 and 10: one colour for areas, one in support and one as an accent. And check the contrast before you put text on them.
How it works
Colour harmony in three steps
One colour
Type, paste or pick your colour, in any notation.
Choose a harmony
Complementary, analogous, triadic, split complementary, square or tints of the same colour. The wheel shows where they sit.
Copy
Click a swatch for its code, or take all the colours along as CSS variables.