How to have the browser pick a contrasting color in CSS

Re:How to have the browser pick a contrasting color in CSS by qfr on Saturday May 17, 2025 @02:13PM (#44015990)

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...

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by natemwilson on Saturday May 17, 2025 @04:38PM (#44016837)

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?

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by fireflies_ on Saturday May 17, 2025 @04:44PM (#44016871)

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/...

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by KTibow on Saturday May 17, 2025 @07:56PM (#44017903)

Some newer ones like calc-size are also like this.

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by halflife on Saturday May 17, 2025 @04:45PM (#44016874)

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

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by natemwilson on Saturday May 17, 2025 @09:20PM (#44018254)

The `l` isn't!

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by LorenzA on Saturday May 17, 2025 @05:09PM (#44016987)

there is a good article from lea verou https://lea.verou.me/blog/2024/contrast-color/ on a workaround like this

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by mediumsmart on Sunday May 18, 2025 @01:39AM (#44019227)

I will trust you on that since I did see the page load before it turned white on this phone browser combination.

[ Parent | on HN ]

Re:How to have the browser pick a contrasting color in CSS by sabellito on Sunday May 18, 2025 @06:28AM (#44020324)

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.

[ Parent | on HN ]