Colour Converter, Contrast & Palette

Convert between hex, RGB, HSL, CMYK, LAB and OKLCH, check WCAG contrast, build a palette in OKLCH, and see any of it through colour blindness.

How it works

The page holds one colour as 8-bit sRGB channels and an opacity, and every box is a view of it: hex, CSS name, RGB, HSL, HSV, CMYK, LAB, LCH, OKLAB and OKLCH. Any box accepts any of those notations, so a hex pasted into the OKLCH box is read and rewritten as OKLCH. LAB and LCH use the D50 white point and OKLAB and OKLCH use D65, as CSS Color 4 defines them, so the values paste straight into a stylesheet. Where the colour has no CSS name, the name box offers the nearest of the 148.

The Contrast card measures the colour against a background, white unless you change it, with the WCAG 2 formula, and marks AA and AAA for normal and large text and AA for interface parts. A colour with opacity is blended onto the background first, as a browser would.

The Palette card builds tints and shades and five harmonies by turning the hue in OKLCH at the colour's own lightness and chroma. A partner outside sRGB loses chroma until it fits, rather than having a channel clipped, which would shift its hue. Clicking a swatch takes it as the colour.

The Colour vision card redraws the pair as seen with protanopia, deuteranopia and tritanopia, using the Machado, Oliveira and Fernandes (2009) model at full severity, and with achromatopsia as luminance alone. For a whole picture, the Greyscale adjustment in the image editor is a rough stand-in for the last of these.

Examples

One colour, every notation

The page opens on #ff7043, which it writes as:

RGB    rgb(255, 112, 67)
HSL    hsl(14, 100%, 63%)
HSV    hsv(14, 74%, 100%)
CMYK   cmyk(0%, 56%, 74%, 0%)
LAB    lab(65.13% 53.75 52.1)
LCH    lch(65.13% 74.85 44.11)
OKLAB  oklab(71.24% 0.1461 0.1132)
OKLCH  oklch(71.24% 0.1848 37.77)

The nearest CSS name is tomato. On white it manages 2.74:1 and fails every level; on black it is 7.65:1 and passes them all.

The lightest grey that passes AA on white

#767676 on #ffffff   4.54:1   Passes AA, and AAA at large sizes
#777777 on #ffffff   4.47:1   Large text and interface parts only

One step in each channel separates a pass from a fail for body text. For AAA the lightest grey is #595959, at 7.00:1.

Half-transparent black

rgba(0, 0, 0, 0.5) is written in hex as #00000080. On white it is blended to #808080 before it is measured, so the ratio is 3.94:1, enough for large text but not for body text.

Common problems

An OKLCH colour comes back changed

The page works in sRGB only. oklch(70% 0.3 150) is a green no sRGB screen can show, so it loses chroma until it fits, as a palette partner does, and comes back as #00be58, or oklch(70.05% 0.1928 150.03): the lightness and the hue stay where they were and only the chroma has dropped. That value survives the round trip, and every chroma from 0.193 up at that lightness and hue lands on the same colour. color(display-p3 …) is not read at all.

Enough contrast does not make two colours distinguishable

Contrast is a ratio of luminance and nothing else. Under deuteranopia a red #d32f2f and a green #388e3c become #8b7c28 and #867a42, which few people could tell apart, so check the vision tiles as well as the ratio when colour alone carries a meaning.

HSL lightness is not how light a colour looks

hsl(60, 100%, 50%) and hsl(240, 100%, 50%) share a lightness of 50%, yet the yellow is 1.07:1 on white and the blue 8.59:1. Their OKLCH lightness, 96.8% against 45.2%, is much closer to what the eye sees, which is why the palette turns hues in OKLCH.

CMYK is a formula, not a print profile

The CMYK box uses the plain conversion, with no printer or paper profile, and rounds to whole percentages, so even the round trip drifts: cmyk(0%, 56%, 74%, 0%) reads back as #ff7042. What a press prints depends on its own profile.

Frequently asked questions

What contrast ratio does WCAG require?

Level AA asks for 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18 point, or 14 point bold. Level AAA asks for 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1 against what is next to them.

Why does this page say 4.49 where another checker says 4.5?

The ratio is truncated to two decimals rather than rounded, so a pair at 4.497:1 shows as 4.49 and fails AA. WCAG says the computed ratio should not be rounded, giving 4.499:1 as an example that does not meet 4.5:1.

Why are the palette's harmonies not reversible?

A partner outside sRGB loses chroma to fit, and the way back cannot restore it. The complement of #ff7043 is #00b5d7, and the complement of that is #e68466, a softer orange than the one you started with.