What is the CSS Color Mix Calculator?
Preview and generate color-mix() CSS values. Blend two colours at any ratio in any colour space and copy the output.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Color Mix Calculator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Pick your two colours
Enter HEX or colour values for both inputs. The live preview shows the blend in real time.
Set the mix ratio
Drag the slider to control the percentage of colour 1. 50% gives an even blend. Adjust to create tints and shades.
Choose a colour space
sRGB is the default. oklch and lch give perceptually uniform blends that avoid muddy midpoints. Copy the color-mix() CSS or the computed hex fallback.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Mix two colours 50/50 in sRGB */
.tint-50 {
color: color-mix(in srgb, #6C2EF5 50%, white);
}
/* 80% primary, 20% black (a shade) */
.shade-80 {
background: color-mix(in srgb, #6C2EF5 80%, black);
}
/* Mix in oklch for perceptually uniform results */
.tint-oklch {
background: color-mix(in oklch, #6C2EF5, white 40%);
}color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. For older browsers, generate a hex fallback using this tool.
Pro tips for better results
oklch blending avoids muddy midpoints
Mixing blue and yellow in sRGB produces a dull grey midpoint. In oklch, the same blend passes through vivid greens - much closer to physical paint mixing.
Generate a hex fallback for older browsers
color-mix() is not supported below Chrome 111 or Firefox 113. Use this tool to compute the blended hex value as a fallback in a @supports block.
Build tint/shade scales with color-mix()
color-mix(in srgb, var(--brand) 90%, white) is a tint at 10% white. Increment from 90% to 10% for a full 9-step tint scale without a preprocessor.
Percentages do not need to add up to 100%
In color-mix(), omitting the second percentage defaults it to 100% minus the first. color-mix(in srgb, blue 30%, red) gives 30% blue and 70% red.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.