Why OKLCH can leave sRGB
OKLCH describes a wider perceptual space than most monitors show in sRGB. High chroma at certain hues simply has no sRGB coordinate — the color is valid in the abstract, but must be mapped for the common web.
What “in gamut” means numerically
sRGB is a triangle of three primaries. A color is inside it when, converted to linear sRGB, all three channels (R, G, B) fall in the range 0 to 1. If any channel lands at, say, 1.12 or −0.04, the color is out of gamut: the display cannot produce that much of a primary, and something has to give. The 0–255 HEX channels you see are the gamma-encoded version of the same values, so “out of range” is the same condition in either form.
Max chroma depends on hue and lightness
There is no single “maximum chroma” for sRGB. The boundary is a different shape at every hue. Saturated yellows only exist near high lightness, saturated blues and purples only at low to mid lightness, and every hue narrows toward pure black and pure white, where there is little room for color at all. So C = 0.25 can be fine at one hue and impossible at another, and the same hue can allow it at one L but not at the next step of your ramp. That is why a fixed chroma across a whole scale tends to break at the ends — see Building OKLCH scales.
Clip vs soft map
- Hard clip snaps channels into range — fast, but can shift hue or flatten punch.
- Soft / chroma-first mapping reduces C until the color fits, usually preserving hue and lightness better. Colorise Pro’s engine leans on this approach when clamping for display.
How CSS Color 4 maps colors
The CSS Color 4 specification describes gamut mapping as a search in OKLCH: keep lightness and hue, then reduce chroma until the color fits the destination gamut. In outline, it does a binary search on chroma and stops once the clipped candidate is close enough to the unclipped one, using a small OK-Lab color difference threshold, so the result is visually indistinguishable from the best in-gamut match without needing an exact boundary. Browsers and tools may differ in details, which is a good reason to export explicit sRGB values for anything that must match across platforms.
Worked examples (computed)
These rows are computed on this page with the same clamp the OKLCH Picker uses on export: chroma is reduced at fixed lightness and hue until the color fits sRGB. The last column is the chroma of the resulting HEX.
| OKLCH input | In sRGB? | Mapped HEX | Mapped C |
|---|---|---|---|
oklch(0.62 0.14 250) | Yes | #398AD6 | 0.139 |
oklch(0.7 0.25 145) | No — mapped | #00C30B | 0.239 |
oklch(0.6 0.3 250) | No — mapped | #0075FF | 0.223 |
oklch(0.9 0.2 100) | No — mapped | #FEDF00 | 0.187 |
oklch(0.5 0.3 30) | No — mapped | #DD0000 | 0.231 |
oklch(0.45 0.3 300) | No — mapped | #7700DD | 0.264 |
Notice that the first row survives almost unchanged, while the very saturated inputs lose a visible share of their requested chroma. You can look at specific hue families on the blue, green and yellow hubs, or browse the color library.
What Colorise Pro shows
The Color Picker flags whether the current OKLCH value sits inside sRGB. If it doesn’t, you can clip to a display-safe HEX before export — so tokens don’t surprise you in Safari, Chrome, or Figma sRGB documents.
Ramps and gamut
When you build 50–950 scales, extremes and neon midtones are where gamut bites hardest. Keep a chroma envelope that dips at the ends — see Building OKLCH scales.
Display-P3 and fallbacks
Many current phones, laptops and monitors can show more than sRGB, and CSS can address it with color(display-p3 r g b) or with an oklch() value that a wide-gamut display can render beyond sRGB. The safe pattern is to declare the sRGB value first and upgrade it only where the screen supports it:
.cta { background: #0075ff; }
@media (color-gamut: p3) {
.cta { background: oklch(0.6 0.3 250); }
}Keep the two values deliberately related, and check text contrast on the sRGB version: that is the one most people and most audits see. The Contrast Checker works on sRGB HEX, and the OKLCH vs HSL guide covers why the lightness channel makes this kind of paired tuning predictable.
Practical rule
Design in OKLCH for even ramps; ship sRGB-safe HEX/CSS for the common web. Treat Display-P3 as an enhancement, not the only source of truth, until your stack and audience both support it.