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.

Choosing the Right Approach to Mix Two HEX Colors

Choosing the right approach to mix two HEX colors starts with one decision: are you blending light or pigment? For every digital use case — websites, apps, icons, dashboards, CSS gradients — the correct method is sRGB linear interpolation, computed as result = round(A * (1 - ratio) + B * ratio) on each of the red, green, and blue channels. That is the same math browsers, design tools, and most UI systems use, which is why it returns colors that match what your screen actually shows. If you instead need to predict how two real paints will combine on paper, no screen tool can give you an honest answer, because physical pigments combine subtractively, not additively. Most readers searching for a way to mix HEX colors are working on-screen, so the right starting point is the Color Mixer, which performs sRGB linear interpolation between any two colors you give it, lets you pick the blend ratio with a slider, and returns the exact hex and rgb() values of the result. The rest of this article walks through which approach fits which goal, how to enter your colors, and how to read the result.

how do i choose the right approach to use mix two hex colors — Choosing the Right Approach to Mix Two HEX Colors

Three Blending Approaches and When to Use Each

There are three mathematically distinct ways to "mix" two colors, and the one you should pick depends entirely on what you are trying to represent. Picking the wrong one gives you a result that is technically computable but visibly wrong for your medium.

sRGB linear interpolation treats each color as three independent 8-bit channels (red, green, blue) and takes a weighted average of those channels. Channels are clamped to 0–255 and rounded. Because screen pixels emit light additively, this matches how a monitor physically renders any blend between two pixel colors. It is the right choice for web UI, app design, charts, CSS gradients, icon sets, and any other on-screen palette work.

Gamma-corrected optical mixing is a step closer to physical reality. It converts each sRGB channel into linear light, weights and averages the linear values, then converts back to sRGB. The result is closer to what your eye perceives when two colored lights actually overlap, and it is common in HDR, PBR rendering, and high-end compositing pipelines. For typical UI work it is overkill and tends to make mid-tones appear slightly darker than sRGB interpolation.

Subtractive pigment mixing models what happens when you combine real inks or paints. It is governed by the Kubelka–Munk equations or simplified CMYK approximations, not by averaging channels. This is the only branch that can predict how two print inks will combine on coated paper, and it has nothing to do with the way a browser blends two hex values.

Approach	Best for	Example result for #ff0000 + #0000ff at 50%
sRGB linear interpolation	Web, app, icon, chart, CSS gradient	Clean magenta, #800080
Gamma-corrected optical mixing	HDR, PBR rendering, light simulation	Slightly darker magenta in linear-light space
Subtractive pigment mixing	Print proofing, paint mixing on paper	Muddy dark purple or brown

Unless you are doing HDR compositing or print proofing, sRGB linear interpolation is the approach you want, and that is exactly what the Color Mixer implements.

Match the Approach to Your Output Goal

Choosing the right approach becomes easier when you start from the medium you are designing for, not from the colors you happen to have on hand.

On-screen design — websites, apps, dashboards, icons, charts. Use sRGB interpolation. CSS, browser rendering engines, and most design tools do exactly this, so the numbers you produce will land on screen the way your swatches suggest.
Brand palette scales — finding the midpoint between two brand colors. sRGB interpolation at 50% gives you the geometric center of the two colors in channel space, which is the convention most style guides use for tints and shades.
Gradient stops for a CSS or SVG gradient. sRGB interpolation at multiple ratios (for example 0%, 25%, 50%, 75%, 100%) gives you reproducible stops that any browser will render identically.
Predicting physical paint or ink mixing. Switch to a CMYK-aware or Kubelka–Munk workflow. Screen-based tools, including the Color Mixer, will not model this honestly. The approximate conversion of screen RGB to print percentages is a separate problem handled by the RGB to CMYK Converter.
HDR or PBR light simulation. Use a gamma-corrected pipeline, not a screen-light blend.

If your goal is anything on a screen, sRGB interpolation is both the simplest and the most faithful choice.

Pick the Right Input Format

The way you write a hex color does not change what it represents — #f00, #FF0000, and rgb(255, 0, 0) all describe pure red. The Color Mixer accepts all three, so you can paste the format you already have on hand without rewriting anything.

Short hex — three digits, where each digit is expanded to its full pair. #f00 means #ff0000, and #0af means #00aaff.
Full hex — six digits with a leading hash, like #3b82f6. Lowercase or uppercase both work, and the leading hash is optional.
rgb() string — CSS-style function with three integer channels, like rgb(59, 130, 246). Extra spaces and a missing leading hash are tolerated.

You can also click the swatch next to either field to pick a color visually with the native browser color picker. If you only have a CSS named color or a screenshot, convert to hex or RGB first using the HEX to RGB Converter or the RGB to HEX tool, then paste into the Color Mixer.

How to Mix Two HEX Colors

Enter your first color in the Color A field as a hex value (for example #f00 or #3b82f6) or as an rgb() string, or click the swatch to pick it visually.
Enter your second color in the Color B field the same way — short hex, full hex, or rgb() string all work.
Drag the ratio slider to set how much of each color goes into the blend: 0% is pure Color A, 100% is pure Color B, and 50% is the channel-by-channel midpoint.
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.
Click Copy to put the result hex on your clipboard so you can paste it into CSS, Figma, or any design file.

The full walkthrough of those five steps, including how the ratio slider behaves at non-midpoint values, is covered in detail in Color Mixer: Use the Ratio Slider for Precise Blends.

Reading the Result: Hex, RGB, and the Gradient Bar

Once the tool has computed your blend, three things on the screen help you decide whether to keep it:

The result hex. A lowercase six-digit hex ready to paste into CSS, design tokens, or code. This is the canonical value you will reuse.
The result rgb() string. The same color expressed as three integer channels, for any tool that prefers rgb() syntax.
The gradient bar. Eleven evenly spaced blend steps between your two endpoints, including both. You can scan it to spot a slightly warmer or cooler intermediate that is more pleasing than the precise midpoint.

The ratio label always states the current split, for instance "70% A / 30% B", so a result is reproducible — if you find a blend you like, you can return to it by setting the slider to the same value. The result panel and copy behavior are documented more thoroughly in How to Check the Result After Mixing Two HEX Colors.

A Quick Worked Example

To make the formula concrete, blend #ff0000 (pure red) and #0000ff (pure blue) at 50%.

Red channel: round(255 * (1 - 0.5) + 0 * 0.5) = round(127.5) = 128 → 0x80
Green channel: round(0 * (1 - 0.5) + 0 * 0.5) = 0 → 0x00
Blue channel: round(0 * (1 - 0.5) + 255 * 0.5) = round(127.5) = 128 → 0x80
Result: #800080, a clean magenta.

Drag the Color Mixer slider to 50% and enter those same two colors to confirm. Notice that this result is a pure additive blend — physical red and blue paints would combine into a muddy dark purple on a palette, which is exactly the kind of mismatch that signals you have picked the wrong approach for a print project.

Limits That Change Your Approach

A few boundaries of sRGB linear interpolation matter when you choose this method:

Screen light only. The result is what your monitor will display, not what physical pigments will produce. For paint, ink, or fabric, look elsewhere.
Not gamma-corrected. The blend averages 8-bit sRGB channel values, not linear-light values. The result is slightly brighter than a true optical midpoint, which matches what most CSS gradients and design tools output.
Browser-only. Every calculation runs locally in your browser. Nothing is uploaded, there is no sign-up, and there are no usage limits, which makes it practical to iterate freely while designing.

If any of those limits disqualify sRGB interpolation for your project, you are not in the on-screen color-mixing problem any more — you are in print proofing or HDR compositing, and a different tool or pipeline is the right answer.