Colour converterOKLCH · P3 · contrast
CSS color converter
Type a colour in any CSS notation and get every other one, with a warning when it falls outside sRGB.
Your colour
Try oklch(70% 0.3 145), color(display-p3 1 0 0), hsl(200 80% 40%) or rebeccapurple.
- Inside sRGB
- Inside Display P3
- Inside Rec. 2020
Every format
| HEX | #ff2e7e | |
|---|---|---|
| RGB | rgb(255 46 126) | |
| HSL | hsl(337 100% 59%) | |
| HWB | hwb(337 18% 0%) | |
| Lab | lab(57.53% 78.33 9.69) | |
| LCH | lch(57.53% 78.92 7.05) | |
| OKLab | oklab(65.92% 0.2409 0.0211) | |
| OKLCH | oklch(65.92% 0.2419 5) | |
| Display P3 | color(display-p3 0.9199 0.2708 0.4945) | |
| color(srgb) | color(srgb 1 0.1804 0.4941) | |
| Nearest name | ≈ deeppink ΔE OK 0.041 |
WCAG contrast
Your colour as text on a background5.08:1
- AA text 4.5
- AA large 3
- AAA text 7
- AAA large 4.5
- UI parts 3
Passes AA for normal text.
Large text, 24px bold
Body text at 16px needs 4.5:1 for AA. Large text (24px, or 18.66px bold) and interface parts such as icons and input borders need 3:1.
color-mix() helper
Expression
color-mix(in oklch, #ff2e7e, #00a99d)Result
oklch(66.02% 0.1789 275.47) · #7684fdConverting colours, and what “out of gamut” means
Hex, rgb(), hsl() and hwb() can only describe colours inside sRGB, the gamut of a typical older screen. lab(), lch(), oklab(), oklch() and color(display-p3 …) can describe far more saturated colours that many modern phones and laptops can show. When your colour is outside sRGB, the hex, RGB, HSL and HWB values are gamut-mapped with the CSS Color 4 method: chroma is reduced in OKLCH until the colour fits, keeping lightness and hue, which looks much closer than clipping each channel.
- OKLCH is the easiest notation for building palettes: equal steps in lightness look equal, and you can change hue without the lightness jumping.
- Contrast uses the WCAG 2 formula. Translucent text is blended onto the background first; the ratio is truncated, so 4.49 never shows as 4.5.
- color-mix() follows CSS Color 5: percentages are normalised, and if they add up to less than 100% the result becomes partly transparent.
Colour questions
Is OKLCH the same as LCH?
No. LCH is built on CIE Lab, while OKLCH is built on OKLab, a newer model that predicts perceived lightness and hue more evenly, especially for blues. Their numbers are not interchangeable.
Why does the hex value change for a vivid oklch() colour?
Hex cannot store colours outside sRGB, so the converter shows the nearest colour that fits. Use the oklch() or display-p3 value in your CSS to keep the vivid version on screens that can show it.
Which named colour is closest?
When there is no exact match among the 148 CSS named colours, the table shows the nearest one by perceptual distance in OKLab, with the distance. Below about 0.02 the difference is hard to see.