HTML & CSS reference

color-mix()

Mixes two colors in the given proportion.

Syntax

color-mix(in space, color1 p%, color2)

Parameters

Parameter	Type	Description
in space	color space	The color space for mixing: `in oklch`, `in srgb`.
color p%	color	Colors with optional percentages; by default 50% each.

Examples

A darker hover state and a light tint from one brand color:

<style>
  :root { --brand: royalblue; }
  .btn { padding: 8px 16px; border: 0; color: white; background: var(--brand); }
  .btn:hover { background: color-mix(in oklch, var(--brand), black 25%); }
  .soft { background: color-mix(in oklch, var(--brand) 20%, white); color: black; }
</style>
 
<button class="btn">Hover — darker</button>
<button class="btn soft">A light tint</button>

Notes

With color-mix() one variable is enough for a whole palette of shades. Mixing in oklch usually gives more natural results than in srgb. Supported in all current browsers since 2023.

Related recipes

How to use CSS variables for colors

In the tutorial

Modern colors — The oklch() function and why it makes palettes easy, mixing colors with color-mix() and the relative syntax oklch(from ...).

Thanks for reading!