CSS color-mix() Generator

Generate CSS color-mix() declarations. Mix two colors in different color spaces with a configurable ratio and preview the result.

Color 1: #ff0000Color 2: #0000ffRatio: 50% / 50%Color Space: SRGBCSS Length: 59 chars

Presets & Samples

Color 1

Color 2

Mix Ratio50% Color 1 / 50% Color 2

Color Space

Preview

Color 1 (Left) · Mixed (Center) · Color 2 (Right)

CSS Output

background-color: color-mix(in srgb, #ff0000 50%, #0000ff);

Browser support: Chrome 111+, Firefox 113+, Safari 16.2+

About CSS color-mix()

The CSS color-mix() function lets you mix two colors in a specified color space and ratio directly in CSS, without JavaScript or preprocessors. Different color spaces produce different mixing results — oklch andoklab are perceptually uniform, producing visually smooth gradients, while srgb matches what canvas/WebGL use. The percentage specifies how much of the first color to use; the remainder comes from the second.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Blending two brand colours to produce an intermediate for a gradient stop.
Producing a tint or shade by mixing a colour with white or black in CSS.
Comparing how the same mix looks in different colour spaces.
Generating a hover state derived from a base colour rather than hard-coded.
Building a scale between two colours with a configurable ratio.

Frequently Asked Questions

What does CSS color-mix() do?: Blends two colours in a named colour space at a given ratio — `color-mix(in oklab, red 40%, blue)`. The space is not optional detail: the same two colours mixed in sRGB and in OKLab give visibly different midpoints.
Which colour space should I mix in?: OKLab or OKLch for anything that should look right, because they are perceptually uniform — the midpoint lands where the eye expects. sRGB mixing passes through a dull, desaturated middle, which is the classic muddy purple between red and blue.
How do the percentages work?: They are weights, and specifying one is enough — the other is inferred as the remainder. Giving both and having them sum to less than 100% is legal and scales the result's alpha, which is a subtlety that surprises people the first time.
What is it useful for beyond gradients?: Deriving a whole palette from one token. A hover state as `color-mix(in oklab, var(--brand) 85%, black)` stays correct when the brand colour changes, which a hard-coded darker hex does not. It is design tokens with arithmetic.
What about browser support?: Available across current browsers, with the shorter hue interpolation options landing later than the base function. A `@supports (color: color-mix(in oklab, red, blue))` guard with a static fallback is the safe pattern for anything load-bearing.

Common errors and gotchas

Mixing in sRGB and getting a muddy midpoint, where a perceptual space gives a cleaner result.
Omitting a fallback, since `color-mix()` is unsupported in older browsers.
Assuming the ratio is perceptually linear, which depends entirely on the space chosen.
Mixing with transparent and expecting a tint, which changes alpha rather than lightness.
Losing contrast compliance, since a mixed colour may fail a ratio both inputs passed.