Lighten a Color by Mixing with White
Use color-mix() to create tints. Mixing your brand color with white in oklch produces clean, perceptual lightness steps that beat opacity hacks.
Detailed Explanation
Tints from a Single Brand Color
The cleanest way to derive a tint (lighter shade) from a brand color is to mix it with white in OKLCH:
:root {
--brand: #2563eb; /* blue-600 */
}
.tint-25 { background: color-mix(in oklch, var(--brand), white 25%); }
.tint-50 { background: color-mix(in oklch, var(--brand), white 50%); }
.tint-75 { background: color-mix(in oklch, var(--brand), white 75%); }
The percentage on white controls how much white is mixed in. At 75%
white you get a near-white surface that still carries a recognizable
brand tint — perfect for hover backgrounds on light themes.
Why this beats opacity
Setting opacity: 0.25 on an element fades the whole element,
including its children and text. color-mix() only changes the
background color, so foreground content keeps its full opacity and
remains accessible.
Why OKLCH (not sRGB)
Mixing with white in sRGB compresses the perceived lightness scale and produces uneven steps. OKLCH walks the L axis linearly, so successive mixes produce visually equal steps — the foundation of every modern shade scale.
Pair this with
A full shade scale (50–950) requires both white and black inputs. The brand shades example shows how to chain tints and shades into a complete palette.
Use Case
Generate hover/focus surfaces, light-mode background tints, banner backgrounds, and disabled-state fills from a single brand variable. Replaces hand-tuned palettes maintained in Figma.