In my first post on contrast-color() I demo’d using color-mix() to change a background-color on hover, but I will be honest… mixing black and white isn’t always what you want. It would be cool and helpful to coerce contrast-color() to return either 1 or -1 so that we could adjust lightness in a color function on hover instead of only mixing white and black.

Dave Rupert

A technique for using CSS contrast-color() to manipulate button hover states by adjusting lightness rather than mixing black or white. By interpolating contrast-color() into a numeric value (1 or -1) via CSS if() statements and @property, you can use oklch() relative color syntax to lighten or darken a color along its natural lightness ramp. This produces warmer, more harmonious hover states compared to color-mix() with black/white, and offers finer control over the step amount and even chroma adjustments.

Interpolate contrast-color() to manipulate lightness