Color picker
A colour can be written several ways that all mean the same thing. Hex and RGB name the amounts of red, green and blue. HSL restates those three numbers as hue, saturation and lightness. OKLCH describes the colour in a perceptually uniform space, where an equal step in lightness looks like an equal step to the eye, which sRGB does not manage. Everything in the format list is one colour, converted.
How to use it
The contrast figures are WCAG 2.2 ratios, computed from relative luminance with the standard weights of 0.2126, 0.7152 and 0.0722 for red, green and blue, and running from 1 for two identical colours to 21 for black on white. Normal body text needs 4.5, large text needs 3, and the stricter AAA level asks for 7. The formula is a mediocre model of how contrast actually looks: it is generous to mid-greys and harsh on saturated blues, so a marginal pass is a reason to go and look at the thing rather than a verdict on it. A replacement model, APCA, is being developed for the next generation of the guidelines, but 4.5 is the number any audit today will measure against.
Hex, rgb() and hsl() all describe the same underlying thing: a position in sRGB at eight bits per channel. oklch() is different in kind, because it can address colours outside sRGB entirely, which is how a stylesheet reaches the wider P3 gamut a recent display can show. This page starts from an sRGB colour, so the oklch() string it hands back always lands inside sRGB too. The format is the door to a wider gamut rather than a way of widening a colour you already have.
The nine-step scale fixes hue and saturation and walks lightness from 95 down to 15 in HSL, which is what most design systems mean by a tint ramp and gives perfectly usable steps. It is not perceptually even, and it is worth knowing where that shows. HSL treats a yellow and a blue at the same lightness number as equally light, and they are nothing of the sort. Stepping OKLCH lightness instead produces a ramp whose steps feel equal, at the cost of colours that no longer share one tidy hue number.
What people use it for
- Lifting a brand colour off a screenshot or a rendered page with the eyedropper
- Checking body text against the 4.5 threshold before it ships
- Finding a lighter version of a brand colour that still passes on white
- Writing the same colour twice, as oklch() and as a hex fallback
- Building a tint ramp instead of guessing at the steps
Questions
Building colour scales, and reaching colours sRGB cannot express. Because it is perceptually uniform, holding chroma and hue while stepping lightness gives tints that look evenly spaced. Doing the same in HSL does not.
The button appears only when the browser provides the EyeDropper API. Chrome and Edge do; Safari and Firefox have not shipped it.
4.5 for normal text and 3 for text above about 18.5px bold or 24px regular. Those are the WCAG 2.2 AA thresholds. AAA asks for 7 and 4.5 respectively.
It fixes hue and saturation and steps the lightness, which is what a tint ramp is. The middle step is the one closest to the colour you picked.
No, and it does not claim to be. It steps HSL lightness, which is even in the numbers rather than in the eye. For a ramp that looks evenly spaced, step OKLCH lightness instead.
16,777,216, which is eight bits each for red, green and blue. The three-digit shorthand is the six-digit form with every digit doubled, so #f0a means #ff00aa and covers 4,096 of them.
Because a hex code is an sRGB coordinate and a wider-gamut display has to decide what to do with it. A colour-managed browser converts properly; an uncalibrated screen simply shows it more saturated than intended.
The text field takes hex. Use the sliders for HSL, and read any format back out from the list.