Kevin Powell - Community•6mo ago

Relative color from currentcolor

Hello everyone, On MDN's relative color page (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) it's stated that origin-color should be any valid color, including currentcolor. But when I try to do something like this :

color: red;
background-color: currentcolor;
background-color: rgb(from red r g b / 0.5);
background-color: rgb(from currentcolor r g b / 0.5);

color: red;
background-color: currentcolor;
background-color: rgb(from red r g b / 0.5);
background-color: rgb(from currentcolor r g b / 0.5);

First and second background-color work fine, but not the third one (see attachment). Does anyone have any idea if I'm doing something wrong ? Or do I missing something ? :think: PS: I tried color with both lower and upper case c

MDN Web Docs

Using relative colors - CSS: Cascading Style Sheets | MDN

The CSS colors module defines relative color syntax, which allows a CSS value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.

9 Replies

Jochem•6mo ago

probably just a feature support issue, not all of these have great support: https://caniuse.com/?search=relative%20colors

MaelFrOP•6mo ago

I tested it on Chrome and Safari, neither seem to work. 😕

EIO•6mo ago

@MaelFr @Jochem is right. Relative color functions don't support currentColor

EIO•6mo ago

And I apparently just learnt a new way to find this kind of niche bugs https://wpt.fyi/results/css/css-color/parsing/color-valid-relative-color.html?label=experimental&label=master&aligned I found it while scrubbing through the specs

EIO•6mo ago

Here's a work around that Gemini suggested to me though:

  --current-color: purple;
  color: var(--current-color);
  background-color: rgb(from var(--current-color) 200 g b);

  --current-color: purple;
  color: var(--current-color);
  background-color: rgb(from var(--current-color) 200 g b);

Of course, I know this is very limited, but hopefully, you can use it. If not, maybe force color-mix to give you something similar to what you want. But sadly this one won't work though 👇

  color: purple;
  --current-color: color-mix(in oklab, currentcolor 100%, transparent);
  background-color: rgb(from var(--current-color) 100 g b);

  color: purple;
  --current-color: color-mix(in oklab, currentcolor 100%, transparent);
  background-color: rgb(from var(--current-color) 100 g b);

MaelFrOP•6mo ago

OK, so the MDN doc is right, just not yet implemented. Thanks for the answer and the link, that's what I was looking for. I'll wait a little bit more to be able to use it.

EIO•6mo ago

🙏

clevermissfox•6mo ago

I just saw* an intent to prototype relative colors this past week so hopefully we wont have to wait too long

EIO•6mo ago

I've been low-key using contextual understanding to figure out the shipping process. Can you explain the process from before a feature is spec'd to when it finally ships to the browsers?

Gaming

Programming

Relative color from currentcolor