CSS color-mix() Function

CSS color-mix() Function

The CSS color-mix() function blends colors in a specified color space. It can create lighter, darker, and transparent variations of existing colors without manually calculating new color values. The function supports mixing percentages, different color spaces, and hue interpolation methods.

Syntax

color-mix(in color-space, color1, color2)
color-mix(in color-space, color1 percentage, color2 percentage)
color-mix(in color-space hue-method, color1, color2)

The function mixes colors using a selected color space and optional percentages.

For example:

.box {
  background-color: color-mix(in srgb, red, blue);
}

This mixes red and blue equally in the sRGB color space, producing purple.

To control the proportions:

.box {
  background-color: color-mix(in srgb, red 75%, blue 25%);
}

The result contains 75% red and 25% blue.

Additional examples:

color-mix(in srgb, red, white)
color-mix(in srgb, blue 80%, white)
color-mix(in oklab, red, blue)
color-mix(in oklch, red 60%, blue 40%)
color-mix(in hsl longer hue, red, blue)
color-mix(in srgb, #0066cc 70%, transparent)

The in keyword introduces the interpolation color space. Under the current CSS Color Module Level 5 syntax, it may be omitted, in which case oklab is used.

color-mix(red, blue)
color-mix(in oklab, red, blue)

These two expressions are equivalent under the current specification.

Parameters

The color-mix() function accepts an optional interpolation method followed by one or more colors and optional percentages.

For example:

color-mix(in oklch shorter hue, red 60%, blue 40%)

The function mixes red and blue in the OKLCH color space using the shorter hue interpolation path.

The two-color form with an explicit interpolation color space is the most widely supported syntax.

How It Works

The browser converts the supplied colors into the selected interpolation color space and combines their channel values according to the mixing percentages.

For example:

color-mix(in srgb, red 50%, blue 50%)

In sRGB, red and blue have these channel values:

red  = rgb(255 0 0)
blue = rgb(0 0 255)

An equal mix produces approximately:

rgb(128 0 128)

However, the same two colors mixed in another color space can produce a different result:

color-mix(in oklab, red 50%, blue 50%)

OKLab uses a perceptual color model, so the resulting color differs from a simple average of sRGB channels.

The interpolation color space affects the appearance of the mixture, even when the original colors and percentages are identical.

Mixing Percentages

Percentages control how much each color contributes to the result.

When mixing two colors, omitting both percentages creates an equal mixture:

color-mix(in srgb, red, blue)

This is equivalent to:

color-mix(in srgb, red 50%, blue 50%)

If only one percentage is specified, the other receives the remaining percentage:

color-mix(in srgb, red 70%, blue)

This is equivalent to:

color-mix(in srgb, red 70%, blue 30%)

When the specified percentages do not total 100%, they are normalized.

When the total is below 100%, the resulting color also receives an alpha multiplier equal to that total. For example, two opaque colors specified at 40% each produce an equal mixture with 80% opacity.

Percentages cannot be negative or exceed 100%. A two-color mixture with both percentages set to 0% is invalid.

Color Spaces

The selected color space determines how colors are interpolated.

Additional supported spaces include a98-rgb, prophoto-rgb, rec2020, and the XYZ color spaces.

For example:

color-mix(in srgb, red, blue)
color-mix(in srgb-linear, red, blue)
color-mix(in lab, red, blue)
color-mix(in oklab, red, blue)
color-mix(in oklch, red, blue)

These expressions may produce visibly different colors because the interpolation calculations occur in different color spaces.

There is no single color space that produces the best result for every design. The appropriate choice depends on the intended appearance.

Hue Interpolation

Polar color spaces, including hsl, hwb, lch, and oklch, support optional hue interpolation methods.

These methods control how the hue travels around the color wheel when mixing colors.

For example:

color-mix(in hsl shorter hue, red, blue)
color-mix(in hsl longer hue, red, blue)
color-mix(in hsl increasing hue, red, blue)
color-mix(in hsl decreasing hue, red, blue)

Mixing red and blue with the shorter hue path produces a magenta or purple hue, while the longer path passes through other regions of the color wheel.

The hue interpolation method must be used with a polar color space. It cannot be applied directly to srgb or oklab.

For example, this is invalid:

color-mix(in srgb longer hue, red, blue)

Lighter and Darker Colors

The color-mix() function can create lighter or darker variations of an existing color.

To create a lighter variation, mix the color with white:

.light-blue {
  background-color: color-mix(in srgb, #0066cc 70%, white);
}

To create a darker variation, mix it with black:

.dark-blue {
  background-color: color-mix(in srgb, #0066cc 70%, black);
}

Changing the percentage adjusts how much of the original color remains.

For example:

color-mix(in srgb, #0066cc 90%, white)
color-mix(in srgb, #0066cc 70%, white)
color-mix(in srgb, #0066cc 50%, white)

As the proportion of white increases, the result becomes lighter.

Mixing with black creates progressively darker variations.

The results depend on the interpolation color space. Mixing with white or black in oklab may produce a different progression than mixing in srgb.

Transparency

The color-mix() function can create transparent variations by mixing a color with transparent.

For example:

.overlay {
  background-color: color-mix(in srgb, #0066cc 50%, transparent);
}

When the original color is fully opaque, this creates a variation with approximately 50% opacity.

Other examples:

color-mix(in srgb, red 75%, transparent)
color-mix(in srgb, red 50%, transparent)
color-mix(in srgb, red 25%, transparent)

These produce increasingly transparent versions of red.

CSS color interpolation accounts for alpha values using premultiplied color channels. This helps avoid unwanted dark edges when mixing an opaque color with transparency.

Mixing with transparent is different from mixing with white. White changes the resulting color, while transparency primarily reduces opacity.

The function cannot make an existing semi-transparent color fully opaque merely by mixing it with a transparent color.

Using Custom Properties

The color-mix() function works with CSS custom properties to create reusable color variations.

For example:

:root {
  --brand-color: #0066cc;
}
.button {
  background-color: var(--brand-color);
}
.button:hover {
  background-color: color-mix(in srgb, var(--brand-color) 80%, black);
}

The hover color is calculated from the original brand color.

If the custom property changes, the hover color changes automatically.

Several related colors can be defined:

:root {
  --brand-color: #0066cc;
  --brand-light: color-mix(in srgb, var(--brand-color) 70%, white);
  --brand-dark: color-mix(in srgb, var(--brand-color) 70%, black);
  --brand-transparent: color-mix(in srgb, var(--brand-color) 40%, transparent);
}

These custom properties can be reused throughout a website.

For example:

.notice {
  background-color: var(--brand-light);
  border-color: var(--brand-dark);
}
.overlay {
  background-color: var(--brand-transparent);
}

This approach helps keep related interface colors consistent without manually maintaining separate color values.

Mixing Multiple Colors

The current CSS Color Module Level 5 specification extends color-mix() to support more than two colors.

For example:

color-mix(in oklab, red 40%, blue 30%, yellow 30%)

This mixes three colors using the specified proportions.

The current specification also allows the interpolation color space to be omitted:

color-mix(red, blue, yellow)

In that case, oklab is the default interpolation color space.

Support for these newer forms may differ from the established two-color syntax. Use the conventional form when broad compatibility is required:

color-mix(in oklab, red, blue)

For older implementations that support only two colors, nested expressions can be used:

color-mix(in oklab, color-mix(in oklab, red 60%, blue 40%) 70%, yellow 30%)

Nested mixing is not necessarily equivalent to a single multi-color mixture because intermediate colors and their weights affect the result.

Example

The following example demonstrates different mixtures of blue and white.

Each swatch uses a different proportion of the original blue color.

HTML:

<div class="color-mix-demo">
  <div class="color-mix-item">
    <span>100% Blue</span>
    <div class="color-mix-swatch mix-100"></div>
  </div>
  <div class="color-mix-item">
    <span>75% Blue</span>
    <div class="color-mix-swatch mix-75"></div>
  </div>
  <div class="color-mix-item">
    <span>50% Blue</span>
    <div class="color-mix-swatch mix-50"></div>
  </div>
  <div class="color-mix-item">
    <span>25% Blue</span>
    <div class="color-mix-swatch mix-25"></div>
  </div>
</div>

CSS:

.color-mix-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.color-mix-item {
  width: 120px;
  text-align: center;
}
.color-mix-item span {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
}
.color-mix-swatch {
  width: 120px;
  height: 90px;
  border: 1px solid #ccc;
}
.mix-100 {
  background-color: #0066cc;
}
.mix-75 {
  background-color: color-mix(in srgb, #0066cc 75%, white);
}
.mix-50 {
  background-color: color-mix(in srgb, #0066cc 50%, white);
}
.mix-25 {
  background-color: color-mix(in srgb, #0066cc 25%, white);
}

The swatches become progressively lighter as the percentage of white increases.

The original blue color remains the starting point for every mixture.

Color Space Example

This example compares the same red and blue mixture using three different color spaces.

HTML:

<div class="mix-space-demo">
  <div class="mix-space-item">
    <span>sRGB</span>
    <div class="mix-space-swatch mix-space-srgb"></div>
  </div>
  <div class="mix-space-item">
    <span>OKLab</span>
    <div class="mix-space-swatch mix-space-oklab"></div>
  </div>
  <div class="mix-space-item">
    <span>HSL</span>
    <div class="mix-space-swatch mix-space-hsl"></div>
  </div>
</div>

CSS:

.mix-space-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.mix-space-item {
  width: 140px;
  text-align: center;
}
.mix-space-item span {
  display: block;
  margin-bottom: 10px;
}
.mix-space-swatch {
  width: 140px;
  height: 100px;
  border: 1px solid #ccc;
  background-color: purple;
}
.mix-space-srgb {
  background-color: color-mix(in srgb, red, blue);
}
.mix-space-oklab {
  background-color: color-mix(in oklab, red, blue);
}
.mix-space-hsl {
  background-color: color-mix(in hsl, red, blue);
}

The three mixtures use identical input colors and percentages, but their appearances differ because each color space uses a different interpolation method.

Common Uses

The color-mix() function is useful for generating related colors directly in CSS.

For example, a button can use a darker variation on hover:

.button {
  background-color: #0066cc;
  color: #fff;
}
.button:hover {
  background-color: color-mix(in srgb, #0066cc 80%, black);
}

The hover color is calculated automatically from the original blue.

Limitations

The color-mix() function has several important rules and limitations.

• Mixing results depend on the selected interpolation color space.
• Mixing percentages must be between 0% and 100%.
• Negative percentages are invalid.
• Two colors with percentages of 0% each produce an invalid mixture.
• Hue interpolation methods apply only to polar color spaces.
• Mixing with transparency does not necessarily increase the opacity of an existing semi-transparent color.
• Wide-gamut results may require gamut mapping on displays with smaller color gamuts.
• Newer syntax, including omitted color spaces and multiple color arguments, may not be supported by older browsers.
• Mixing colors does not guarantee sufficient contrast for accessible text.

For example, this is valid:

color-mix(in srgb, red 70%, blue 30%)

However, this is invalid because the percentage is negative:

color-mix(in srgb, red -20%, blue)

The following is also invalid because the percentage exceeds 100%:

color-mix(in srgb, red 120%, blue)

Use valid percentages and test the resulting colors for readability and visual consistency.

Browser Support

The CSS color-mix() function is Baseline Widely available. The established two-color syntax has been supported across major browser engines since May 2023.

Some newer features, including mixing more than two colors and omitting the interpolation color space, may have different browser support.

For a fallback, provide a conventional color before the advanced declaration:

.example {
  background-color: #6699cc;
  background-color: color-mix(in srgb, #0066cc 60%, white);
}

Browsers that do not support color-mix() retain the earlier color.

You can also use @supports:

@supports (color: color-mix(in srgb, red, blue)) {
  .example {
    background-color: color-mix(in srgb, #0066cc 60%, white);
  }
}

For current compatibility information, visit Can I Use? and search for CSS color-mix().

Specifications

The color-mix() function is defined in the CSS Color Module Level 5 .

The specification defines interpolation color spaces, mixing percentages, alpha handling, hue interpolation, and mixing multiple colors.

Related CSS functions include color(), rgb(), hsl(), lab(), lch(), oklab(), and oklch().