Darken a Color by Mixing with Black
The companion to lightening: mix any color with black in oklch to derive shades. Useful for hover-darken effects, pressed states, and dark-mode surface elevation.
Detailed Explanation
Shades from a Single Brand Color
Symmetrical to tints, shades (darker variants) come from mixing with black:
:root {
--brand: #2563eb;
}
.shade-15 { background: color-mix(in oklch, var(--brand), black 15%); }
.shade-30 { background: color-mix(in oklch, var(--brand), black 30%); }
.shade-50 { background: color-mix(in oklch, var(--brand), black 50%); }
A 15% black mix is a typical hover-darken; 30% is a pressed/active state; 50% drops you into "deep" surfaces useful for footers or contrast zones.
Why OKLCH again
In sRGB, mixing with black flattens chroma faster than lightness, so your "darker brand color" loses identity quickly. OKLCH preserves chroma while reducing L, so the brand stays recognizable down to ~70% black mix. This is why every 2024+ design system you read about builds shade scales in OKLCH.
Quick recipe for "ink-on-brand"
Need a darker text variant that still reads as your brand? Mix the brand with black 75% in oklch, then check the contrast against your background with the accessibility color checker.
Combine with currentColor
color: color-mix(in oklch, currentColor, black 20%) darkens whatever
color the element inherits, useful inside reusable components that
should not hard-code a brand color.
Use Case
Build hover, focus, and pressed states from a single token. Also useful for dark-mode 'elevated surface' colors that need to sit on top of a dark background while staying tinted.