I'm interested in the ability to take the lightness/saturation/brightness from one color and apply it to another color using CSS alone.
The CSS relative color syntax introduces the from
keyword to color functions, such that stand-in variables will represent the individual values.
body {
background: rgb(from purple r g 0);
}
This would produce a color from purple
with no blue channel, as it is explicitly set to 0
. The issue with this syntax is that the values can only be used within the current function. I'm looking for some approach that allows me to get a value from one of these variables to compose another color.
body {
background: oklch(from hotpink oklch(from blue l) c h)
}
The above is invalid syntax but the oklch(from blue l)
is meant to represent getting the lightness value of blue
and use it to create the new version of hotpink
.
The question is, is there any way to get a similar behavior using new CSS color functionality (e.g., color-mix()
), such that a value from one color can inform the value of another color? I'm most specifically interested in matching the lightness and saturation between the two colors, only differing by hue. The reverse is also acceptable, where the hue is exposed and can be used to inform the incoming color.
One idea I've had is to get the color to grayscale so no hue exists and then use color-mix()
in some way with the incoming color. My attempts at this produce muddy colors. I'm generally unfamiliar with color space science, so I'm hoping there might be a way to get something close to the new functions we have today. Even the ability to set a value as a CSS custom property would open up the solution.
If you do not know a way and feel it is important to reply, please leave a comment instead of an answer. Thank you!