CSS color-mix(): Weights, Spaces and Tested Results
Mix a tint or state color with explicit interpolation and check the final result rather than assuming the mix is accessible.
Updated : Rebuilt around explicit design choices, reproducible examples and documented limitations; retained the existing URL.
color-mix() computes a mixture of two colors in a named color space. It is useful when a tint or surface should follow a base variable. The operation does not choose a text partner or evaluate contrast for you.
Start with a reproducible sRGB mixture
.tint {
background: #FF8080;
background: color-mix(in srgb, #FF0000 50%, #FFFFFF);
}In this example the red channel stays at 255 and the green and blue channels lie halfway between 0 and 255. The eight-bit fallback rounds them to 128. A browser can retain fractional precision internally, so the fallback is a quantized representation, not an assertion that every serialized value is identical.
Keep the weights clear
When one percentage is omitted, it complements the supplied weight. Percentages can also be normalized when their sum differs from 100%, and a sum below 100% affects alpha. For an introductory opaque tint, use explicit weights summing to 100% so the intended mixture is easy to review.
Choose the interpolation space deliberately
.srgb-mix { color: color-mix(in srgb, red 50%, blue 50%); }
.oklab-mix { color: color-mix(in oklab, red 50%, blue 50%); }The different intermediate colors reflect different interpolation coordinates. Use the browser to view the two examples side by side. If you need an exact 8-bit handoff, record the computed or intentionally chosen sRGB fallback rather than guessing it from the input hue names.
Retest a derived state
A reproducible text and background example.
Same pair, larger text.
##FFFFFF / ##FF8080
White text on the quantized red/white tint.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##000000 / ##FF8080
Black text on the same tint.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixThese results demonstrate why a tint cannot inherit its base color's text decision without checking. A hover mix may also change the contrast of a border or focus cue against adjacent surfaces.
Open the tint pair in the checker and keep the result with the component CSS. Then test the dynamic mixture in the browser when the base custom property changes.