Colour · T-07
Colour scale
One colour in, eleven shades out: from almost white to almost black, in steps that look even to the eye. Each step shows straight away whether white or black text on it is readable.
Your files stay on your device
Questions
Good to know
Why OKLCH?
In OKLCH an equal step in lightness is also an equal step for the eye. In HSL, yellow looks much lighter than blue at the same value. This gives you a scale that looks just as regular in every hue.
Does my own colour stay in the scale?
Yes. By default your colour sits exactly on the step that best matches its lightness, with a pink frame. Switch that off and you get a fully calculated scale.
Which step do I use for text?
Look at the contrast figures: if AA appears next to white, white text on it is readable; next to black, black text. For text on a white page you usually take 600 or darker.
How it works
Colour scale in three steps
Choose your colour
Your brand colour, in any notation. Kleurstaal puts it on the step that best matches its lightness.
Look at the scale
Eleven steps with their code and their contrast on white and on black. AA appears when normal text is readable.
Take the code with you
As CSS variables, for Tailwind 4 or 3, or as JSON, in HEX or in OKLCH.