🧪 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). For a ratio t (0 = all colour A, 1 = all colour B), each channel is A + (B − A) × t, computed separately for red, green and blue. Mixing #000000 and #ffffff at t = 0.5 gives (0 + 255 × 0.5) on every channel = rgb(128, 128, 128), a mid-gray. 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.
How do I compute a 25/75 mix by hand?
Use A + (B − A) × t per channel with t = 0.75 for 25% A / 75% B. Mixing red rgb(255,0,0) and blue rgb(0,0,255): R = 255 + (0−255)×0.75 = 64, B = 0 + (255−0)×0.75 = 191, giving rgb(64, 0, 191), a blue-leaning purple.
Local processing?
Yes, instant, offline-capable, nothing transmitted.