CSS color-mix() Palette

How It Works

:root {
  --brand: oklch(0.65 0.25 275);
  --brand-light: color-mix(in oklch, var(--brand), white 30%);
  --brand-dark: color-mix(in oklch, var(--brand), black 25%);
  --brand-subtle: color-mix(in oklch, var(--brand), transparent 85%);
}

.btn {
  background: var(--brand);
  border: 1px solid var(--brand-dark);
}

.btn:hover {
  background: var(--brand-light);
}

Summary

• color-mix(in oklch, color1, color2 %) mixes two colors in the perceptually uniform OKLCH color space, producing natural-looking results.
• From a single --brand color, you can derive lighter, darker, and semi-transparent variants — no hardcoding hex values for every shade.
• oklch() is a modern color function that defines colors by lightness, chroma, and hue — making it intuitive to adjust colors the way designers think.
• This replaces Sass color functions (lighten(), darken(), mix()), JavaScript color libraries, and manual design token spreadsheets.
• Change the --brand variable to any value and the entire palette updates automatically across all components.
• Supported in Chrome 111+ (Mar 2023), Safari 16.2+ (Dec 2022), Firefox 113+ (May 2023), and Edge 111+. Fully cross-browser.