Colour converter — HEX, RGB, HSL, OKLCH, Lab, CMYK and Display P3

How to use the colour converter

1. Paste or type a value into Colour in any notation. Examples: #3b82f6, rgb(59 130 246), hsl(217 91% 60%), oklch(62% 0.19 260), cmyk(76%, 47%, 0%, 4%) or rebeccapurple.
2. All other notations appear at once, with a swatch of the colour.
3. If a yellow warning appears, your colour is outside sRGB; read the FAQ below on what that means.
4. Copy the line you need.

What it does and when to use it

Colour values travel between tools that speak different languages. A brand guide gives CMYK, a design file gives HSB, a stylesheet wants HEX, and a modern design system may be written in OKLCH. This converter reads all of these and returns the colour as HEX, RGB in two CSS styles, HSL, HSV/HSB, HWB, CMYK, CIE Lab and LCH, OKLab and OKLCH, Display P3, and the nearest CSS colour name.

Use it when moving colours between apps, when updating an old stylesheet to OKLCH, or when you need to check what a Lab value from a colour-measuring device looks like. If you would rather choose a colour visually, start with the colour picker. Once you have the codes, test text on it with the contrast checker, or see how it looks to people with colour-vision deficiencies in the colour blindness simulator.

How it works

• The input is parsed using CSS Color Level 4 rules, plus hsv(), hsb() and cmyk(), which are not CSS but are common in design tools.
• The colour is held as unclamped sRGB values, so very saturated colours keep their true values while being converted.
• Lab and LCH use the D50 white point, as CSS does. OKLab and OKLCH use Ottosson’s matrices.
• For colours outside sRGB, the screen-only notations show a gamut-mapped colour: the converter lowers chroma in OKLCH, keeping lightness and hue, until the colour fits. This is the method CSS Color 4 describes.
• CMYK uses the naive formula: K = 1 − max(R, G, B), then C = (1 − R − K) ÷ (1 − K), and the same for M and Y.

Worked examples

All values below are the converter’s output.

Pure red. hsl(0 100% 50%) becomes #ff0000, cmyk(0%, 100%, 100%, 0%) and oklch(62.8% 0.2577 29.23). Its Display P3 value is color(display-p3 0.9175 0.2003 0.1386), which shows that sRGB red is not the reddest red a P3 screen can show.

A green too vivid for sRGB. oklch(70% 0.4 150) triggers the gamut warning. The nearest sRGB colour is #00c248, rgb(0, 194, 72), while the OKLCH line keeps the original oklch(70% 0.4 150).

Limits and tips

• Rounding. Converting through HSL with whole numbers, or through CMYK, can move a colour by one step in a channel. Keep the original HEX as your reference.
• Alpha is kept when you type it (#3b82f680, rgb(59 130 246 / 50%)).
• Spot colours such as Pantone are not included; they are licensed ink systems, not formulas.
• The work happens in your browser. Nothing you paste is uploaded.