Gamma

Gamma is the non-linear relationship between pixel values stored in an image file and the actual light intensity a display emits. Mathematically: output_intensity = input_valueγ, where γ ≈ 2.2 for the sRGB standard.

Why this isn’t simply linear: the human eye is far more sensitive to differences in dark tones than light tones. A linear encoding would waste most of an 8-bit channel’s 256 values on highlight detail no one can see, while crushing dark tones into a few barely-distinguishable values. Applying gamma allocates more of the encoding to dark values where the eye actually cares.

Concrete: an 8-bit pixel value of 128 (halfway between 0 and 255) doesn’t mean half the light intensity. It means about 22% of full intensity, because 128/255 = 0.502, and 0.502² (gamma 2.2 is well-approximated by squaring) ≈ 0.252, but the full sRGB transfer is slightly more nuanced near zero. The intuition: middle-grey values are actually quite dark in linear light.

Practical implications: blending two colours in “normal” sRGB space produces results that look too dark — the average of black and white in sRGB looks much darker than the optical midpoint. Software like Photoshop and Figma offer “linear blending” options that convert to linear light, average there, then re-encode. CSS’s color-mix(in oklab, ...) does this automatically. Gamut-aware tools handle this transparently; manual hex maths usually doesn’t.

Worked example

Take pure red sRGB #FF0000 (255, 0, 0) and pure green #00FF00 (0, 255, 0). Naive sRGB-space averaging: ((255+0)/2, (0+255)/2, 0) = (127, 127, 0), a muddy olive. Convert each component to linear light first (raise to 2.2): R→1.0, G→1.0 each. Average in linear: (0.5, 0.5, 0). Convert back to sRGB (raise to 1/2.2): (188, 188, 0) — a much brighter, more believable yellow. The difference between (127, 127, 0) and (188, 188, 0) on a calibrated display is the difference between “why does my gradient look muddy?” and “ah, this looks right.” Every image-editing tool with a “linear blending” checkbox is offering this exact trade. CSS now supports color-mix(in oklab, red, green) which performs the conversion automatically, producing a perceptually-uniform midpoint regardless of starting colours.

When and why it matters

Gamma matters whenever colours are combined, scaled, or anti-aliased — which is to say, in essentially every rendering pipeline. The reason 3D engines produce washed-out, low-contrast output unless explicitly written to do gamma-correct lighting: light intensities add linearly in physics, but pixel values are gamma-encoded; treating one as the other causes light contributions to be effectively squared. Modern game engines (Unreal, Unity) do all lighting in linear space and convert to sRGB at the final framebuffer write. The web designer’s practical takeaway: use oklab or oklch for any gradient that crosses hues, and avoid mid-grey (50% lightness) as a pure-50% mix — the optical midpoint between black and white is closer to L*=50 in CIELAB, which is RGB 188, not RGB 128. Reference: W3C — sRGB colour space.

Display gamma vs encoding gamma vs system gamma: the encoded sRGB image uses a transfer function close to a 1/2.2 power (the formal sRGB curve is piecewise linear for the darkest values and a 2.4 exponent above), the display applies an inverse roughly-2.2 gamma to convert the value back to light, and the product — the “system gamma” the viewer actually sees — sits just above 1.0 to compensate for the dim viewing environment Rec. 709 and sRGB assume. macOS prior to 10.6 (2009) used a system gamma of 1.8 inherited from early Apple LaserWriter printers, which is why old Mac-authored images often look washed out on PC monitors; modern macOS uses 2.2 like everyone else.

HDR breaks this model entirely: HDR formats (Rec. 2100 PQ, HLG) use perceptual quantizer curves designed for displays that can hit 1000-10,000 nits, not the ~80-nit CRTs sRGB was tuned for. Mixing sRGB content with HDR content requires explicit tone mapping — a topic OS compositors now handle but apps historically did badly. See sRGB, Display P3, and ICC profiles for how colour spaces handle the same pixel values differently. Reference: IEC 61966-2-1 sRGB specification.