Add CSS Color Module Level 5 (color-mix(), color-contrast(), Relative color)

[Schweinepriester]

• Spec: https://www.w3.org/TR/css-color-5/
  • color-adjust() "Removed color-adjust(), keeping relative color syntax"
  • color-mix() => https://caniuse.com/mdn-css_types_color_color-mix
  • color-contrast() => https://caniuse.com/mdn-css_types_color_color-contrast
  • Relative color => https://caniuse.com/css-relative-colors
• https://twitter.com/equinusocio/status/1253646505900212226

---

• Virtually following up color-mod Add color-mod() | color() function - CSS Color Module Level 4 #2864
• The color-adjust() function is not to be confused with the property of the same name https://caniuse.com/#search=color-adjust
• We could consider creating an issue for each of the functions

[Schweinepriester]

Two are coming as experimental with Safari TP 122:

• Added experimental support for CSS Color 5 color-contrast() (r273683)
• Added experimental support for CSS Color 5 color-mix() (r273244)

[Schweinepriester]

color-mix() is available via MDN:

• https://caniuse.com/mdn-css_types_color_color-mix
• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()

[Schweinepriester]

color-contrast() as well:

• https://caniuse.com/mdn-css_types_color_color-contrast
• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast()

---

color-adjust() has been removed, per https://www.w3.org/TR/css-color-5/#changes-20210601:

Removed color-adjust(), keeping relative color syntax

---

I hadn't listed relative color syntax aka. "CSS Relative Colors", added now.
More links:

• https://www.w3.org/TR/css-color-5/#relative-colors
• https://blog.jim-nielsen.com/2021/css-relative-colors/
• https://dev.to/fabiogiolito/create-a-color-theme-with-these-upcoming-css-features-4o83

[Schweinepriester]

Support bugs, stolen from https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--color-functions:

• Chromium: Issues #1152772, #1092638, and #1274133
• Firefox: Meta Issue #1679227
• Safari: Issues #222530, #222258, and #221880

[GPHemsley]

With color-adjust() removed from the spec and color-mix() and color-contrast() being covered by MDN data (via mdn/browser-compat-data#9489, mdn/browser-compat-data#12039), that appears to leave this issue only covering relative colors.

The spec also defines @color-profile and device-cmyk(), but both already have an MDN page, so they're likely to be covered by MDN data in the future:
https://developer.mozilla.org/en-US/docs/Web/CSS/@color-profile
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/device-cmyk()

[Schweinepriester]

that appears to leave this issue only covering relative colors.

Check!

The spec also defines @color-profile and device-cmyk(), but both already have an MDN page, so they're likely to be covered by MDN data in the future

Good to know!
Those have also separate issues:

• device-cmyk(): device-cmyk css feature #1314
• @color-profile: Add "specifying a color profile: the @color-profile at-rule" #5958

[mangelozzi]

Please give us the ability to be able to set the opacity of a custom property that is set to a hex color code. This is propably the most common use case for color adjustments.
If you have a theme, each color is one variable (a hex color code), not 3 x RGB values one has to keep track of.

188K designers have sought for a fix for this on stackoverflow:
https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable

:root {
  --color: #f0f0f0;
}

#element {
  background: (somehow use var(--color) at some opacity);
}

[LifeIsStrange]

@mangelozzi I think you should voice this pain point at https://github.com/w3c/csswg-drafts/labels/css-color-5
More generally, methodically looking at the most popular CSS stackoverflow questions that have unsatisfying answers, and reporting them on the CSS specs working group would be a way to yield dramatically significant, reality-aligned improvements to CSS.

[Ugoku]

Links for relative colors:

• Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
• Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1701488
• Implemented in Webkit behind a flag: https://bugs.webkit.org/show_bug.cgi?id=221880 (Safari TP 122)

[Ugoku]

Links to issues for color-contrast:

• Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1111385
• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1682439
• Implemented in Safari already behind a flag

[Schweinepriester]

https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes:

Added support for CSS relative color syntax.

[jensimmons]

Let's get these pages on Can I Use!

[jensimmons]

Safari 16.2 added support for color-mix() back in December 2022.

[jensimmons]

Safari 16.4 beta has support for Relative Color Syntax.

[clairity]

yes, please add relative color syntax to caniuse! i've been checking for it periodically and end up slapping my forehead each time thinking i wasn't putting in the right incantations into the search box, to then finally realize it's not in there at all yet.

[controversial]

Safari 16.4 shipped with support for relative color at the end of March

[jensimmons]

Someone needs to make three pull-requests.

What is the current state of all the other browser support? Does Chrome/Edge/other Chromium mobile browsers or Firefox support any of these three new features? Even in partial experimental state?

Can anyone find issues for Chromium and Gecko so we can link to them?

Are there any MDN pages yet?

[Schweinepriester]

@jensimmons To my understanding the only thing missing from caniuse covered by this issue is relative color, with the rest being available via MDN:

• color-mix()
  • https://caniuse.com/mdn-css_types_color_color-mix
  • https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
• color-contrast()
  • https://caniuse.com/mdn-css_types_color_color-contrast
  • https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast

Issues for relative color (comment above):

Links for relative colors:

Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1701488
…

[Fyrd]

Relative color syntax now available at https://caniuse.com/css-relative-colors

Closing this ticket now as all appear to be accounted for now, thanks all for helping to provide info. :)