CSS color-mix() Function
The CSS color-mix() function takes two colors and blends them together in a specified color space by a given percentage.
Introduced in CSS Color Module Level 5, color-mix() enables native color manipulation directly within CSS without requiring preprocessors like Sass or JavaScript calculation libraries. It is commonly used to generate hover and active states, create tints and shades, produce semi-transparent color variations, and build adaptive theme palettes.
Syntax
The color-mix() function requires an interpolation color space preceded by the in keyword, followed by two colors with optional percentage weightings:
Parameters
in <color-space>: The color space in which the colors are interpolated. Common options includeoklch,oklab,srgb,srgb-linear,display-p3, andlab. Using a perceptually uniform space likeoklchoroklabavoids muddy gray intermediate tones.<hue-interpolation>(optional): For cylindrical color spaces (such asoklch,lch, andhsl), specifies the arc direction taken around the color wheel. Options areshorter hue(the default),longer hue,increasing hue, ordecreasing hue.<color1>,<color2>: Any valid CSS<color>values to mix together, such as named colors, hex codes,rgb(),hsl(),oklch(),currentColor, CSS custom properties, or even another nestedcolor-mix().percentage(optional): A percentage value between0%and100%specifying the proportion of that color in the mixture.
How Percentages Work
You can control the proportion of each color in several convenient ways:
- Both omitted: When neither percentage is specified, both colors contribute equally (an even 50% / 50% blend):
color-mix(in oklch, red, blue); /* 50% red, 50% blue */ - One percentage specified: The second color automatically takes the remainder up to 100%:
color-mix(in oklch, royalblue 70%, white); /* 70% royalblue, 30% white */ - Both percentages specified: If both percentages are provided and add up to 100%, they are applied directly:
color-mix(in oklch, crimson 20%, gold 80%); - Summing to less than 100%: If the two percentages sum to less than 100%, the mixed color retains its color balance but scales its opacity (alpha) down proportionally. For example,
color-mix(in srgb, red 30%, blue 30%)creates a 50/50 mix of red and blue with an effective alpha of 60%.
Basic Examples
Here are some examples that demonstrate how to use color-mix():
Using color-mix() in Style Sheets
The CSS specifications state that you can use color-mix() wherever a CSS <color> value is accepted. For example, you can use color-mix() to set the colors of text, backgrounds, and borders:
Choosing an Interpolation Color Space
The color space chosen for mixing has a noticeable impact on the resulting color:
| Color Space | Characteristics | Suitable For |
|---|---|---|
in oklch |
Perceptually uniform cylindrical space; preserves perceived lightness and vibrancy without producing muddy desaturated midpoints. | General UI styling, design tokens, and tint/shade generation (recommended default). |
in oklab |
Perceptually uniform rectangular space; linear transitions between opposing colors without hue curvature. | Smooth color gradients and transitions. |
in srgb |
Standard RGB color space. Opposite hues (e.g. red and green) can pass through dark or muddy brown/gray midpoints. | Simple transparency adjustments with transparent and legacy color compatibility. |
in display-p3 |
Wide-gamut RGB space; prevents gamut clipping when mixing vibrant wide-gamut colors. | Rich color blending on modern high-gamut displays. |
Hue Interpolation Modes
When mixing in a polar/cylindrical space like oklch or hsl, colors are situated on a circle (from 0° to 360°). You can explicitly specify how the mix travels between the two hues:
Related Color Functions
light-dark(): Returns one of two colors based on the current light or dark color scheme.oklch(): The perceptually uniform cylindrical color function recommended for interpolation withcolor-mix().oklab(): The rectangular counterpart tooklch().color(): Function for specifying colors in wide-gamut spaces like Display P3.