10% white
color-mix(in oklch, var(--brand) 90%, white)
css
color-mix(): one brand color, every state
Every design system has that one brand color that needs ten variants. Hover states, disabled buttons, tinted backgrounds, dark mode. We used to need Sass and lighten() for this. Now it's native CSS.
color-mix() takes two colors and a ratio, and the browser does the rest. The demos below all derive from a single value you can change yourself.
Basic mix
White mixes at 10%, 30%, and 50% from the same brand source.
30% white
color-mix(in oklch, var(--brand) 70%, white)
50% white
color-mix(in oklch, var(--brand) 50%, white)
Button hover states
Default, hover, active, and disabled all come from --brand.
Press and hold to preview the active state.
Dark mode tinting
Flip the surface. Light mode mixes toward white, dark mode mixes toward black.
Base
Tinted
color-mix(in oklch, var(--brand) 76%, white)