What the colour mixer does
Pick two colours and a ratio and the mixer returns the blend — as a hex code, with a preview of the two inputs and the result. It answers practical questions: what colour is halfway between the brand orange and the brand blue for a gradient midpoint, what does a 20% tint of the primary look like over the page background, what hover colour sits between rest and active. It runs in your browser.
How mixing works
Mixed channel = A × (1 − t) + B × t for each of R, G, B; t = mix ratio 0–1
#E85D26 (232, 93, 38) with #2563EB (37, 99, 235) at 50%:
R = 232 × 0.5 + 37 × 0.5 = 134.5 → 135
G = 93 × 0.5 + 99 × 0.5 = 96
B = 38 × 0.5 + 235 × 0.5 = 136.5 → 137
→ #876089This is linear interpolation in sRGB — the same thing CSS gradients do between stops by default. It is simple and predictable, but it has a known weakness: blending two vivid complementary colours passes through a dull grey-brown, because the midpoint of red and blue in RGB has low saturation.
Common uses
- Gradient midpoints — inspect what the middle of a two-colour gradient will look like before committing.
- Overlay colours — a 30% mix of the brand colour into white gives the exact background of a tinted section, matching what
opacity: 0.3over white would produce. - State colours — hover as a 15% mix toward black, disabled as a 60% mix toward the background.
- Data visualisation — intermediate colours for a scale between two endpoints.
- Brand extension — a secondary colour that sits between two existing brand colours so it feels related.
Mix ratios worth knowing
| Ratio (B into A) | Result |
|---|---|
| 10% | A with a hint of B — subtle tint |
| 25% | Noticeably shifted toward B; good hover step |
| 50% | True midpoint |
| 75% | Mostly B |
| A = any colour, B = white, 90% | Very pale tint for backgrounds |
| A = any colour, B = black, 20% | Darker shade for pressed states |
The same thing in CSS
/* Mixing at build or design time (this tool) → paste the hex */
background: #876089;
/* Mixing at runtime, supported in all current browsers */
background: color-mix(in srgb, #E85D26 50%, #2563EB);
/* Perceptually better midpoints */
background: color-mix(in oklch, #E85D26 50%, #2563EB);color-mix() lets you mix custom properties without knowing their values — ideal for theming. Its in srgb result matches this tool exactly; in oklch avoids the grey-brown midpoint problem for vivid pairs.