there is a way to do something close to this using lch:
--text: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0);
source: https://til.jakelazaroff.com/css/swap-between-black-and-whit...
there is a way to do something close to this using lch:
--text: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0);
source: https://til.jakelazaroff.com/css/swap-between-black-and-whit...
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.
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/...
It may be confusing, but everything here is static param. The —- prefix is css variables, where inside a css declaration block you write: —bg: blue
The `l` isn't!
Some newer ones like calc-size are also like this.
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.