In CSS Color Level 5, how do you reference the value of a relative color from a custom property (color-mix, color-mod, etc)?

49 Views Asked by At

So I'm trying to apply a series of modifications to a color via a custom property, but as far as I can tell it can only go one level deep.

Unless I can find a way to extract the color value from the custom variable, the subsequent use of the --color references the function and not the value of the function.

May just be my mental model for this is off, or it is in fact a limitation of the Level 5 Color spec, based on "compatibility", since custom properties are treated as strings.

Any thoughts on how to do this correctly?

https://www.w3.org/TR/css-color-5/#relative-colors

:root{
--hot-red:#ff0000;
/* the use of custom property here seems to cause the relative color to show up as invalid property */
--color:color-mix(in srgb,var(--hot-red),#000 20%);
}

/* this gives a css error in chrome 120 */
body{ color: oklch(from var(--color) calc(l + 25) c h); }

0

There are 0 best solutions below