🧪 Color Mixer
Mix two colors at any ratio — 50/50 or anywhere between — and read the resulting HEX instantly.
Full blend scale A → B (click to copy)
How the color mixer works
Mixing interpolates each RGB channel between the two colors at your chosen ratio — the same math CSS uses in color-mix(in srgb, A, B). The slider sweeps the full scale, so intermediate swatches double as a mini-palette between any two brand colors.
Screen mixing is light math, not paint: blue + yellow gives gray on screen (channels average out), not the green your paintbox promised — pigment mixing is subtractive, RGB is additive. For usable in-between colors, mix neighbors (blue + cyan) rather than complements.
Frequently asked questions
Why does blue + yellow make gray here, not green?
Screens mix light (additive RGB): blue rgb(0,0,255) + yellow rgb(255,255,0) averages to gray rgb(128,128,128). Paint mixes pigments (subtractive), where blue + yellow yields green. Both are correct in their medium.
What ratio should I use?
50/50 for a true midpoint; push toward one end for a tinted variant of it. The scale strip shows every intermediate step to pick from.
Is this the same as CSS color-mix()?
Equivalent to color-mix(in srgb, …) — linear sRGB-channel interpolation. (CSS can also mix in other color spaces, which shift results slightly.)
How do I make a tone (color + gray)?
Mix your color with a mid-gray like #808080 — the classical definition of toning down a color without shifting its hue.
Local processing?
Yes — instant, offline-capable, nothing transmitted.