What is the difference between the two blends?

The gamma-correct blend converts both colours to linear light before mixing and back to sRGB afterwards, which avoids the muddy mid-tones a naïve sRGB average produces. The sRGB average mixes the raw channel values directly.

Which blend should I use?

For accurate colour blending — especially gradients and lighting — use the gamma-correct (linear-light) result. The simple sRGB average is shown for comparison and matches older tools.

What does the ratio slider do?

It sets how much of each colour goes into the mix. At 50% you get an even blend; slide toward one end and the result leans toward that colour. Both the gamma-correct and sRGB outputs respect the ratio.

Why does a naive average look muddy?

sRGB values are gamma-encoded, not linear light. Averaging them directly darkens and dulls mid-tones. Converting to linear light first, mixing, then converting back gives brighter, more accurate blends — which is what the gamma-correct output does.

Is anything uploaded?

No — all mixing happens in your browser and nothing is sent anywhere.

What is the Color Mixer (Blend Two Colors)?

Mix two hex colours at any ratio with both a gamma-correct (linear-light) blend and a simple sRGB average. Free, instant, and runs entirely in your browser — nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

Color Mixer (Blend Two Colors)

Name: Color Mixer (Blend Two Colors)
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

This tool blends two hex colours at any ratio and shows the result two ways: a gamma-correct blend that mixes in linear light for clean, accurate mid-tones, and a simple sRGB average for comparison with older tools. It is handy for finding a midpoint colour, building gradients, or tinting a brand colour.

How it works

The tool parses each hex colour into RGB channels, then produces two mixes at your chosen ratio t (0–100%):

sRGB average mixes the raw channel values directly: channel = a × (1 − t) + b × t. Fast, but mid-tones can look muddy because sRGB is gamma-encoded.
Gamma-correct first converts each channel to linear light (reversing the sRGB gamma curve), mixes in that space, then converts back to sRGB. This matches how light actually blends and keeps mid-tones bright.

The sRGB gamma correction step is:

linear = ((sRGB / 255 + 0.055) / 1.055)^2.4   for values > 0.04045
linear = (sRGB / 255) / 12.92                  for values ≤ 0.04045

After mixing in linear space, the result is converted back to sRGB with the inverse transform.

Why the difference matters

The muddy-midpoint problem is a known artefact of mixing in gamma-encoded space. sRGB was designed for display, not for arithmetic — the encoding compresses dark tones and stretches light ones, which means the midpoint of two encoded values does not correspond to the perceptual midpoint.

For gradients displayed on screen, the gamma-correct blend looks subjectively brighter and more vibrant at the midpoint, because it preserves the actual luminance of the mixed colour. Design tools like Figma and modern CSS (with color-mix() in a linear-light space) use this approach.

The sRGB average is shown for comparison because many older tools, legacy code, and color pickers on the web use the simple average. Knowing both lets you predict what a given tool will produce and choose deliberately.

Worked examples

Red and blue at 50%:

sRGB average: approximately #800080 — a dark, slightly muddy purple.
Gamma-correct: a noticeably brighter, cleaner purple that looks more like what you might expect from mixing paint colours.

White and black at 50%:

sRGB average: #808080 (128,128,128).
Gamma-correct: a slightly lighter gray, around #bcbcbc, because the linear-light midpoint of 0 and 1 (in linear space) corresponds to a higher sRGB value than 128.

Tinting a brand colour: Mix your primary brand colour with white (for a tint) or with a muted neutral (for a tone). Use the 25%, 50%, and 75% ratios to generate a three-step tint scale, then click each swatch to copy the hex values.

The difference is most visible at the 50% midpoint of two saturated colours. Everything runs in your browser — nothing is uploaded.