Understanding CSS color-mix() for Design Systems

7 March 2026 by

Suraj Barman

The Core Concept

The color-mix() function, introduced in the CSS color module, lets developers blend two colors directly in CSS, specifying exact proportions and an interpolation space. By adjusting percentages, designers can generate consistent light, dark, or opacity variants, keeping palettes within a design system without extra tooling. This approach reduces reliance on editors and ensures color consistency across browsers.

Deep Technical Analysis

The function syntax follows color-mix(in space, color‑1 percentage‑1?, color‑2 percentage‑2?). The interpolation space (e.g., srgb) determines how the color channels are combined. If percentages are omitted, each defaults to 50 %. When only one percentage is provided, the other is inferred to total 100 %. Percentages summing to less than 100 % act as an alpha multiplier, scaling both colors proportionally. These rules enable precise palette adjustments while preserving transparency semantics.

Syntax and Parameters

The required in keyword selects the color‑mixing space. Common spaces include srgb, srgb-linear, and lab. Colors can be any CSS color value: named colors, rgb(), hsl(), or var() references. Percentages are optional but influence the blend ratio they are clamped to the 0‑100 % range.

Percentage Normalization

When the combined percentages exceed 100 %, the browser normalizes them so the total equals 100 %. Conversely, a total below 100 % reduces the resulting alpha channel, effectively making the mix semi‑transparent. For example, color-mix(in srgb, blue 20%, red 20%) yields a purple hue with alpha 0.4, while color-mix(in srgb, blue, red) produces the same hue fully opaque.

Creating Light and Dark Variants

Design systems often need lighter or darker shades of a brand color. Mixing with white lightens, and mixing with black darkens. Example: color-mix(in srgb, var(--brand), white 75%) creates a brand‑lighter shade, whereas color-mix(in srgb, var(--brand), black 75%) produces brand‑darker. Adjust the percentage to control the intensity of the variant.

Using Custom Properties

Storing mixes in CSS custom properties promotes reuse. A typical definition set looks like:

:root {
  --brand: rgb(0 0 255);
  --brand-light: color-mix(in srgb, var(--brand), white);
  --brand-lighter: color-mix(in srgb, var(--brand), white 75%);
  --brand-dark: color-mix(in srgb, var(--brand), black);
  --brand-darker: color-mix(in srgb, var(--brand), black 75%);
}

These variables can be applied to components such as buttons, ensuring all UI elements adhere to the same calculated palette.

Accessibility Considerations

By programmatically generating contrast‑adjusted variants, teams can meet WCAG contrast ratios without manually crafting each shade. Mixing with white or black in calculated steps provides predictable luminance changes, simplifying color‑contrast testing.