CSS Color-mix() Calculator

color-mix() is a CSS function that blends two colors together in a specified color space and returns the resulting color. It takes three arguments: the color space to interpolate in, the first color (with an optional percentage), and the second color (with an optional percentage). For example, color-mix(in oklch, red 50%, blue 50%) produces an equal blend of red and blue calculated in the OKLCH color space. It is part of the CSS Color Level 4 specification and is the native CSS way to mix colors without JavaScript or preprocessors.

color-mix() supports 11 color spaces: srgb, srgb-linear, hsl, hwb, lab, oklab, lch, oklch, xyz, xyz-d50, and xyz-d65. Rectangular spaces (sRGB, LAB, OKLAB, XYZ) interpolate each channel independently. Cylindrical spaces (HSL, HWB, LCH, OKLCH) treat hue as a circular value, which means there are two possible paths between any two hues - controlled by the hue interpolation method.

For most use cases, oklch and oklab produce the most perceptually natural-looking blends because they are designed to be perceptually uniform - meaning equal numerical steps correspond to equal perceived differences in color. srgb is the most widely understood but can produce muddy or desaturated midpoints when mixing complementary colors. hsl and hwb are intuitive for designers but the circular nature of hue means blends can shift unexpectedly depending on the hue interpolation method chosen. For gradients and tonal scales, oklch is generally the best starting point.

Hue interpolation methods only apply to cylindrical color spaces (HSL, HWB, LCH, OKLCH) where hue is expressed as an angle on a color wheel. Because hue is circular, there are always two routes between any two hue values - a shorter arc and a longer arc. shorter takes the smallest angle between the two hues (the default and usually what you want). longer goes the long way around the wheel, producing more dramatic colour transitions. increasing always moves toward higher hue values regardless of which direction is shorter. decreasing always moves toward lower hue values. These choices can completely change the appearance of a blend - for example, mixing red and blue via the shorter route gives purple, but via the longer route passes through yellow and green first.

Both LAB and OKLAB are perceptually uniform color spaces designed so that equal numerical changes correspond to equal perceived color differences. OKLAB is a more recent refinement of LAB that corrects for certain inaccuracies in LAB's uniformity, particularly in blue and high-chroma regions. In practice, blends using oklab tend to maintain more consistent perceived lightness and saturation through the midpoint than lab. OKLCH is the cylindrical form of OKLAB (adding a hue channel), and is generally the recommended choice for gradients and color scales in modern CSS.

The percentage next to each color controls how much of that color contributes to the final blend. color-mix(in srgb, red 70%, blue 30%) produces a result that is 70% red and 30% blue. If both percentages add up to less than 100%, the remainder is treated as transparent, effectively reducing the overall opacity of the result. If only one percentage is specified, the other is automatically calculated as the remainder to 100%. If neither is specified, both default to 50%, producing an equal blend.

color-mix() is supported in all modern browsers: Chrome 111+, Firefox 113+, Safari 16.2+, and Edge 111+. CSS Color Level 4 output formats such as oklab() and oklch() have similar but slightly varied support across browsers, so check current compatibility before using them in production. For maximum compatibility in your generated CSS, traditional formats like HEX, RGB, and HSL are safe across all browsers including older versions.

Yes. color-mix() supports alpha channel mixing alongside the color channels. When two colors with different alpha values are mixed, the resulting alpha is interpolated in the same way as the other channels. For example, mixing a fully opaque red with a fully transparent blue at 50% each produces a color with 50% opacity. Additionally, if the two percentages provided sum to less than 100%, the shortfall is added as a transparent component, which reduces the overall alpha of the result even if both input colors are fully opaque.

Standard srgb interpolates colors in gamma-encoded space, which is how colors are stored in most images and CSS values. srgb-linear first converts colors to a linear light representation before interpolating, then converts back. Linear mixing more closely reflects how light physically combines and avoids the darkening that can occur at the midpoint of sRGB blends - a well-known issue when mixing light and dark colors in gamma-encoded space. For a 50/50 blend of black and white, srgb-linear produces a perceptually mid-grey, while srgb can appear slightly darker than expected.

Use color-mix() anywhere a color value is accepted in CSS - in properties like color, background-color, border-color, CSS custom properties, and so on. The syntax is: color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>). For example: background-color: color-mix(in oklch, #3366ff 60%, white); produces a tint of blue mixed with 40% white in the OKLCH color space. You can also use it inside CSS custom properties to build dynamic design tokens: --brand-tint: color-mix(in oklab, var(--brand-color) 80%, white);