| name | — |
|---|---|
| hex | |
| rgb | |
| hsl | |
| hsb | |
| hwb | |
| oklch | |
| oklab |
This browser can't set up a WebGPU HDR canvas, so the demo below is hidden. Open this
page in Safari 26+ or a Chromium browser on an HDR display — like your Studio
Display XDR — to see colours rendered brighter than #fff.
Your display isn't reporting HDR capability, so the boosted swatch may look identical to the SDR one. Connect an HDR display to see the effect.
×1 is ordinary white; higher values push into your display's HDR headroom. Browsers can't report how much headroom a screen has, so this is a relative control — push until it stops getting brighter and that's your display's ceiling. It's modest on a laptop panel and enormous on a Pro Display XDR.
| rec2100-pq reference |
|---|
Capability report
Enter any CSS colour — hex, rgb(), hsl(), oklch(),
oklab(), hwb(), or a named colour. Drag the picker or sliders to adjust.
The translucent variant renders identically on white but darker on dark backgrounds —
useful for dual-theme palettes.
Want a coloured light across multiple monitors?
Light — useful for video/photo shoots.