Colour Converter

How it works

1. 1Type a colour in any notation, or use the picker. Hex, rgb(), hsl(), oklch() and a few names are all accepted.
2. 2Every other notation is produced at once, with alpha carried through where you supplied it.
3. 3The tints and shades are generated by stepping OKLCH lightness, which gives visually even steps.
4. 4Click any swatch in the scale to make it the current colour.

Common questions

What is OKLCH and why should I care?

A perceptually uniform colour space. Lightness 60 looks equally bright whatever the hue, which is not true of HSL — HSL yellow at 50% lightness looks far brighter than HSL blue at 50%. That makes OKLCH the right space for generating a colour scale, and it is supported in every current browser.

Why do my HSL-generated shades look uneven?

Because HSL lightness is a mathematical midpoint, not a perceptual one. Stepping it produces a ramp that looks smooth in some hues and lurches in others. The scale on this page steps OKLCH instead, which is why it stays even.

Is HSL wrong, then?

Not wrong, just older and less useful for generating palettes. It remains fine for a quick hue adjustment and is supported everywhere, including in places OKLCH is not.

What does the chroma value mean?

Roughly, colourfulness. Grey has a chroma near zero regardless of hue. Unlike HSL saturation, chroma is not capped at 100 — its usable maximum depends on the lightness and hue, and pushing it too far produces a colour outside what a screen can display.

How is alpha handled?

It is preserved across every notation. An eight-digit hex, rgb() with a slash, and oklch() with a slash all round-trip.