What is Color Mixer?

Blend two colors together with a ratio slider and see the result in real time. Outputs HEX, RGB, and HSL values you can copy straight into your code or design tool.

Pick two colours, choose a blend mode — RGB, RYB, LAB, LCH, HSL, or OKLCH — and slide the ratio from 0% to 100%. RGB blends straight in screen space, fastest but can yield muddy midpoints; RYB mixes like real paint, so blue and yellow land on green and red and yellow on orange; LAB and LCH blend in perceptual space for smoother gradients across hue families; OKLCH is the newest CSS-aligned perceptual model and usually produces the most natural-looking midpoint. Outputs are HEX, RGB, HSL, CMYK, and the closest named colour, plus a WCAG contrast readout against white and black and a copyable CSS linear-gradient. Quick 25 / 50 / 75 percent presets jump to common blend points without dragging the slider.

How to use

1. Step 1 — Select the first color using the color picker or enter its HEX value.
2. Step 2 — Select the second color, then adjust the mix ratio slider to control the blend (0% = pure first color, 100% = pure second color).
3. Step 3 — View the mixed result with its color codes and copy the values you need.

When to use

• Building hover and disabled states by mixing a brand colour with white or grey.
• Generating intermediate stops for a CSS gradient that doesn't go muddy in the middle.
• Picking a calmer accent by mixing two brand colours at a low ratio for soft callouts.

Result

A designer mixes brand blue (#2196F3) with white (#FFFFFF) at 30% to create a subtle tint (#A1C9F8) for hover states in a UI kit.

FAQ

Which blend mode should I use most of the time?

If your build pipeline supports it, OKLCH gives the most perceptually uniform midpoint and matches the modern CSS color-mix specification. LAB is the next-best fallback and is widely supported in design tools. RGB is fine when the two colours have similar lightness; LCH preserves chroma the best; HSL is mostly useful when you want hue rotation rather than smooth interpolation.

Why does the RGB midpoint sometimes look grey or muddy?

RGB averages numerically, not perceptually. Complementary colours like blue and orange average to a desaturated grey because their R, G, and B channels cancel out. Switch to LAB or LCH and the midpoint stays more saturated. For a result that matches mixing physical paint, use the RYB mode — it blends blue and yellow into green rather than grey.

How is this different from CSS `color-mix()`?

CSS color-mix() ships in modern browsers and works in srgb, lab, oklab, lch, or oklch. This tool gives you HEX output you can paste into older stylesheets, plus a visual slider so you can dial in the ratio rather than guessing the percentage.

Can I mix more than two colours?

Not in a single step, but chain the tool: mix A and B to get C, then mix C with D. For a smoother three-colour blend, mix A→B at 50%, mix B→C at 50%, and treat those two midpoints as gradient stops surrounding the original B.

What does mix ratio 0% versus 100% mean?

0% gives you pure Color 1, 100% gives you pure Color 2, and 50% is the midpoint. The slider goes in 1% steps, so you can tune a tint or shade precisely — useful for UI states where 10% mix feels different from 15%.

Related Tools