4 ms·
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/c
by qfr 1y ago
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-white-text-based-on-background-color/ https://til.jakelazaroff.com/css/swap-between-black-and-whit...
- natemwilson 1y agoI’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?
- fireflies_ 1y agoThis 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/Relative_colors https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/...
- halflife 1y agoIt may be confusing, but everything here is static param. The —- prefix is css variables, where inside a css declaration block you write: —bg: blue
- natemwilson 1y agoThe `l` isn't!
- KTibow 1y agoSome newer ones like calc-size are also like this.
- LorenzA 1y agothere is a good article from lea verou https://lea.verou.me/blog/2024/contrast-color/ https://lea.verou.me/blog/2024/contrast-color/ on a workaround like this
- mediumsmart 1y agoI will trust you on that since I did see the page load before it turned white on this phone browser combination.
- sabellito 1y agoLCH is awesome but OKLCH is even better! https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#comparing-oklch-with-other-css-color-formats 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.