Support CSS Color Level 4 hwb/lab/lch/gray functions (and related adjustments)

• Proposal (Language)
• Proposal (JS API)
• Embedded Protocol
• Request for Comments (https://github.com/sass/sass-site/pull/671)

Implementation

• Dart Sass
• Node.js Embedded Host
• Tests
• Documentation
• Specification
• Migrator

Breaking Changes

• Dart Sass
• Tests
• Documentation

---

See Color Level 4

Having access to CIE colors/adjustments would be particularly useful for design systems, and it seems like we could provide the syntax in sass:color without waiting on browsers to support the CSS variant.

When I say adjustments, I’m not referring to the new CSS color functions in Level 5. I think we need to wait for those to solidify. I’m thinking of something similar to, or extending, color.adjust().

[mirisuzanne]

Yeah, I think we should not be adding these to the global namespace. But if we put them in the sass:color module, they can provide both consistent sRGB output, and a straight-forward optional upgrade path. Authors can start using the plain CSS functions on their own schedule, without our intervention, and the module functions will continue to be useful for supporting old browsers.

I’m thinking of them like the sass:math functions that overlap CSS – a bit more limited than what the eventual CSS functions will provide, but a consistent and backwards-compatible pre-compiled option. No config required, and no more per-screen variation than using hsl() or rgb() now.

While there are several methods for handling out-of-gamut colors, it’s clear (and defined in the CSS spec) that we should be using “relative-colorimetric” rendering. That doesn’t leave much that we need to decide. At this point, I think if we can find a good method for calculating relative-colorimetric adjustments, I can finish putting together a proposal.

[mirisuzanne]

I’m told by the editors of CSS Color level 4 that the best solution is to lock hue & lightness, then reduce chroma until the color is in-gamut.

I’ve created a (rough, slow) demo of that approach.