Color Mixer
Mix two colors together and preview the blended result as HEX, RGB and HSL. Adjust the mix ratio with a slider. Free, browser-based, no uploads.
🎨 Design & Color Tools
Free
Browser-based
Mix ratio — Color A 50% Color B
HEX
#000000
RGB
rgb(0,0,0)
HSL
hsl(0,0%,0%)
How Color Mixing Works
This tool blends two colors using linear RGB interpolation — each channel (Red, Green, Blue) is mixed independently according to the ratio. A 50% mix gives the midpoint of each channel. This is how most design tools and CSS color-mix() work, and it produces perceptually consistent midtones for most color pairs.
Mix Ratio Guide
| Slider position | Result |
|---|---|
| 0% (full left) | 100% Color A |
| 25% | 75% A + 25% B |
| 50% (center) | Equal blend of A and B |
| 75% | 25% A + 75% B |
| 100% (full right) | 100% Color B |
Tips
When mixing complementary colors (opposite on the color wheel) you'll often get a grey or brown at 50%. To get a more vibrant mid-blend, try adjusting the ratio to 30% or 70% and see which direction gives you a more saturated result.