I spend a surprising amount of my day somewhere between a design file and a stylesheet, nudging one color toward another until a hover state, a border, or a gradient stop looks right. For years I did the arithmetic in my head or eyeballed it in a picker, which is fine until you need the exact color halfway between a brand blue and a warm neutral and you need it as a hex code you can paste. So I built a color mixer on toolz.dev that blends two colors with a ratio you control, offers the same blend modes an image editor uses, and hands you the result in HEX, RGB, and HSL. This is the guide to it and to what "mixing colors" means on a screen.
TL;DR: A color mixer blends two colors into one. The Toolz color mixer interpolates two colors with an adjustable ratio, supports the W3C separable blend modes (multiply, screen, overlay, darken, lighten, difference, average), builds a gradient of intermediate steps between the colors, and outputs every result as HEX, RGB, and HSL. It accepts hex, rgb(), hsl(), and CSS color names, and it runs entirely client-side.
How do you mix two colors on a screen?
The plain answer is a weighted average of the two colors' red, green, and blue channels. To mix red (255, 0, 0) and blue (0, 0, 255) in equal parts, you average each channel: red becomes (255+0)/2 = 128, green stays 0, blue becomes (0+255)/2 = 128, giving (128, 0, 128), which is the hex #800080, a solid purple. Shift the weight toward one side and you slide along the line between the two colors. That is exactly what the ratio slider does: at 0 percent you keep the first color, at 100 percent you land on the second, and 50 percent is the even split.
This is the same interpolation a two-stop CSS gradient uses, which is why the midpoint of linear-gradient(red, blue) is that purple. The mixer makes the relationship explicit by also drawing the gradient between your two colors as a strip of swatches, each of which you can copy as an intermediate stop. If you have ever wanted "three colors evenly spaced between these two," the gradient strip is the fastest way to get them.
One honest caveat, because it surprises people: averaging RGB channels is not how pigments mix. On a screen, colors are light and combine additively; in a paint set, they are pigment and combine subtractively. Mixing red and green light trends toward a dull olive rather than the vivid yellow you would get from paint, because you are averaging light values, not blending pigment. This is not a bug in the tool, it is the nature of sRGB, and the fix when you want a livelier result is to mix hues that sit closer together on the wheel. The color converter is handy alongside the mixer when you want to see the same color expressed across formats while you reason about hue.
What is the difference between Mix and the blend modes?
Mix is the weighted average described above: it always lands somewhere on the straight line between the two colors. The blend modes are something else entirely. They are the layer blend operations from image editors, standardised for the web in the W3C Compositing and Blending Level 1 specification, and each one combines the channels with a different formula rather than a simple average.
| Mode | Per-channel formula (values 0 to 1) | Effect |
|---|---|---|
| Mix | b (weighted by ratio) |
Weighted average, lands between the two colors |
| Multiply | a x b |
Always darker; white leaves a color unchanged, black forces black |
| Screen | a + b - a x b |
Always lighter; the inverse of multiply |
| Overlay | multiply or screen by base | Increases contrast |
| Darken | min(a, b) |
Keeps the darker channel |
| Lighten | max(a, b) |
Keeps the lighter channel |
| Difference | abs(a - b) |
Channel distance; identical colors give black |
| Average | (a + b) / 2 |
The unweighted mean of both |
The intuition worth carrying: multiply always darkens because multiplying two fractions gives a smaller fraction, so red times blue is black (each color is missing the channel the other has). Screen always lightens because it is multiply applied to the inverted values. Difference gives you the channel-by-channel distance, which is why mixing a color with itself under difference produces pure black. In the mixer, the ratio slider then behaves like layer opacity: it fades the blended result in over the first color, so you can dial the effect from subtle to full.
What does the ratio slider control?
The ratio sets how strongly the second color, or the blended result of the chosen mode, is applied over the first color. Think of it as opacity on the top layer. At 0 percent, the top layer is invisible and you see the first color untouched. At 100 percent, the top layer is fully opaque and you get the complete blend for that mode. At 50 percent, you get an even split. For plain Mix, this reduces to the familiar weighted average; for a mode like Multiply, it lets you apply a gentle darkening rather than the full effect.
That unified model is deliberate, because it means one slider does the same conceptual job in every mode. In practice I use low ratios to nudge a color slightly toward another (a hover state that is "the button, but 15 percent toward black") and high ratios when I want the full blend. The gradient generator picks up where the mixer leaves off when you want to turn a pair of mixed colors into a full multi-stop CSS gradient.
How do I get the exact color halfway between two colors?
Set the mode to Mix and the ratio to 50, and the result is the exact midpoint. You can also read it straight off the gradient strip: the centre swatch is the halfway color. When you need several evenly spaced colors between two endpoints, raise the gradient step count and copy the swatches at the positions you want. This is the everyday task the mixer was built for, whether you are generating tints for a palette, spacing out data-visualisation colors, or finding the neutral that sits between two brand colors.
For building whole families of a single color rather than blending two, the color shades generator is the better fit, since it mixes one color toward white, black, and gray to produce tints, shades, and tones. And when you are choosing colors for text or UI, run the result through the color picker and a contrast check, because a color that mixes beautifully can still fail a readability threshold. The broader workflow, from picking to checking to shipping, is laid out in the web developer toolkit guide.
Why do my mixed colors sometimes look muddy or dark?
Two things cause this, and both are about the color space rather than the tool. The first is the additive-versus-subtractive mismatch already mentioned: averaging distant hues in RGB drifts toward gray, so opposite colors on the wheel mix to something dull. The second is that sRGB values are gamma-encoded, not linear light. A true physical average of light would first convert to linear space, average, then convert back, which keeps midpoints brighter. Most tools, CSS gradients, and image editors interpolate directly in gamma-encoded sRGB because it is fast, predictable, and matches what designers expect from a gradient, so this mixer does the same. If you want a brighter blend, mix closer hues, lean on the Screen mode, or reach for a perceptually uniform space like OKLCH in your final CSS. The data privacy online tools guide explains why, muddy midpoints or not, doing this math in your browser instead of on a server is the right default for design work you would rather keep local.
Frequently asked questions
How do you mix two colors?
To mix two colors you average their red, green, and blue channels, weighted by how much of each color you want. A 50/50 mix of red (255, 0, 0) and blue (0, 0, 255) averages to (128, 0, 128), which is purple. This tool does that interpolation for you and lets you shift the weight with the ratio slider, so you can land anywhere between the two colors instead of only the exact midpoint.
What is the difference between Mix and Multiply?
Mix is a weighted average that lands between the two colors, so mixing red and blue gives purple. Multiply combines them the way overlapping ink or light filters do, multiplying the channel values, so it always produces a color as dark as or darker than both inputs. Multiplying red and blue gives black, because each color is missing the channel the other has. Multiply is a blend mode from image editing, not a simple average.
Why does mixing two bright colors sometimes give a muddy result?
Because averaging RGB channels moves the result toward gray whenever the two colors sit far apart on the color wheel. Red and green average to a dull olive-brown rather than a vivid yellow, since screen colors mix as light while the vivid yellow you might expect comes from mixing pigments. For a livelier blend, mix colors that are closer in hue, or try the Screen mode, which keeps results brighter.
Can I mix colors in HSL instead of RGB?
This mixer interpolates in RGB, which is what CSS gradients and image editors do by default, and it reports the result in HSL as well. Mixing in RGB is predictable and matches how a two-stop CSS gradient renders. Interpolating hue in HSL can travel the long way around the color wheel and produce unexpected in-between hues, which is why RGB interpolation is the safer default for a general-purpose blend.
What does the ratio slider change?
The ratio sets how strongly the second color, or the blended result, is applied over the first. At 0 percent you get the first color unchanged, at 100 percent you get the full second color or full blend for the chosen mode, and at 50 percent you get an even split. For the blend modes it behaves like layer opacity in an image editor, fading the blended color in over the base.
How do I get the color halfway between two colors?
Set the mode to Mix and the ratio to 50 percent, and the result is the exact midpoint. You can also read it off the gradient strip, where the middle swatch is the halfway color. For finer control, add more steps to the gradient and copy whichever intermediate swatch matches the position you need between the two colors.
What are blend modes like Screen and Overlay used for?
They are the layer blend modes from image editors, defined for the web in the W3C Compositing and Blending specification. Screen lightens and is used for glows and highlights, Multiply darkens and is used for shadows and tints, and Overlay increases contrast by combining the two. Previewing them in a mixer lets you predict how two colored layers will combine before you apply it in CSS or a design tool.
What color formats does the mixer accept?
The mixer accepts hex codes (three, six, or eight digits), rgb() and rgba() values, hsl() and hsla() values, and common CSS color names like coral or rebeccapurple. Each input has a native color swatch you can click to pick visually, and every result is shown in HEX, RGB, and HSL so you can copy whichever format your stylesheet needs.
Is the color mixer free and private?
Yes. The color mixer is completely free with no signup, no watermarks, and no usage limits, and every calculation happens in your browser. The colors you enter are never uploaded, so nothing you mix leaves your device, and because the math runs locally the tool keeps working if you lose your connection after the page has loaded.
