Online Color Mixer
Blend 2–5 colors with exact ratios and get the result in HEX, RGB, HSL and CMYK — plus a
copy-ready CSS color-mix() snippet. Mixing happens perceptually (Oklab), so
blends look like real paint, not muddy screen math.
- HEX
- #b26f98
- RGB
- rgb(178, 111, 152)
- HSL
- hsl(323, 30%, 57%)
- CMYK
- cmyk(0%, 38%, 15%, 30%)
color-mix(in oklab, #ff0000 50%, #3b82f6) How this color mixer works
Most online mixers average the raw red, green and blue channel values. That is how a screen mixes light — but it is not how you see color. A 50/50 RGB blend of black and white lands on the sRGB midpoint (128), which still looks closer to black than to white, and saturated pairs can turn muddy brown.
This mixer defaults to Oklab, a perceptual color space that matches how human vision weighs lightness and hue. Blends step evenly, midpoints stay vivid, and the result matches what you would expect from mixing paint or ink. The Average (RGB) toggle shows the naive math for comparison — try both on black + white or red + blue.
Each color has a ratio slider (0–10). Ratios are relative: 5 : 5 is the same as 1 : 1, and 9 : 1 pulls the result strongly toward the first color. The gradient strip under the result previews the full blend path between your colors.
Popular mixes
- What red and blue make — the classic violet
- Blue plus yellow — and why screens say green
- Red and green mixed — light vs. paint
- Black and white — grays, perceptually spaced
See the full list of color mixes or convert a code in the color converter.
Frequently asked questions
What is the difference between Perceptual (Oklab) and Average (RGB)?
Average (RGB) adds the red, green and blue channels of your colors mathematically — the same way screens dim two lights together. Perceptual (Oklab) blends colors in a color space designed to match human vision, so midpoints look like evenly stepped shades, the way paint or ink behaves. Try black + white in both modes to see the difference.
How many colors can I mix at once?
Between 2 and 5. Add a color with “+ Add color”, remove one with the ✕ button, and set how much of each color contributes with the ratio slider (0–10). The result updates instantly.
Can I share or save my mix?
Yes. This page writes your colors and ratios into the URL as you work (look at the address bar). Copy the full URL and anyone who opens it sees your exact mix — no account needed.
What is the color-mix() snippet for?
It is a native CSS function that reproduces your mix in any stylesheet. Copy the snippet from the result panel and paste it into your CSS — modern browsers compute the same blend directly, no preprocessor required.