The native picker is limited to sRGB. Use the OKLCH sliders below to reach wide-gamut (Display P3 / Rec. 2020) colors: push Chroma until the badge flips to “Outside sRGB”.
About these color formats
Type or paste a color into any field and every other format updates instantly. Conversions run through CIE XYZ, so wide-gamut values are preserved accurately rather than just clamped to sRGB. The badges above tell you whether the current color fits inside the sRGB or Display P3 gamut.
sRGB formats
HEX, RGB, HSL and HWB all
describe colors within the standard sRGB gamut that every screen can show. Alpha is supported:
add a fourth hex pair (#rrggbbaa) or a / 0.5 after the values.
Perceptual formats
LAB/LCH (CIE) and OKLAB/OKLCH are device-independent, perceptually uniform spaces. OKLCH in particular is the modern favourite for design systems because lightness and hue behave predictably. These spaces are unbounded, so they can describe colors that fall outside sRGB, useful for wide-gamut design.
Wide gamut & HDR
Display P3 and Rec. 2020 reach far beyond sRGB and are rendered on capable displays in current browsers. Rec. 2020 is the gamut used for HDR/UHD video.
A common question: is there a unit for true HDR colors? Wide-gamut formats like the
ones above are still SDR: they describe more saturated colors but carry
no HDR brightness. Real HDR is defined in the CSS spec as
color(rec2100-pq …) and color(rec2100-hlg …),
which pair the Rec. 2020 gamut with the PQ and Hybrid Log-Gamma transfer functions.
As of now no shipping browser renders these as HDR, so they aren't usable in practice yet.
Wide-gamut Rec. 2020 / Display P3 is the furthest you can reliably go today.
Browser support
Which formats you can actually use depends on the browser. Below is the approximate first stable version to support each CSS color syntax, caniuse-style.
| Format | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| HEX (#rgb, #rrggbb) | 1+ | 12+ | 1+ | 1+ |
| HEX alpha (#rgba, #rrggbbaa) | 62+ | 79+ | 49+ | 9.1+ |
| rgb() / rgba() | 1+ | 12+ | 1+ | 1+ |
| hsl() / hsla() | 1+ | 12+ | 1+ | 1+ |
| hwb() | 101+ | 101+ | 96+ | 15+ |
| lab() / lch() | 111+ | 111+ | 113+ | 15+ |
| oklab() / oklch() | 111+ | 111+ | 113+ | 15.4+ |
| color(display-p3) | 111+ | 111+ | 113+ | 10+ |
| color(rec2020) | 111+ | 111+ | 113+ | 15+ |
| color(rec2100-pq / -hlg), HDR | ✗ | ✗ | ✗ | ✗ |
Numbers are the first stable release with support and are approximate. Always confirm against caniuse.com and MDN.