Colorspace tools

Cross-space converter

Enter an sRGB color and read its coordinates in every space that matters — including the CSS color() strings you can paste straight into a stylesheet.

Display P3 and Rec. 2020 values are normalised 0–1, as CSS expects. Components below 0 or above 1 fall outside that gamut.

Gamut check

Wide-gamut displays can show colors sRGB can't. Enter a Display P3 color (0–1 per channel) and see whether it survives a trip back to sRGB, plus the clamped fallback browsers use.

If the two chips look identical on your screen, your display is sRGB-only (or the color was already inside sRGB). On a P3 panel an out-of-gamut red, green or cyan will visibly differ.

sRGB vs Display P3

A pure eye test. The stripe band below is the decisive one: it interleaves thin bars of an sRGB color with the same hue at full color(display-p3 …) saturation. If you can see stripes, your display and browser are rendering colors beyond sRGB. If the band looks like one flat colour, you're seeing sRGB only — the two are clamped to the same thing. Red (the default) shows the widest gap; drag the hue to explore.

The solid swatches below show the same pair side by side — subtler, since flat colours are harder to compare than adjacent stripes.

What your display can show

Read live from your browser via media queries. These are the same signals CSS uses to serve wide-gamut or HDR assets conditionally.

Gamut is detected with @media (color-gamut: …) and HDR with (dynamic-range: high). Browsers report the smallest enclosing standard gamut, so a true P3 screen may report p3 even if it slightly exceeds it.

HDR — brightness beyond white

HDR isn't a wider gamut, it's more headroom: the panel can drive highlights well past the diffuse white that SDR treats as its ceiling. These tools read what your screen reports, show that headroom live where the browser allows it, and do the PQ / HLG ↔ nits math the HDR transfer curves are built on.

What your display reports

Detected with (dynamic-range: high) and (video-dynamic-range: high). HDR canvas reports whether this browser can build a float16 canvas able to store values above 1.0 — a Chromium-only path. Safari reports No here yet still shows the HDR images below, because image decode is a separate path.

HDR image test — the one that lights up in Safari

Safari can't paint a synthetic HDR canvas, but since Safari 26 it does decode and render HDR images. The patch on the right is a real HDR image — a tiny PNG tagged BT.2100 PQ at ~1000 nits — beside an ordinary CSS #fff. On a display with HDR headroom the right glows clearly brighter than white. If they match, you're seeing SDR (or a browser that can't decode HDR PNGs, which may show it as a flat grey).

CSS #fff
SDR white — the ceiling

HDR image · ~1000 nits
PNG tagged BT.2100 PQ

A headroom ramp built the same way — from reference white (203 nits) up to a 4000 nit highlight:

Both are a few hundred bytes, carrying a cICP chunk (BT.2020 primaries, PQ transfer) that tells the browser to read the pixels as absolute HDR luminance. Where HDR isn't available they tone-map to ordinary white or appear as a plain grey ramp.

Headroom demonstrator

Same HDR-image technique, but interactive: the left is ordinary CSS #fff; the right is an HDR image swapped live as you drag the gain — 1× is reference white (~203 nits), higher pushes the highlight brighter. On a display with headroom the right patch climbs past white; on SDR it tone-maps and the two stay matched.

SDR white
1.0× — the reference ceiling

HDR 4.0×

Headroom is bounded by the panel — most HDR laptops give ~3–4× over SDR white, phones can push a small highlight brighter still, so the very top of the range may clip to your screen's peak. Each step is a pre-rendered BT.2100-PQ patch; where HDR isn't available they all tone-map to white.

PQ (ST 2084) ↔ nits

The PQ transfer curve maps a 0–1 signal to an absolute luminance in nits (cd/m²), 10000 at its peak — unlike sRGB and HLG, which are relative. Drag to read the code value at any brightness.

203 nits is the ITU-R BT.2408 reference white for HDR graphics — the level SDR white maps to inside an HDR signal.

HLG (BT.2100) scene ↔ signal

HLG is relative and backwards-compatible: its lower half is an SDR-like √ gamma, its upper half goes logarithmic to fit highlights. Drag a scene-linear value to read its HLG signal.

Gamma & linear light

sRGB stores values gamma-encoded, not linear to light. That is why naïve blends and resizes look wrong — they should happen in linear space. Compare a mid-grey ramp encoded both ways.

sRGB 0–255

Quick reference

• sRGB — the 1996 web/standard gamut. The safe baseline every screen shows. CSS hex, rgb() and hsl() are sRGB.
• Display P3 — same white point and gamma as sRGB but a wider gamut (~25% more area, deeper reds and greens). Standard on Apple displays since 2016 and most modern phones/laptops. CSS: color(display-p3 r g b).
• Rec. 2020 — the ultra-wide UHD/HDR broadcast gamut. No consumer display covers it fully yet; used as a container. CSS: color(rec2020 r g b).
• HDR — high dynamic range: not a wider gamut but a far higher brightness range (deeper blacks, brighter highlights), signalled by dynamic-range: high and delivered via PQ/HLG transfer curves.
• OKLCH / OKLab — perceptual spaces (lightness, chroma, hue) that stay even across gamuts — the right place to generate scales and interpolate. See the color tools.
• XYZ — the device-independent CIE reference all of the above convert through.