How a Colour Mixer Calculator Works

What colour mixing on a screen actually means

On a monitor, a colour is three numbers — how much red, how much green, how much blue — each on a 0 to 255 scale. White is (255, 255, 255), black is (0, 0, 0), pure red is (255, 0, 0). "Mixing" two colours on a screen means producing a new triple that sits somewhere between the two originals. The colour mixer calculator takes two hex codes and a blend percentage and returns that in-between triple as hex, RGB and HSL. The maths is a per-channel weighted average — one of the simplest operations in graphics — but the result depends on which colour space you do the averaging in, and that choice matters more than most people expect.

There are at least four mixing models worth knowing about. sRGB averaging (what the calculator does, and what the browser does when you call CSS color-mix(in srgb, …)) mixes the gamma-encoded values directly. Linear-light mixing converts each colour out of the sRGB gamma curve, averages, then converts back — physically accurate but visually slightly different. Perceptual mixing in Oklab or OKLCH interpolates along a path the eye reads as evenly spaced, which is what makes modern design-system gradients look smooth. And subtractive (paint, ink, CMYK) mixing follows a completely different rule because pigments absorb light rather than emit it. sRGB is the right choice for most web and UI work because it matches what the browser ships. It is the wrong choice for photo-realistic light simulation or for printing.

The formula the calculator uses

For each of the three channels, the mixed value is a linear interpolation between the two inputs:

mixed_channel = (1 − t) × channel1 + t × channel2

Where t is the share of colour 2 in the mix, between 0 and 1. A blend slider value of 0 means t = 0 and the result equals colour 1. A blend of 100 means t = 1 and the result equals colour 2. A blend of 50 means t = 0.5 and each channel is the plain average of the two inputs. The same formula runs three times — once for red, once for green, once for blue — and the three results are reassembled into a single hex code. That is the entire computation. There is no clever rounding, no perceptual warping, no colour-space conversion. It is the same operation a five-year-old would do with three pots of beads and a pair of scales.

The reason it produces a believable midpoint anyway is that sRGB is gamma-encoded — the stored values are not proportional to emitted light, they follow a roughly 2.2-power curve that compresses the dark end of the scale. Averaging the encoded values tends to give midpoints that look reasonable to the eye, because the encoding already baked perception into the numbers. It is not the most accurate model, but it is the fastest and the one the web platform standardised on, which is why the colour mixer calculator uses it.

Worked example: red, blue and the path to purple

Take pure red (#ff0000) and pure blue (#0000ff) and mix them 50/50. In RGB, red is (255, 0, 0) and blue is (0, 0, 255). With t = 0.5, each mixed channel is the simple average of the two inputs:

• Red channel: (1 − 0.5) × 255 + 0.5 × 0 = 127.5 → rounds to 128.
• Green channel: (1 − 0.5) × 0 + 0.5 × 0 = 0.
• Blue channel: (1 − 0.5) × 0 + 0.5 × 255 = 127.5 → rounds to 128.

The mixed colour is (128, 0, 128), which is hex #800080 — classic purple, the CSS named colour purple and exactly what every browser shows when you ask for color-mix(in srgb, red 50%, blue 50%). Now push the blend share to 75% (so t = 0.75, three parts blue to one part red). Red channel: 0.25 × 255 = 63.75 → 64. Blue channel: 0.75 × 255 = 191.25 → 191. Green stays 0. The result is (64, 0, 191), hex #4000bf, a deep violet that leans noticeably toward blue. Drop the slider back to 25% and you get (191, 0, 64), hex #bf0040 — the same path, the same distance, but leaning toward red.

Try the same maths with yellow and blue and the result is the part that surprises people. Yellow is (255, 255, 0), blue is (0, 0, 255), and a 50/50 mix is (127.5, 127.5, 127.5) — a neutral grey. Not green. On a screen, yellow is not a pigment that absorbs blue — it is red light plus green light, and adding more blue to red+green just gets you closer to white. The colour mixer calculator confirms this in one click; it is one of the easiest ways to see in seconds that screen colour and paint colour are not the same system.

The four mixing models, side by side

sRGB averaging

Average each gamma-encoded channel directly. Fast, deterministic, lossless to the web pipeline. Used by CSS color-mix(in srgb), by most CSS gradients before the OKLCH era, and by every design tool that ships an "average two colours" feature without specifying a space. The midpoint is slightly darker than linear-light mixing would produce, because gamma encoding compresses the dark end and the average lands inside that compressed region. This is the model the calculator implements.

Linear-light mixing

Convert each sRGB value to linear light (apply the inverse gamma curve), average the linear values, then convert back. Physically correct for additive light — if a 50W red lamp and a 50W blue lamp shine on the same wall, the wall sees the linear-light sum. Used inside 3D rendering engines, HDR compositing pipelines and tone-mapping algorithms. Midpoints look brighter and more saturated than sRGB averaging, sometimes uncomfortably so for UI work where the eye expects the darker-but-correct sRGB midpoint.

Perceptual (Oklab / OKLCH) mixing

Convert each colour to a perceptually uniform space (Oklab, OKLCH, Lab, Lch), interpolate, then convert back. Designed so that equal numerical steps look like equal visual steps — vital for gradients, colour scales and accessible palette generation. CSS color-mix(in oklch, …) uses this approach. The midpoint between red and blue in OKLCH is not purple; it is a desaturated mauve, because OKLCH takes the shortest perceptual path rather than the additive one. Right for visual design systems, wrong for matching existing CSS values.

Subtractive (paint, CMYK, Kubelka-Munk) mixing

Models pigments and inks, which absorb wavelengths rather than emitting them. Yellow paint absorbs blue light and reflects red+green; blue paint absorbs red and reflects blue+green; the only wavelength both pigments still reflect is green, which is why yellow + blue makes green on paper. Kubelka-Munk is the standard physical model; CMYK is the printing-industry approximation. Neither maps cleanly onto RGB values, and the colour mixer calculator does not try — for paint or pigment work, a dedicated mixer like Mixbox or a CMYK ink simulator is the correct tool.

How to use the calculator for common design tasks

• Tints (mix with white). Set colour 1 to your base colour, colour 2 to #ffffff, and use a 10-30% blend for a gentle tint, 40-60% for a pastel. Tints share the hue of the base and look like the same colour seen in brighter light.
• Shades (mix with black). Same setup but colour 2 is #000000. 10-40% gives a richer version of the base — good for hover and active states. Above 60% the result is so dark the original hue barely reads.
• Tones (mix with grey). Colour 2 is #808080 and a 20-50% blend mutes the saturation without flattening the hue. Useful for backgrounds, dividers and "secondary" UI accents.
• Brand-colour midpoints. Drop your two brand hexes in and check the 50% point — that midpoint is what every CSS linear-gradient(to right, colour1, colour2) will pass through. If it looks muddy or grey, the brand pair is going to produce ugly gradients and a perceptual space (or a third stop colour) is needed.
• Hover and focus states. A common pattern is "base colour mixed 10% with black on hover, 20% on active". The colour mixer calculator gives you the resulting hex directly, which then drops into your CSS variables without needing to compute it at runtime.
• Accessible contrast tuning. If a foreground colour fails WCAG contrast against a background, mix it with black or white in 5% increments until contrast passes. The HSL output is useful here — the lightness value (L in HSL) tracks the contrast direction closely enough to guide which way to push.

Common mistakes when mixing colours on screens

Assuming screen mixing matches paint mixing

Yellow plus blue is the classic trap. On paper they make green; on a screen they make grey. Red plus green makes a muddy brown in paint; on a screen it makes yellow. If a design specification says "mix the primary and secondary colours", check whether the source assumed additive (RGB, screen) or subtractive (CMYK, paint, ink) before reaching for the calculator. The two systems give different — and often opposite — answers.

Mixing in sRGB when the goal is a perceptual gradient

sRGB midpoints often look darker or murkier than the eye expects, especially when the two endpoints are complementary (red + green, blue + orange). For a smooth, equal-step gradient — say a heatmap or a brand colour scale — interpolate in OKLCH instead. Modern CSS supports linear-gradient(in oklch, red, blue) in every major browser, and the result is the perceptually even path. The colour mixer calculator uses sRGB because that matches the default CSS behaviour; choose another tool when "default CSS" is not what you want.

Forgetting that hex is gamma-encoded

Two colours with hex values #404040 (RGB 64) and #c0c0c0 (RGB 192) average to #808080 (RGB 128). In emitted light, though, the two endpoints differ by about a factor of 8 — RGB 192 emits roughly 8 times more light than RGB 64 — and the true mid-luminance is closer to #a0a0a0 than #808080. For UI work the gamma-encoded midpoint is the right answer because that is what the browser computes. For rendering and physical light simulation, convert to linear first.

Ignoring rounding when stacking multiple blends

Each blend rounds to integer RGB values. Mix once and the error is at most 0.5 / 255 — invisible. Mix the result again, and again, and the rounding compounds. If you need a sequence of blends to land on a specific target hex, do the maths in floating point first (multiplying the underlying t values together) and round only at the end. For most design work this never matters; for procedural palette generation it occasionally does.

When the calculator is not the right tool

For accessibility contrast checking (WCAG 2.1 AA/AAA compliance), use a dedicated contrast checker — the maths is the contrast ratio formula on relative luminance, not a per-channel average. For HDR or wide-gamut workflows (Rec 2020, Display P3) the calculator does not capture the gamut shift; use a tool that supports the target colour space natively. For pigment or paint mixing, use Mixbox or a Kubelka-Munk simulator. And for choosing brand or palette colours from scratch — rather than mixing existing ones — a colour-theory tool that generates triads, analogues and complements from a base hue is a better starting point than the mixer.

Inside the world of additive sRGB mixing, though, the formula is universal: a per-channel weighted average that runs in microseconds, gives the same result every time, and matches what every browser ships. The colour mixer calculator wraps that formula in a slider so you can see the path from one colour to another in real time, with the HSL, RGB and hex output side by side.

Frequently asked questions

Does this calculator match the CSS color-mix() function?

Yes, when CSS is called with the sRGB space — color-mix(in srgb, #ff0000 50%, #0000ff 50%) — the result is identical: a per-channel weighted average of the 0-255 RGB values. CSS also supports oklch, lab and hsl spaces which give different midpoints.

Why does 50% yellow and 50% blue make grey instead of green?

Because screen mixing is additive. Yellow (255, 255, 0) plus blue (0, 0, 255) averaged channel-by-channel gives (128, 128, 128), a neutral grey. Paint mixes by absorbing wavelengths, which is why pigment yellow and pigment blue leave green light reflected. The two systems are not the same.

What blend percentage should I use for a tint or shade?

Tints (mixed with white): 10-30% for soft, 40-60% for pastel. Shades (mixed with black): 10-40% to darken richly, 50%+ for near-black accents. Tones (mixed with grey #808080): 20-50% to mute saturation without flattening the hue.

Why are the RGB values rounded to whole numbers?

Standard 24-bit colour uses 8 bits per channel, so each channel is an integer 0-255. The calculator does the blend in full precision and rounds at the end. The rounding error is at most 0.5 / 255 — about 0.2% — invisible to the eye.

How do I mix more than two colours?

Run the calculator twice. Mix colours A and B, take the result, then mix it with C. In sRGB the order does not affect the final triple as long as the percentages are chosen consistently.

What is gamma-corrected versus linear-light mixing?

sRGB hex values are gamma-encoded — the stored number follows a 2.2-power curve, not raw emitted light. Averaging the encoded values (this calculator) matches CSS and design tools. Averaging the linear values gives the physically correct mid-luminance, used in rendering engines.

Is sRGB averaging the right choice for graphic design?

For UI, gradients that have to match CSS, and screen-output design — yes. For perceptually even palette steps — use OKLCH. For photo-realistic light or HDR compositing — use linear light. For pigment or paint — use a subtractive model.

Can I get a specific named colour from mixing two others?

Set the target as one input, pick a second input that contains the channels you want to push toward, and slide the blend until the hex output matches. The HSL display is the easiest way to see whether you are moving in the right hue/saturation/lightness direction.