Colour picker — get HEX, RGB and HSL codes and lighter or darker shades

How to use the colour picker

1. Click the Colour box to open the picker, or type any CSS colour into the text box beside it: HEX, rgb(), hsl(), oklch() or a name such as tomato.
2. The results update straight away. Copy the notation you need from Every notation.
3. Check Readability to see the contrast with white and with black, and which text colour works better on top.
4. Use the swatches under Lighter and darker to pick hover states, borders or backgrounds in the same hue.

What it does and when to use it

This page is for the moment you have a colour and need its code: matching a brand colour in a stylesheet, moving a shade from a design file into an app, or choosing a button colour. You get HEX, RGB (classic and the newer space-separated CSS form), HSL, HSV/HSB, HWB, a simple CMYK estimate, CIE Lab and LCH, OKLab and OKLCH, Display P3 and the nearest named CSS colour.

The readability box gives a quick verdict on text. For a full check of a text and background pair against each WCAG level, open the colour contrast checker. If your colour arrives in an unusual notation, the colour converter explains gamut warnings in more detail. To turn two picked colours into a background, try the CSS gradient generator.

How it works

The colour is read and stored as sRGB values, then converted to each notation with the formulas in the CSS Color Module Level 4. Lab and LCH use the D50 white point, as CSS does; OKLab and OKLCH use Björn Ottosson’s published matrices.

The contrast figures use the WCAG 2.x method: each colour’s relative luminance L is worked out from its RGB values, and the ratio is (L of the lighter + 0.05) ÷ (L of the darker + 0.05). It runs from 1:1 (no difference) to 21:1 (black on white).

Worked examples

These are results from the tool.

A mid blue, #3b82f6. It is rgb(59, 130, 246) and hsl(217.2, 91.2%, 59.8%). Contrast with white is 3.68:1 and with black 5.71:1, so the tool recommends black text. The shade ladder runs from #002090 (darkest) to #cfe7ff (lightest).

A short HEX code, #F0C. It expands to #ff00cc, which is rgb(255, 0, 204) and hsl(312, 100%, 50%). The nearest CSS name is fuchsia.

Limits and tips

• CMYK is an estimate. It uses the simple device formula, not a printer’s ICC profile, so ask your printer for proofs.
• Transparency cannot be set in the native picker. Type an 8-digit HEX such as #3b82f680 or an rgba() value instead.
• Screens differ. The same code can look slightly different on two monitors; the code itself does not change.
• Nothing is uploaded. The colour maths runs in your browser.