Is the color mixer free?
Yes. It is completely free to use, with no signup, no account, and no paywall.
Do I need to install anything?
No. It runs in any modern browser on desktop or mobile, with nothing to download and nothing to configure.
Does it stay local?
Yes. All the color math runs entirely in your browser, and nothing is sent to a server.
Why does blue plus yellow give grey instead of green?
Because this is additive colour mixing, the way light behaves, not subtractive mixing, the way pigment behaves. Blue is roughly rgb(0, 0, 255) and yellow is rgb(255, 255, 0), and averaging them channel by channel gives rgb(128, 128, 128), which is grey. Paint makes green from blue and yellow because each pigment absorbs part of the spectrum and what survives both is the green band. Screens emit light rather than absorbing it, so they follow the other rule, and every colour mixer that works on RGB values will give you grey.
Why does the midpoint of my mix look muddy?
Because the blend runs in gamma-encoded sRGB. The numbers in a hex colour are not proportional to physical light, so averaging them produces a result that is darker and less saturated than a physically correct mix. The fix is to interpolate in a space designed for it. CSS's color-mix(in oklab, ...) does exactly this, and the difference on a saturated pair is immediately visible: the perceptual mix stays vivid where the sRGB one goes grey.
Can I do this in CSS directly?
Yes, and you probably should. color-mix() has been supported in every major browser since 2023, and it takes a colour space as its first argument, so color-mix(in oklab, var(--brand) 60%, white) computes the blend at render time in a perceptual space. That keeps the two source colours as the single source of truth, so changing your brand colour updates every derived shade automatically, rather than leaving you with a set of precomputed hex values that no longer match.
What is the difference between a tint, a shade, and a tone?
A tint is the colour mixed with white, a shade is the colour mixed with black, and a tone is the colour mixed with grey. All three are what this mixer produces if you choose the second colour accordingly. The thing to be aware of is that all three desaturate as they move away from the base in sRGB, so a tint tends toward chalky and a shade tends toward muddy, which is why perceptual colour spaces are worth the trouble for a real palette.
Does the mixing happen in my browser?
Yes. It is arithmetic on six numbers, performed locally, with nothing transmitted.