Skip to content
Lizely

Color Mixer

Blend any two colors and read the exact hex and RGB of the result — with a live gradient between them.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Enter your first color in the Color A field as a hex value (#f00 or #3b82f6) or an rgb() string, or click the swatch to pick it visually.
  2. 2.Enter your second color in the Color B field the same way.
  3. 3.Drag the ratio slider to set how much of each color goes into the blend — 0% is pure A, 100% is pure B, 50% is the midpoint.
  4. 4.Read the mixed color's hex and RGB values in the result panel, and use the gradient bar to preview every step between the two colors.
  5. 5.Click Copy to put the result hex on your clipboard.

About Color Mixer

The Color Mixer takes two colors and blends them into a single result at whatever ratio you choose, then shows you the exact hex and RGB values so you can use the outcome anywhere. Type a color into either box as a short hex like #f00, a full hex like #3b82f6, or an rgb() string like rgb(59, 130, 246); the tool parses all three formats and tolerates extra spaces, missing hash marks, and upper- or lower-case letters. You can also click the native color swatch beside each field to pick visually. Drag the ratio slider from 0% to 100% to move the blend from pure Color A toward pure Color B, and the result updates instantly.

How the blend works is worth being clear about. This tool mixes colors using simple sRGB linear interpolation: for each of the red, green, and blue channels it computes a weighted average, result = round(A * (1 - ratio) + B * ratio). At a ratio of 0.5 you get the exact midpoint of the two channel values. This is the same math most design tools, CSS gradients, and UI systems use, which makes it ideal for building color scales, finding a tint or shade halfway between two brand colors, sampling steps for a chart palette, or nudging one color slightly toward another.

Be aware of what this is not. sRGB linear interpolation mixes screen light values, not physical pigments. It is not gamma-corrected optical light mixing, and it is emphatically not subtractive paint or ink mixing. That is why mixing pure red (#ff0000) with pure blue (#0000ff) here gives you clean magenta (#800080), whereas physically blending red and blue paint on a palette would give you a muddy dark purple or brown. If you are matching digital colors for websites, apps, icons, charts, or any on-screen design, sRGB interpolation is exactly what you want. If you are trying to predict how real acrylics or printer inks will combine on paper, this tool will not model that, and no honest screen-based blend can.

The gradient bar shows eleven evenly spaced blend steps between your two colors, including both endpoints, so you can see the whole transition at a glance and eyeball where a pleasing intermediate lives. The ratio label always tells you the current split, for example 70% A / 30% B, so results are reproducible. When you find the color you want, the result panel gives you both the lowercase six-digit hex and the rgb() string, and a one-click copy button puts the hex on your clipboard.

Everything happens locally in your browser using plain color arithmetic. No colors, values, or inputs are ever uploaded to a server, there is no sign-up, and there are no usage limits. It is fast, private, and free to use as often as you like, whether you are a designer refining a palette, a developer generating gradient stops, or just curious what two colors make when you meet them in the middle.

Methodology & sources

Per-channel sRGB linear interpolation: for each of R, G, B, result = round(A * (1 - ratio) + B * ratio), with ratio clamped to [0, 1]. Channels are clamped to 0-255 and rounded. This is a direct weighted average of 8-bit sRGB values — additive-style screen-light blending, not gamma-corrected light mixing and not subtractive pigment mixing.

Frequently asked questions

How does the color mixer blend two colors?
It uses simple sRGB linear interpolation. For each red, green, and blue channel it computes a weighted average — result = round(A * (1 - ratio) + B * ratio) — where the ratio comes from the slider. At 50% you get the exact midpoint of the two colors' channel values.
Why does red mixed with blue give magenta instead of purple or brown?
Because this tool mixes screen light values in sRGB, which is additive-style interpolation, not subtractive paint mixing. Blending #ff0000 and #0000ff averages to #800080, a clean magenta. Real red and blue paint would combine subtractively into a dark muddy purple, which a screen-based blend does not model.
What color formats can I enter?
Short hex (#f00), full hex (#3b82f6), and rgb() strings like rgb(59, 130, 246). Input is case-insensitive, extra spaces are ignored, and the leading hash is optional. You can also use the color picker swatch next to each field.
Is my data uploaded anywhere?
No. All the color math runs locally in your browser. Nothing is sent to a server, there is no sign-up, and there are no usage limits.

Related tools

Color Tools guides

View all