IssueRaiser

Gamut mapping

### Description CSS currently provides several ways to define and manipulate colors, that are independent of any particular RGB gamut, such as `oklch()` or `lab()`. While this makes it easier to define and manipulate colors in ways that are closer to human perception, it also makes it much easier to define colors that fall **outside of the display gamut of any output device**, especially when **modifying existing colors** (that are in gamut to begin with!), such as when creating color ramps from a dynamic accent color. For example, pick _any_ non-neutral accent color (e.g. `#0075ff`, Chrome’s default `AccentColor` value), and adjust its OKLCh lightness to 97% to produce a tinted background color. The result (`oklch(from #0075ff 97% c h)` or `oklch(0.97 0.2235 258.41)`) is **outside the display gamut of any conceivable display device**. Without gamut mapping (i.e. currently in most UAs), this is displayed via converting to RGB, and **clipping red, green, blue coordinates**. This produces colors **dramatically** different than the specified color, losing all guarantees that these color spaces were supposed to provide. This carries **accessibility implications** as well, since RGB clipping can significantly affect contrast characteristics, making color pairs inaccessible. See [here a particularly egregious example](https://codepen.io/leaverou/pen/VYpvwwg) where **white is displayed as blue in non-GM browsers** ([bsky post](https://bsky.app/profile/lea.verou.me/post/3mufb5dau

Posted by LeaVerou on Sep 14, 2026, 11:08 AM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.2,000 issues0 comments

github (SaaS)

Gamut mapping

LeaVerouSep 14, 2026, 11:08 AM

### Description CSS currently provides several ways to define and manipulate colors, that are independent of any particular RGB gamut, such as `oklch()` or `lab()`. While this makes it easier to define and manipulate colors in ways that are closer to human perception, it also makes it much easier to define colors that fall **outside of the display gamut of any output device**, especially when **modifying existing colors** (that are in gamut to begin with!), such as when creating color ramps from a dynamic accent color. For example, pick _any_ non-neutral accent color (e.g. `#0075ff`, Chrome’s default `AccentColor` value), and adjust its OKLCh lightness to 97% to produce a tinted background color. The result (`oklch(from #0075ff 97% c h)` or `oklch(0.97 0.2235 258.41)`) is **outside the display gamut of any conceivable display device**. Without gamut mapping (i.e. currently in most UAs), this is displayed via converting to RGB, and **clipping red, green, blue coordinates**. This produces colors **dramatically** different than the specified color, losing all guarantees that these color spaces were supposed to provide. This carries **accessibility implications** as well, since RGB clipping can significantly affect contrast characteristics, making color pairs inaccessible. See [here a particularly egregious example](https://codepen.io/leaverou/pen/VYpvwwg) where **white is displayed as blue in non-GM browsers** ([bsky post](https://bsky.app/profile/lea.verou.me/post/3mufb5dau

Comments (0)

No comments yet. Start the discussion.

Comment on this issue