← Discover
ASTERXOR / Discover

Why averaging colours can make a dark middle

The numbers stored in an image are not usually proportional to the light a screen should emit.

The upper strip interpolates encoded values; the lower strip interpolates linear light, then encodes.
The upper strip interpolates encoded values; the lower strip interpolates linear light, then encodes.
DiscoverASTERXOR / LEON LEUNG

Should halfway between black and white be the number 128?

In an eight-bit image, 128 feels like an obvious middle. But an sRGB value is an encoded instruction, not a direct light measurement. Averaging instructions can give a different result from averaging the light they represent. The distinction matters in fades, transparent edges and image resizing.

Half a code value is not half the light.
THE IDEA

A useful curve sits inside the numbers

sRGB uses a nonlinear transfer function to map linear-light values into stored values. Near black it has a short linear section; elsewhere it follows a power-shaped curve. This allocates numerical precision differently across the range. It is common to call the issue gamma, although the exact sRGB function is not a single power law.

In this article, linear light is normalized so zero is black and one is the reference white of the model. That normalization does not specify a screen’s brightness in physical units. A value of 0.5 means half the reference linear-light component, not a universal number of candelas per square meter.

The upper strip interpolates encoded values; the lower strip interpolates linear light, then encodes.
FIG 01The upper strip interpolates encoded values; the lower strip interpolates linear light, then encodes.
THE MODEL

Two different meanings of halfway

Take a black pixel and a white pixel. Averaging their encoded values gives 0.5. Decoding that number with the sRGB transfer function yields about 0.214 in linear light. It therefore represents only about 21.4 percent of the reference level, even though its stored number sits halfway between the endpoints.

Instead, decode the endpoints, average their linear values, then encode the result. Half the light becomes about 0.735 in sRGB, or roughly 188 on an eight-bit scale. Both operations have produced a midpoint, but they are midpoints in different spaces. Only the latter corresponds to the stated equal-light mixture.

THE RESULT

A gradient reveals the choice

The two strips use identical black and white endpoints. The encoded-value gradient walks through stored numbers at equal intervals. The linear-light gradient walks through light contributions at equal intervals before encoding. The second has a visibly brighter middle on a normally interpreted sRGB display.

Neither strip is a promise of perceptually equal steps. Human judgments of lightness depend on context and adaptation, and perceptual color spaces address different goals. Linear-light arithmetic is appropriate when the intended operation represents combining light. A designer choosing a visually even palette may deliberately use another space for that task.

Decoding sRGB 0.5 gives about 0.214 linear light. Half linear light encodes to about 0.735.
FIG 02Decoding sRGB 0.5 gives about 0.214 linear light. Half linear light encodes to about 0.735.
THE TRADE-OFF

The same problem appears in colour

For the red-and-green example, a direct encoded average produces the triplet (0.5, 0.5, 0). Averaging the corresponding linear components and then encoding gives approximately (0.735, 0.735, 0). The second mixture is brighter because each contributing channel retains the intended light energy before display encoding.

This does not reproduce mixing paints. Pigments absorb and scatter portions of an illumination spectrum, so subtractive material mixtures follow a different physical process. Nor does a triplet alone identify every real spectral distribution. Our calculation is an additive RGB demonstration under sRGB assumptions, with no claim about a particular monitor’s primaries or calibration.

Red and green mixed by two different arithmetic rules, under sRGB assumptions.
FIG 03Red and green mixed by two different arithmetic rules, under sRGB assumptions.
IN PRACTICE

Transparent edges inherit the arithmetic

Suppose a white shape covers half a pixel over black. If coverage is interpreted as a light-mixing weight, linear compositing gives half the white light. Treating the encoded midpoint as that answer darkens the boundary. Similar issues can appear when many pixels are averaged during reduction or when layers are blended.

Real software has explicit or implicit choices about working color space, alpha representation and output conversion. A label saying RGB does not tell you all of those choices. Before judging a result, identify whether the values are encoded or linear and whether the operation is meant to model light or achieve a particular artistic appearance.

LOOK AGAIN

Decode, operate, encode

The practical sequence is short: convert encoded components to linear light, perform the light-based calculation, and convert back for storage or display. Avoid applying the conversion twice. Files and applications also need correct color-space information so the next stage knows how to interpret the numbers.

The lesson is not that every dark blend is a software bug. It is that the arithmetic has a meaning. When the intended meaning is equal contributions of light, the plain numerical average of encoded values answers a different question. Naming the space makes that hidden choice available for inspection.

Further reading

W3C CSS Color: predefined sRGB space ↗W3C CSS Color: sample conversion code ↗

Original documentation and useful background.

THE THOUGHT TO TAKE AWAY

Before averaging two colours, decide what their numbers are counting.