Web features explorer

Gamut mapping

Limited availability

Colors in CSS and <canvas> elements can be defined out of range of an output device or the color space of the canvas. Gamut mapping brings the color into range while preserving hue and lightness.

Browser support

  • Chrome Not supported
  • Chrome Android Not supported
  • Edge Not supported
  • Firefox Not supported
  • Firefox for Android Not supported
  • Safari Not supported
  • Safari on iOS Not supported
👍
6

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

No MDN documentation found. You can search for the feature on MDN. If you believe that MDN has no documentation about this feature, you can open an issue on MDN's GitHub repository.

Specifications

Developer use cases

  • Create dynamic color scales from a single accent color Create dynamic color scales from a single accent color [see original comment]
  • 1. I wanted to build a theme editor from two hue inputs, for my CSS library [candy.css](https://candy.wavebeem.com/theme-editor/), that would output a full OKLCH color palette for UI 2. I also wanted to use the OKLCH colors directly in my CSS to make defining [my website's theme](https://www.wavebeem.com/past-designs/) more logical (again, focusing more on hue and possibly allowing a theme selector later) back in 2024. 1. I wanted to build a theme editor from two hue inputs, for my CSS library [candy.css](https://candy.wavebeem.com/theme-editor/), that would output a full OKLCH color palette for UI 2. I also wanted to use the OKLCH colors directly in my CSS to make defining [my website's theme](https://www.wavebeem.com/past-designs/) more logical (again, focusing more on hue and possibly allowing a theme selector later) back in 2024. [see original comment]

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist