Color Mixer
Blend any two colors with a ratio slider and get the perceptual in-between — plus an even-steps strip for gradients and chart scales. Mixed in OKLab, so midpoints look right instead of muddy. Free and 100% in your browser.
| Format | Value | Copy |
|---|---|---|
| HEX | #8a939a | |
| RGB | rgb(138, 147, 154) | |
| HSL | hsl(205.5, 7.2%, 57.3%) | |
| OKLCH | oklch(65.87% 0.0144 239.58) |
Even steps from A to B
Paint mixing helper — for painters (beta)
Enter the wall color you need and get an approximate tinting recipe over a standard colorant set. Screen simulation only — always test a real sample.
parts per 100 (by volume, approximate)
Prediction difference: ΔE 0.4
Why mixed colors usually look wrong
Average two colors channel by channel in ordinary sRGB and the midpoint is almost always darker and dirtier than either parent — the infamous RGB mud. The culprit is gamma: sRGB numbers are not linear light, so their arithmetic mean is physically meaningless. And even mixing in linear light, while photometrically correct, often looks too bright to the eye. What designers actually want is the perceptual in-between, and that is what mixing in OKLab delivers: the halfway point between blue and yellow lands on a believable soft gray-green, exactly where your eye expects it.
Light, not paint
Physical paint is a different machine. Pigments mix subtractively — each one absorbs part of the spectrum — which is why blue and yellow paint make green while blue and yellow light make near-white. Simulating real pigment requires absorption models and per-pigment data; no hex-in, hex-out tool does it honestly. For screens, brands and interfaces, perceptual mixing is the right model, and it is what this page does.
Where the steps strip shines
- Gradient stops: browsers interpolate CSS gradients in sRGB by default, which dips through gray between saturated hues. Sampling 5–7 OKLab steps here and using them as explicit stops keeps the gradient alive.
- Chart scales: an even perceptual sequence between two brand colors is a ready-made heat-map or ordered-series palette.
- State ramps: hover/active/pressed variants that genuinely sit between two anchors instead of being ad-hoc darkenings.
Small workflow notes
Both inputs accept anything CSS does — hex, rgb(), hsl(), oklch(), even color names. The ratio slider’s track previews the blend live, every step copies its hex on click, and the mixed result can go straight into My colors to test in the contrast checker or expand in the shades generator. As with every tool on this site, mixing runs 100% in your browser and nothing is uploaded.
Frequently asked questions
How are the two colors mixed?
By linear interpolation in OKLab, a perceptually uniform color space. That gives believable in-between colors — blue and yellow meet in a plausible gray-green instead of the dark mud that naive RGB averaging produces.
Is this the same as mixing real paint?
No. Paint mixing is subtractive and pigment-specific — real blue and yellow paint make green because of how pigments absorb light. This tool mixes color as light/perception, which is what you want for screens and digital design.
What does the ratio slider mean?
The percentage of the second color in the mix: 0% is pure first color, 100% pure second, 50% the perceptual midpoint.
What is the steps strip for?
It divides the whole blend into even steps — instant gradient stops, chart series colors, or heat-map scales between your two endpoint colors. Click any step to copy it.
Does anything leave my browser?
No — mixing runs entirely on your device, and the tool works offline once loaded.