What color space should I mix in?

in oklch and in srgb are common. oklch gives more perceptually even blends, especially across different hues.

Is color-mix() supported?

Yes, in all current major browsers. Add a plain fallback color before the color-mix declaration for very old browsers.

What is relative color syntax?

It outputs a new color from a base, like rgb(from var(--c) r g b / 50%), reusing channels with tweaks. Support is newer than color-mix, so test and provide fallbacks.

CSS color-mix() and Relative Colors

1. Blend two colors

color-mix() interpolates between two colors in a color space.

Tint scale

One brand color mixed with white from 0 to 100 percent.

.swatch {
  background: color-mix(in oklch, #6366f1 50%, white);
}

2. Hover and active shades

Derive darker states from a single brand token.

Hover button

Hover mixes the brand with black; active mixes more.

.btn { background: var(--brand); }
.btn:hover {
  background: color-mix(in oklch, var(--brand) 85%, black);
}

3. Relative color syntax

Reuse a base color with a new alpha or lightness.

Tint panel

This panel fill is a 12% tint of the brand color

rgb(from ...) derives a translucent fill from the brand color.

.panel {
  /* translucent fill derived from --brand */
  background: rgb(from var(--brand) r g b / 0.12);
}

Frequently asked questions

What color space should I mix in?: in oklch and in srgb are common. oklch gives more perceptually even blends, especially across different hues.
Is color-mix() supported?: Yes, in all current major browsers. Add a plain fallback color before the color-mix declaration for very old browsers.
What is relative color syntax?: It outputs a new color from a base, like rgb(from var(--c) r g b / 50%), reusing channels with tweaks. Support is newer than color-mix, so test and provide fallbacks.