-1

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!

3
  • Could you please add a minimal reproducible example along with expected and actual results?
    – Kosh
    Commented Nov 20 at 21:48
  • I'm not sure how to provide more than I have so far since I don't know if this is even possible with current features. Commented Nov 20 at 22:33
  • @DonnieD'Amato Why "only using CSS"? Is there some third-party limit(s) about why can't JS be involved in this task?
    – VC.One
    Commented Dec 2 at 12:55

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.