Tools Blog

Color Mixer

Scan to open this page

Mix two colors two ways at once — plain RGB averaging, and OKLab, the color space CSS's own color-mix() actually defaults to — shown side by side with each result's chroma, so you can see exactly why RGB averaging looks muddier (mixing red and green in RGB gives a chroma of 0.126, about half of either source color).

How it works

  1. Pick two colors and a mix ratio
  2. An RGB-average result and an OKLab result render side by side, each labeled with its chroma (how vivid it is)
  3. Click either swatch to copy its hex value

Frequently asked questions

Why does the RGB average look muddier?

Mixing red and green with plain RGB averaging gives #808000, with an OKLCH chroma of about 0.126 — roughly half the vividness of either source color (0.258 and 0.295). RGB isn't a perceptually uniform space, so its arithmetic midpoint looks duller than either endpoint.

What does CSS's own color-mix() function actually use?

OKLab — when you don't specify a color space, that's the default per the CSS Color 4 spec, supported in all major browsers since 2023. This tool's OKLab result matches what color-mix(in oklab, ...) would render.

Why keep the RGB average option at all?

For comparison against existing tools, code, or design software that mixes colors the simple way.

Is any color data sent to a server?

No — every calculation runs entirely in your browser.

#ColorMixer#MixTwoColorsOnline#Color-mixCssOklabDefault#RgbAverageColorMuddy#BlendColorsHex

Related tools

Color Shade Generator Color Shade Generator HEX to RGBA Converter HEX to RGBA Converter Color Unmixer Color Unmixer

From the blog

Mix red and green the way most color mixer tools do, and you lose about half the color's vividness
color-css

Mix red and green the way most color mixer tools do, and you lose about half the color's vividness

We checked one popular color mixer's three blend modes. None of them match what CSS's own color-mix() function actually defaults to — and the difference isn't subtle once you measure it.

2026-08-30

Update history

  • 2026-08-30 Added: a link to the new Color Unmixer cube (the reverse operation — pick a target color, get candidate colors that mix to it).
  • 2026-08-30 Added: a cover image (two merging drop shapes with the overlap zone split into a duller half and a richer half, plus a small measuring-gauge icon) — used as the card thumbnail, social share image, and blog title image.
  • 2026-08-30 Launched: live color mixer (no button) — RGB-average and OKLab mixing shown side by side with chroma readouts, matching CSS color-mix()'s actual OKLab default (verified directly: RGB-averaged red+green loses about half its chroma vs either source color). Entirely client-side.