Why does my colour show "outside sRGB"?

Standard monitors can only show a limited slice of human-visible colour (sRGB). OKLCH is a wider, perceptually-uniform space, so it lets you specify colours that simply don't fit on an sRGB screen. Browsers clip those to the nearest sRGB match — the hex preview shows the clipped result.

Why prefer oklch() over hsl()?

HSL was built on RGB so its lightness is uneven across hues (yellow looks much brighter than blue at the same L). OKLCH was tuned against real perception data, so animations, theme tokens, and accessibility ratios stay predictable as you change hue.

OKLCH Color Picker

Color

OKLCH is the colour space CSS Color 4 uses to make lightness, saturation, and hue behave the way the eye actually expects: nudging hue at fixed L+C keeps perceived brightness steady, where the older HSL would shift dramatically. This picker exposes the three channels plus alpha and lets you see the exact CSS oklch() form, the equivalent sRGB hex / rgb / hsl, the OKlab a/b breakdown, and a warning when your colour is so saturated that it falls outside the sRGB monitor gamut (browsers fall back to the closest sRGB colour in that case).

—

Presets

#0099f0

Lightness (L): 65.0%Chroma (C): 0.180Hue (H): 240.0°Alpha: 1.00

sRGB gamutoutside sRGB (clipped)

oklch()oklch(65.0% 0.180 240.0)
Hex (clipped)#0099f0
rgb()rgb(0, 153, 240)
hsl()hsl(202, 100%, 47%)
oklab()oklab(65.0% -0.090 -0.156)

Lightness 0–1 (0 = black, 1 = white). Chroma 0 is neutral grey; values above 0.3 often land outside sRGB.

How to use

Drag L, C, H to dial in the colour — keep an eye on the gamut badge.
Drop chroma a little when the gamut badge turns amber if you want the on-screen swatch to be exact.
Copy whichever form your stylesheet needs: modern stacks should reach for the oklch() string.

Frequently asked questions

Why does my colour show "outside sRGB"?: Standard monitors can only show a limited slice of human-visible colour (sRGB). OKLCH is a wider, perceptually-uniform space, so it lets you specify colours that simply don't fit on an sRGB screen. Browsers clip those to the nearest sRGB match — the hex preview shows the clipped result.
Why prefer oklch() over hsl()?: HSL was built on RGB so its lightness is uneven across hues (yellow looks much brighter than blue at the same L). OKLCH was tuned against real perception data, so animations, theme tokens, and accessibility ratios stay predictable as you change hue.