CSS code snippet: .magic { --bg: red; background: var(--bg); /* Swap between white or black based on the background. */ color: lch(from var(--bg) calc((50 - l) * infinity) 0 0); }
Found a neat CSS trick to automatically swap between black or white text based on any arbitrary background color!
With relative color syntax, you can use calc to adjust the text color depending if the background is above or below 50% lightness in the LCH color space.