The strip is the full A→B mix in the chosen space; the tick marks your current percentage.
Same mix, different spaces
What color-mix() does
color-mix() blends two colors and returns a single color, computed by your browser.
It is perfect for design tokens: define one brand color, then derive hovers, tints and shades by
mixing with white, black or a second hue, all without a build step or preprocessor.
The first argument is the interpolation space, and it matters more than people expect. Mixing
blue and yellow in srgb gives a dull grey-green; the same mix
in oklch stays bright. The four swatches above show your exact mix in several
spaces side by side. For most UI work in oklch is the best default.
Percentages
color-mix(in oklch, A 70%, B 30%) is 70% A. If you give only one percentage the other
is inferred; if they do not add to 100% the result is scaled. This tool always writes both so the
output is unambiguous.
Browser support
color-mix() is supported in every current browser (since late 2022 / 2023).
| Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| color-mix() | 111+ | 111+ | 113+ | 16.2+ |