Comment by qfr
there is a way to do something close to this using lch:
--text: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0);
there is a way to do something close to this using lch:
--text: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0);
I’ve never seen any CSS function that has this call back style where you get parameters that you can modify. So interesting! Are there any other examples of this or is this unique to lch?
This is "relative color" syntax, it works with a range of color spaces/color functions. The key is the "from" at the front. Here's the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/...
there is a good article from lea verou https://lea.verou.me/blog/2024/contrast-color/ on a workaround like this
I will trust you on that since I did see the page load before it turned white on this phone browser combination.
LCH is awesome but OKLCH is even better!
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
Can honestly say this article changed my perspective on this subject drastically, such an amazing tool. I was very surprised that my designer friends hadn't heard of oklch at all, it solves a whole category of problems.