Color Shade & Tint Generator
Note: The two contrast figures on each step are against black and against white. Whichever is higher is the text colour that step can carry; if neither reaches 4.5:1 the step is a background value only, never a text background for body copy.
Tints are the colour mixed toward white, shades toward black. The naive way is to move the lightness channel in equal steps, and it is what most generators do — but equal steps in HSL are not equal steps to the eye, because perceived lightness depends heavily on hue. A yellow at 50% lightness looks far brighter than a blue at 50% lightness. That is why the ramp here is also offered in OKLCH, where the lightness axis is built to match perception, so the ten steps read as evenly spaced regardless of which hue you started from.
The contrast figures next to each step are the reason to use a generated ramp at all. WCAG asks for 4.5:1 for body text and 3:1 for large text and interface boundaries, and the number tells you exactly where in your own ramp the switch from dark text to light text has to happen. In most ramps that boundary falls between step 400 and step 500, and knowing which one saves you from the situation where a button looks fine to you and is unreadable for someone else.
The CSS variables output is named on the 50–900 convention so it drops into an existing token file without renaming anything.
Frequently Asked Questions
Why do the HSL and OKLCH ramps look different?
Because HSL lightness is a mathematical midpoint between black and white for that hue, while OKLCH lightness is calibrated against how bright humans actually perceive a colour. On yellows and cyans the difference is dramatic; on deep blues it is small. If your ramp needs to feel evenly stepped, use the OKLCH one.
Which step should the brand colour sit on?
Usually 500, so you have four lighter steps for backgrounds and four darker ones for hover, active and text. If your brand colour is very light or very dark, anchoring it at 300 or 700 gives you a more usable ramp than forcing it into the middle.
What do the two contrast numbers mean?
The first is the contrast ratio of that swatch against black, the second against white. Whichever is higher is the text colour you should use on that background. A step where both are under 4.5 cannot carry body text in either colour and is a background-only value.
Can I use OKLCH in production?
Yes in every current browser, but it has no fallback in older ones, and a colour declaration a browser does not understand is dropped entirely rather than approximated. Ship the hex value first and the OKLCH one after it in the same rule, so old browsers take the hex and new ones override it.
