Color Mixer

Pick two colors and slide the mix amount to interpolate between them. At 0% you see Color A unchanged; at 100% you see Color B; everywhere in between is a blend. The result updates instantly and is shown as hex, RGB, and HSL — copy any of them with the buttons or grab a ready-made set of CSS variables from the code block below.

The mixing space toggle controls how the blend is computed. RGB mixing is a straight linear interpolation of the red, green, and blue channels — predictable, and what most CSS engines and graphics tools do under the hood. It can produce muddy mid-points when you mix complementary colors (mixing pure red and pure green in RGB gives you a dull olive) but it always lands on a real, predictable hex.

HSL mixing interpolates hue, saturation, and lightness separately. Hue takes the shortest path around the color wheel, so a warm-to-cool blend stays vivid the whole way through instead of dipping into grey. HSL is useful when you want a smooth rainbow-style sweep or when you want to preserve saturation across the gradient. The trade-off is that some hue paths cross unrelated colors — try both spaces and pick the one that looks right.

The mixer doubles as a quick way to dial in tints (mix toward white), shades (mix toward black), and tones (mix toward grey). Set Color B to#ffffffto generate a tint at any strength, or to#000000for a shade. This is the same math design systems use to build a 50/100/200/…/900 scale from a single brand color. Everything runs in your browser — no colors are ever sent to a server.