A summing color mixer blends two colors by averaging each red, green, and blue channel independently, using the formula result = round(A × (1 − ratio) + B × ratio) with the ratio clamped to [0, 1]. The math runs on plain 8-bit sRGB values — the same approach CSS gradients, design tools, and most UI systems use — which makes it the right model for any on-screen task where you need the exact hex or rgb() of a midpoint between two colors, sampling palette stops, writing gradient CSS, or nudging one brand color toward another. The Color Mixer puts that formula directly in your browser: type or pick Color A and Color B, drag the ratio slider, and read the blended hex and RGB the instant you stop moving. Every recompute happens locally, so no inputs leave the tab and there are no usage limits. Below is the math itself, the exact inputs the parser accepts, a step-by-step walkthrough, and a worked red-and-blue example you can verify by hand.
Pigment mixing is subtractive: red and blue acrylics on a real palette combine into a dark, muddy purple. A summing color mixer treats colors as additive screen-light values instead, which is the same model every website, app, and chart eventually renders on screen.
The One-Line Formula Behind Any Summing Color Mixer
At its core, a summing color mixer treats each color as three numbers between 0 and 255 — the red, green, and blue channels — and computes a weighted average of those three numbers between Color A and Color B. The formula, applied independently to each channel, is:
result = round(A × (1 − ratio) + B × ratio)
The ratio is a single number between 0 and 1 that the slider controls. When ratio = 0 the result is exactly Color A; when ratio = 1 the result is exactly Color B; when ratio = 0.5 each channel is the pure midpoint of the two input channels. Channels are clamped to the 0–255 range and rounded to the nearest integer, which is what makes the answer look like a clean hex value rather than a fractional one.
To see the formula in action, blend pure red #ff0000 and pure blue #0000ff at a 50/50 midpoint:
- Red channel: round(255 × 0.5 + 0 × 0.5) = round(127.5) = 128
- Green channel: round(0 × 0.5 + 0 × 0.5) = 0
- Blue channel: round(0 × 0.5 + 255 × 0.5) = round(127.5) = 128
- Combined: rgb(128, 0, 128) = #800080, a clean magenta
That magenta is exactly what the Color Mixer reports at 50%, and you can verify it from the same formula in a spreadsheet, a CSS gradient between the same two endpoints, or any RGB-aware design tool that performs plain weighted averaging.
What a Digital Summing Mixer Does — and What It Doesn't
The "summing" in summing color mixer refers to additive screen-light math, not pigment math. It is the same family of behavior as CSS gradients and most image editors: light values get averaged in a linear, additive way so that the on-screen blend always lines up with the numbers you type. This is the right model any time you care about what a human eye sees on a monitor, whether that is a website background, a chart series, an app icon, or a UI accent.
It is emphatically not a model of how real paint, ink, dye, or printer ink combine on paper. If you blend red and blue acrylics, the pigments subtract light and you get a dark, muddy purple or brown. A screen-based mixer always gives you the additive midpoint instead — magenta in the example above — because that is the truth the screen tells. Knowing this saves a lot of confusion: when the goal is a digital color you can paste into CSS or hand to a developer, additive is correct; when the goal is to predict a printed swatch or a physical painting, additive will mislead you and you would want a CMYK- or pigment-aware tool instead.
The Color Mixer also does not try to gamma-correct the interpolation. Channels are read straight off the 0–255 sRGB values you typed, which is exactly what CSS, design systems, and visual pickers do. That trade-off is fine for blending, exploring palettes, and nudging one color toward another; it would matter only if you were doing perceptual color science, which is a different problem with different tools.
Inputs the Color Mixer Accepts
You can put a color into either field using any of these formats:
| Format | Example | Notes |
|---|---|---|
| Short hex | #f00 | Three-digit hex expands to full six-digit form |
| Full hex | #3b82f6 | Six-digit hex with the leading hash mark |
| rgb() string | rgb(59, 130, 246) | Comma-separated 8-bit channels |
The parser is forgiving. The leading hash is optional, extra spaces are ignored, and both uppercase and lowercase letters work. If you would rather pick than type, each field has a native color swatch that opens a visual picker. If you need to convert in the other direction — say, an rgb() number back into a hex — the RGB to HEX tool handles that case in one step.
How to Blend Two Colors With the Color Mixer
- Enter your first color in the Color A field as a hex value like #f00 or #3b82f6, an rgb() string, or by clicking the swatch to pick visually.
- Enter your second color in the Color B field the same way — any combination of hex, rgb(), or swatch works.
- Drag the ratio slider to set the blend. 0% is pure A, 100% is pure B, and 50% is the exact midpoint.
- Read the mixed color's hex and rgb() values in the result panel, and watch the gradient bar update to preview every step between the two colors.
- Click Copy to put the result hex on your clipboard, ready to paste into CSS, a design file, or a code editor.
Each move of the slider recomputes the blend instantly, so you can sweep through dozens of ratios to find the one that looks right.
Reading the Result Panel and the Gradient Bar
The result panel does two things at once. It always shows the lowercase six-digit hex (for example #7f3fa0) and the equivalent rgb() string (for example rgb(127, 63, 160)), so you can copy whichever form your target file expects. Next to the values, the ratio label tells you the current split in plain language — "70% A / 30% B" — which makes any result reproducible even after you have moved the slider around.
The gradient bar runs across the width of the result panel and shows eleven evenly spaced blend steps between your two colors, including both endpoints. That gives you an instant visual sanity check: you can scan the strip to see where the visual midpoint actually lands, and you will often find a pleasing intermediate that is not quite at 50%. If 70% of A and 30% of B looks closer to what you wanted than a 50/50, lock the slider there, copy the hex, and you are done.
The gradient is also a quick way to spot whether the two colors you picked play well together. A smooth, even strip means the channels are interpolating cleanly; sudden jumps or a near-black trough in the middle usually means one of your endpoints sits off the palette you had in mind. Nudge that endpoint toward its neighbor and the strip tends to even out within a few slider positions.
When to Reach for a Summing Color Mixer
| Job | Why a summing mixer fits | What to watch |
|---|---|---|
| Midpoint between two brand colors | Returns the exact 50/50 hex without guessing | Result is screen-accurate, not print-accurate |
| Generating gradient stops | Matches the math CSS, Figma, and most chart libraries use | Pick endpoints spaced enough apart to read |
| Sampling a palette from an image | Average two swatches into a usable in-between value | Eyeball the gradient to confirm the step feels even |
| Nudging one color toward another | A 10–30% ratio is a clean way to add a tint or shade | Small ratios are sensitive — recheck the hex after copying |
These are the cases where the additive average matches what the screen will actually render. For print, fabric dye, or any pigment you apply by hand, switch to a CMYK- or paint-aware workflow instead — the math is genuinely different, and the additive model will look wrong against physical samples.
Privacy and Where the Math Runs
Every color the Color Mixer touches stays in your browser tab. The averaging, the slider response, the gradient preview, and the clipboard copy all run locally — no colors, hex values, or rgb() inputs are uploaded to a server, no account or sign-up is required, and there is no daily limit on how often you can use it. That matters when you are working with brand palettes you have not published yet, internal design tokens, or any color scheme where uploading the underlying values to a third-party service would be a problem.
Because nothing leaves the device, the tool also behaves the same on a plane, behind a corporate firewall, or on a borrowed computer — the only network call is loading the page itself. Once it is open, you can blend as many pairs at as many ratios as you want, copy out each hex, and close the tab without a trace.