How to use Colour picker and converter
- Pick a colour with the colour picker or the screen eyedropper, or type any CSS colour: hex, rgb(), hsl(), hwb(), oklch() or oklab().
- Read the same colour in every format, and copy any value as CSS.
- Use the tints, shades and harmonies to build a palette; select a swatch to copy its hex code.
- Check the contrast against white and black, and open the contrast checker for other pairs.
One colour, every format
Designers hand over hex codes, design tools show HSL, older stylesheets use rgb(), and modern CSS increasingly uses OKLCH. This tool takes a colour in any of those forms and shows it in all of them at once: HEX, RGB, HSL, HWB, OKLCH and OKLab, each written as valid CSS in the current space-separated syntax, ready to copy into a stylesheet or a design token file.
Pick a colour with your system's colour picker, type or paste a value, or, in Chrome, Edge and other Chromium browsers on desktop, use Pick from screen to sample any pixel on your display, including other apps. Browsers that don't support the EyeDropper feature don't show that button. Transparency is kept: a colour with alpha is written with it in every format.
Conversions you can trust
The conversions follow CSS Color 4, the specification browsers implement, and are tested against its reference values: rebeccapurple is hsl(270 50% 40%) and hwb(270 20% 40%), and pure red is about oklch(62.8% 0.258 29.2). OKLab and OKLCH use Björn Ottosson's published matrices, the same ones browsers use. Values are shown with enough decimals to round-trip: pasting any of them back gives the same hex code.
OKLCH can describe vivid colours that ordinary sRGB screens can't display. When you enter one, the tool maps it the way the specification says, lowering the chroma while keeping lightness and hue until it fits, tells you it did so, and shows every value for the colour you will actually see.
Tints, shades and harmonies
Tints and shades are your colour mixed with white and black in OKLab, as CSS color-mix(in oklab, …) does, which gives evenly spaced steps without the greyish midtones of mixing in RGB. Harmonies turn the hue on the familiar HSL colour wheel: the complementary colour opposite, analogous neighbours 30 degrees either side, and a triadic set 120 degrees apart. Select any swatch to copy its hex code.
Readable as text?
The tool also shows the colour's WCAG 2.2 contrast ratio as text on white and on black, with pass or fail for AA, AA large text and AAA, so you know at once whether a brand colour can carry body copy. To test it against any other background, and get the nearest passing shade, use the contrast checker. Everything runs in your browser; no colour you enter is sent anywhere.
Questions
- Why use OKLCH instead of HSL?
- OKLCH is built so that equal steps look equally different. Two colours with the same OKLCH lightness look about as light as each other, which isn't true in HSL, where yellow at 50% lightness looks far brighter than blue at 50%. That makes OKLCH better for building colour scales and for adjusting a colour without its brightness drifting.
- What happens to an OKLCH colour a screen can't show?
- OKLCH can describe colours outside the sRGB range of most screens. The tool maps such a colour the way CSS Color 4 specifies: it lowers the chroma, keeping lightness and hue, until the colour fits, says that it did, and shows every value for the mapped colour.
- Why can't I see the eyedropper button?
- Picking a colour from anywhere on the screen uses the browser's EyeDropper feature, which Chrome, Edge and other Chromium browsers on desktop support. Firefox and Safari don't yet, so the button is hidden there; the colour picker and typed values still work.