Colour Maths: Spaces, Gamma & Displays

A photograph looks warm on one screen, dull on another and strangely dark after an editing operation. Is the problem the pixels, the display, the file profile, the room or the mathematics? Digital colour is not a paint box stored inside a computer. It is a chain of measurements and transformations that links light, human vision, numerical coordinates and device behaviour.

This is why mathematics matters in design, photography, web development, games and scientific imaging. Vectors hold colour coordinates. Matrices transform between spaces. Transfer functions encode light nonlinearly. Geometry describes gamuts. Statistics and perceptual experiments help quantify difference. The mathematics cannot decide what is beautiful, but it can make colour handling consistent, testable and honest.

A quick map of the mathematics

A digital colour is a coordinate in a declared colour space, not three universal numbers.
RGB components describe mixtures of selected primaries; another space may use different axes.
Matrix multiplication converts linear-light coordinates between compatible three-component systems.
Transfer functions map between stored nonlinear signals and quantities related to emitted light.
Chromaticity normalises tristimulus values to describe colour independent of overall scale.
A gamut is the subset of colours a device or space can represent.
Interpolation must specify both the colour space and whether values are linear-light or encoded.
Bit depth, quantisation, dithering and calibration affect smoothness and consistency.

The topic connects to photography exposure mathematics, computer vision and edge detection, ray tracing and light reflection and JPEG compression and quantisation. Each article describes a different part of the image pipeline.

Light, sensation and coordinates are different layers

Light can be described by a spectral power distribution: energy across wavelength. The eye converts incoming light through photoreceptors and neural processing. A colour space then represents aspects of colour using coordinates. Those layers are related but not identical.

Different spectra can produce the same colour match for a particular observer and viewing condition. Such spectra are called metamers. A three-channel camera does not record a complete spectrum at every pixel; it records responses shaped by filters and sensors. This is why two materials can match under one lamp and diverge under another.

Tristimulus values

Colour-matching experiments motivate three numbers such as CIE XYZ tristimulus values. They provide a standardised mathematical framework for colourimetry. X, Y and Z are not simply red, green and blue sensor readings. Y is designed to relate to luminance under specified conditions, while X and Z support the coordinate system.

A standard observer is an average model derived from experiments, not a claim that every person sees identically. Age, adaptation, colour-vision variation and viewing context matter. Colour management improves consistency within a model; it does not erase human diversity.

Did You Know? Identical RGB numbers can mean different colours

The triplet (0.8, 0.2, 0.1) has no complete colour meaning until a colour space and encoding are declared. sRGB and Display-P3 use different primaries, so the same component numbers refer to different tristimulus values. Metadata is part of the data.

RGB is a coordinate system built from primaries

An additive RGB system represents colour as a combination of red, green and blue primary lights. In a simple linear model:

C = RPr + GPg + BPb,

where Pr, Pg and Pb are primary vectors and R, G and B are coefficients. The achievable linear combinations within component limits form the space's gamut.

The familiar RGB cube is a coordinate picture. Its origin is black under the model, (1,1,1) is the reference white, and the axes lead to primaries. Opposite cube corners and edges represent mixtures. But the cube's shape in RGB coordinates does not mean equal numerical steps look equally different.

Additive versus subtractive mixing

Displays add emitted light. Printing uses inks that absorb parts of incident light, so CMYK workflows are subtractive and depend on paper, ink and viewing illumination. Converting an RGB image to print is not accomplished by replacing each value with one minus itself. Profiles and rendering choices handle device behaviour and gamut limits.

Normalised and integer values

Software might store 8-bit components from 0 to 255 or normalised values from 0 to 1. The integer 128 corresponds to about 0.502 as an encoded code value, but not necessarily to 50.2% of maximum emitted light. A transfer function sits between code and linear light.

Gamma and transfer functions

Displays and image systems use nonlinear transfer functions. The everyday word gamma often describes this nonlinearity, but modern standards may use piecewise functions rather than a single power law. The sRGB conversion between encoded component C and linear-light component L has a linear segment near black and a power segment above it.

The W3C CSS Color Module Level 4 provides current definitions and sample conversion code for sRGB, Display-P3 and other spaces. It distinguishes encoded spaces from linear-light forms and supplies matrices to and from XYZ. This is a technical specification for web colour; it should be implemented as written rather than replaced by the vague instruction “use gamma 2.2.”

A simplified power-law intuition

For intuition only, suppose encoded value C = L^(1/2.2). If linear light L = 0.25, then C ≈ 0.25^0.4545 ≈ 0.533. A quarter of maximum linear light uses a code above halfway. The mapping allocates more code resolution to darker values, roughly matching visual sensitivity and historical display behaviour.

The inverse is L = C^2.2 in this simplified model. An encoded value 0.5 gives linear light about 0.218, not 0.5. Use the exact space's transfer function for real conversions.

Why gamma correction exists

Nonlinear encoding uses code values efficiently for perception and supports display systems. It is not a fake brightness effect to be applied arbitrarily. The pipeline typically decodes stored values to linear light for physically meaningful mixing, performs operations and encodes for storage or display.

OETF, EOTF and system transfer

An opto-electronic transfer function maps scene or linear light towards a signal; an electro-optical transfer function maps a signal towards displayed light. Camera, grading and display pipelines can include additional transforms. Calling every curve “gamma” can hide which direction and quantity are meant.

Why blending should often use linear light

Suppose we average black and white. In encoded sRGB-like code values, (0 + 1)/2 = 0.5. But decoding a 0.5 sRGB code gives substantially less than 0.5 linear light. A physically equal mixture of black and maximum white is 0.5 in linear light, which encodes to a value above 0.5.

That is why a gradient or transparency blend performed directly on nonlinear encoded components can appear too dark. Correct procedure for light-like compositing is:

Decode each component to linear light.
Form the weighted sum there.
Encode the result back to the target signal space.

Worked example with the simplified 2.2 curve

Blend black L1 = 0 and white L2 = 1 with equal weights. Linear result is L = 0.5. Encode it: C = 0.5^(1/2.2) ≈ 0.730. Direct code averaging produces 0.5, whose decoded light is about 0.218. The two midpoints differ dramatically.

This simplified calculation is not the exact sRGB piecewise result, but it exposes the direction and scale of the issue. Production code should use standard functions.

Not every interpolation goal is physical light mixing

Designers may want a perceptually even gradient, a constant hue path or a deliberate artistic effect. Interpolating in Lab, LCH or OKLCH can serve those goals better than linear RGB. There is no context-free “correct midpoint.” The method should match the intended property and handle out-of-gamut results.

Matrices convert linear colour coordinates

Once RGB components are decoded to linear-light values, a 3-by-3 matrix can convert between an RGB space and XYZ under a stated white point. In vector form:

[X Y Z]^T = M [R G B]^T.

Each output is a weighted sum. For example, X = m11R + m12G + m13B. The matrix comes from the space's primaries and reference white, not from guesswork.

The W3C specification supplies a linear-sRGB-to-XYZ matrix. Rounded for explanation, it is approximately:

X = 0.4124R + 0.3576G + 0.1805B,

Y = 0.2126R + 0.7152G + 0.0722B,

Z = 0.0193R + 0.1192G + 0.9505B.

Worked example: pure linear red

For (R,G,B) = (1,0,0), the XYZ result is approximately (0.4124, 0.2126, 0.0193). For pure green it is the second matrix column, and for pure blue the third. This column interpretation is a useful check when implementing transformations.

Inverse matrices

An inverse matrix converts XYZ back to linear RGB if the matrix is nonsingular. The numerical result may contain components below 0 or above 1. That is not necessarily a calculation error; it may indicate the XYZ colour lies outside the target RGB gamut.

Clipping each component to [0,1] is simple but can shift hue and lightness. Gamut mapping tries to produce an acceptable in-gamut alternative, and different rendering intents make different trade-offs.

Matrix order matters

Chromatic adaptation, colour-space conversion and calibration transforms may each use matrices or nonlinear steps. Matrices do not generally commute, and transfer functions cannot be moved through a matrix as if everything were linear. Decode first, apply the correct ordered linear transformations and re-encode at the proper stage.

Chromaticity removes overall scale

From XYZ, chromaticity coordinates are often defined as:

x = X/(X+Y+Z), y = Y/(X+Y+Z), z = Z/(X+Y+Z).

Because x + y + z = 1, two coordinates determine the third. Scaling X, Y and Z by the same positive factor leaves x and y unchanged. Chromaticity describes colour proportions independent of overall magnitude in this model.

Worked chromaticity example

Let XYZ = (0.3, 0.4, 0.1). The sum is 0.8. Then x = 0.375, y = 0.5 and z = 0.125. If all components double to (0.6,0.8,0.2), the chromaticities remain the same.

The calculation fails for X+Y+Z = 0, corresponding to black/no tristimulus magnitude in the model. Software must handle that edge case.

The chromaticity diagram is a slice, not all colour experience

A two-dimensional diagram omits luminance. Two colours at the same chromaticity can have different brightness. The plotted horseshoe boundary and straight mixtures help visualise gamuts, but screen images of the diagram cannot display every colour they label because the screen itself has a limited gamut.

White points and chromatic adaptation

A colour space defines a reference white. sRGB uses a D65-related white, while some print-oriented spaces and Lab workflows use D50. XYZ values relative to different whites cannot be treated as directly interchangeable.

Chromatic adaptation transforms estimate how colours correspond when the reference illumination changes. A common approach converts XYZ to a cone-response-like space, scales channels according to source and destination whites, and converts back.

Why white is contextual

A white sheet can look white under warm indoor light and daylight because vision adapts. A camera without suitable white balance may record strong colour casts. White balance estimates or selects an illuminant and scales channels; it does not identify the true spectrum of every surface.

A grey-card ratio example

Suppose a neutral target should produce equal linear channels but a camera measures (0.8, 1.0, 0.5). A simple channel-balancing idea might multiply by (1.25, 1.0, 2.0), yielding (1,1,1). Real camera colour correction is more complex: sensor channels overlap, values can clip, and a matrix may be needed. The ratio example explains the goal, not a complete raw-processing pipeline.

Gamut is a geometric constraint

An RGB space with component limits forms a cube in its own coordinates. Under transformation to XYZ and chromaticity, its representable colours occupy a particular region. Display-P3 reaches some more saturated colours than sRGB, but neither contains every visible colour.

Wider gamut is not automatically more accurate

A wider container helps only when content, software and display all manage it correctly. Assigning a wide-gamut profile to numbers that were created as sRGB changes their meaning; it does not reveal hidden saturation. Converting with colour management preserves appearance as far as the destination permits.

Out-of-gamut choices

When a source colour lies outside the destination gamut, software can clip components, compress chroma, preserve hue approximately or use a rendering intent. Each method changes something. A report should state the method when differences matter.

The W3C colour specification discusses gamut mapping and shows that clipping encoded components can alter hue and lightness. This is an excellent example of optimisation with multiple objectives: remain representable, minimise perceptual change and preserve relationships.

Perceptual spaces and colour difference

RGB distances are device-space distances, not perceptual distances. The Euclidean distance between (0.1,0.1,0.1) and (0.2,0.2,0.2) may not look comparable to an equal numerical step elsewhere.

CIE Lab was designed so coordinate differences relate more usefully to perceived differences than raw XYZ, within limits. A simple colour difference is:

ΔE*ab = √[(ΔL*)² + (Δa*)² + (Δb*)²].

Later formulas adjust weighting for nonuniformities. A ΔE value is meaningful only with the stated formula, viewing conditions and application tolerance.

Worked Lab difference example

Colour A is Lab (60,20,30) and B is (62,17,34). Differences are (2,−3,4), so ΔE*ab = √(4+9+16) = √29 ≈ 5.39. That is a numerical difference under this formula, not a universal verdict on acceptability.

Textiles, displays, printing and medical imaging can use different tolerances. Human evaluation remains important.

Hue angles are circular

In cylindrical forms, hue is an angle. The difference between 359° and 1° is 2°, not 358°. Interpolation should take the intended short or long path around the circle. This small arithmetic detail prevents dramatic gradient errors.

Bit depth, banding and dithering

With B bits per component, a simple RGB image has 2^B levels per channel and 2^(3B) possible code triplets. Eight bits gives 256 levels per channel and about 16.7 million triplets. This count does not mean all triplets are perceptually distinct or all visible colours are covered.

Quantisation step

Normalised 8-bit code values have steps of 1/255 between endpoints when mapped that way. In a nonlinear encoding, equal code steps correspond to unequal linear-light steps. Banding becomes visible when a smooth gradient is represented with too few effective levels after editing, compression or display.

Dithering adds structured or random variation so the eye integrates neighbouring pixels into an intermediate impression. As in digital audio, adding carefully controlled noise can reduce structured quantisation artefacts. It does not create extra true measurement precision.

Ten-bit and high dynamic range

Ten bits provides 1,024 code values per channel, four times the count of eight bits. HDR systems also use different transfer functions, luminance ranges, metadata and display capabilities. “Ten-bit” alone does not prove HDR or accurate colour.

Pipeline precision

Repeated edits in low-precision encoded values can accumulate rounding and clipping. Image applications often use higher internal precision and linear or scene-referred workflows for calculations, then quantise at delivery. Storage format, processing precision and display precision are separate.

Luma and chroma representations

Video and image codecs often transform RGB-like components into a luma-related component and two colour-difference components, commonly described by families such as YCbCr. This is not the same as CIE XYZ, and Y in a video formula is not automatically physical luminance. Coefficients depend on the standard and signal definition.

A simplified transformation may form Y' as a weighted sum of nonlinear R', G' and B', then store differences between blue or red signals and Y'. Human vision often tolerates lower spatial resolution in chroma than in fine luma-related detail, so codecs may chroma-subsample.

A weighted-sum example

Using illustrative coefficients Y' = 0.2126R' + 0.7152G' + 0.0722B', encoded green contributes more to the luma-related value than encoded blue. For R'=0.2, G'=0.8 and B'=0.1, Y' ≈ 0.0425 + 0.5722 + 0.0072 = 0.6219. These coefficients resemble a Rec.709 relationship, but a real implementation must use the exact standard, range convention and transfer characteristics.

Full range and limited range

Some video systems reserve code values below black and above white, while computer graphics commonly uses a fuller numerical range. Treating limited-range data as full range makes blacks grey and whites dull; treating full range as limited can crush shadows and highlights. Bit depth alone does not reveal the range convention.

Chroma subsampling notation

Notations such as 4:4:4 and 4:2:0 describe relative chroma sampling patterns, but interpretation depends on siting and standard. In broad terms, 4:4:4 preserves chroma samples at full grid density, while 4:2:0 reduces chroma resolution in both dimensions. It can save substantial data because there are fewer colour-difference samples.

Subsampling is different from colour-space conversion, bit-depth reduction and transform quantisation. A video can be ten-bit yet chroma-subsampled. A still image can retain full component resolution yet be heavily quantised elsewhere. Good analysis names each mechanism instead of calling all changes “compression.”

Edge cases reveal assumptions

Highly saturated text, synthetic graphics and screen recordings can show colour fringing after chroma subsampling because their sharp colour edges differ from many natural images. A codec choice suited to camera footage may be less suitable for user-interface text. Mathematical efficiency must be judged against content and purpose.

Calibration and profiling

Calibration adjusts a device towards a target state, such as white point, luminance and tone response. Profiling characterises how that device state maps between values and colourimetry. The two words are related but not synonyms.

A display changes with brightness settings, temperature, age and viewing environment. A profile measured at one state may be invalid after major settings change. Colour-managed software uses profiles to transform content; unmanaged software may send numbers directly.

A measurement curve

Suppose a display is asked to show code levels 0, 0.25, 0.5, 0.75 and 1. A meter records normalised luminances 0, 0.05, 0.22, 0.52 and 1. Plotting code against luminance reveals nonlinearity. Fitting a power curve can summarise it, while residuals show deviations.

Do not infer an exact standard from five measurements. More patches, stable conditions and instrument calibration are needed. The example shows how graphs and regression support device characterisation.

Ambient light matters

A mathematically calibrated display can look different in a bright room because reflections raise apparent black and adaptation changes perception. Professional workflows control surroundings. Home users can still avoid direct glare and extreme brightness mismatch.

Alpha compositing adds another dimension

An RGBA colour includes alpha, often interpreted as coverage or opacity. For foreground colour Cf, background Cb and alpha α, a simple “over” result in linear premultiplied form is:

Cout = Cfα + Cb(1−α), αout = αf + αb(1−αf)

with the full formula depending on whether colours are premultiplied and whether the background has alpha. Mixing straight and premultiplied representations creates dark fringes around edges.

Worked opaque-background example

Let a linear red foreground Cf = (1,0,0) have α = 0.25 over linear blue Cb = (0,0,1). The result is (0.25,0,0.75). If encoded nonlinear components were blended directly, the emitted-light balance would differ.

Alpha is not a colour-space profile and not necessarily physical translucency. It is a compositing parameter. Clear variable names and pipeline documentation prevent confusion.

Common misconceptions worth correcting

“RGB values are universal”

They need a colour space, transfer function and often a profile. The same triplet can denote different colours.

“Gamma is just screen brightness”

Transfer functions relate signal codes and light. A brightness control may change backlight or processing; it is not synonymous with the encoding curve.

“A wider gamut makes every image more colourful”

Proper conversion aims to preserve existing appearance. Wide gamut enables representation of additional colours; it should not arbitrarily stretch all content.

“Sixteen million RGB codes mean sixteen million visible colours”

Code count and perception differ. Many codes may be visually close, and the represented gamut still excludes colours.

“Lab distance is perfectly perceptual”

Lab improves useful uniformity but is not perfect. Difference formula, viewing conditions and application matter.

“JPEG changes colour only because it lowers resolution”

JPEG can transform components, subsample chroma and quantise frequency coefficients. Spatial dimensions may remain the same while colour detail and values change. See the JPEG mathematics article for that separate mechanism.

A safe student investigation

Use numerical colour values and an ordinary screen. Do not use intense light sources or stare at bright test patterns for long periods. Screen appearance is illustrative unless measured.

Investigation 1: encoded versus linear gradients

Create black and white endpoints.
Generate one midpoint by averaging encoded values.
Generate another by decoding to linear light, averaging and re-encoding.
Display both with labels.
Record the exact transfer function used.

Students should predict which appears lighter and explain why. A screenshot viewed on unmanaged software may change appearance, so include numerical results.

Investigation 2: matrix transformation

Use an official RGB-to-XYZ matrix.
Transform unit red, green, blue and white.
Verify that white equals the sum of the three columns.
Apply the inverse and calculate round-trip error.
Test an out-of-gamut XYZ value and observe negative or above-one RGB components.

Keep extra decimal precision until the final display to reduce rounding error.

Investigation 3: quantised gradient

Create a grayscale ramp using 16, 32, 256 and 1,024 code levels. Compare banding, then add low-amplitude dither to the 16-level ramp. Explain why apparent smoothness can improve even though individual pixels vary.

Investigation 4: circular hue

Interpolate between hue 350° and 10° using ordinary arithmetic and then using shortest circular distance. The naive midpoint is 180°, while the short-path midpoint is 0°. This is a compact demonstration of circular statistics.

How students can build transferable skill

Name the space with every coordinate. Write “encoded sRGB,” “linear sRGB,” “XYZ D65” or “Lab D50,” not merely RGB or XYZ when precision matters. The label prevents invalid arithmetic.

Draw the pipeline. Mark capture, profile assignment, decoding, linear operation, conversion, encoding and display. If a result looks wrong, locate which stage changed meaning.

Test neutral colours and primaries. Black, white, grey and unit axes expose matrix, transfer and channel-order mistakes. Round-trip transforms should nearly recover their input within expected numerical error.

Do calculations at adequate precision. Rounding every matrix coefficient to two decimals can create visible drift after repeated conversion. Keep authoritative coefficients and round only for explanation.

Separate measurement from preference. A meter can assess tone response and white point; it cannot decide which colour palette best communicates kindness or urgency. Design uses both evidence and judgement.

State limitations. A colour difference computed from file values is not a measured display difference unless the device and viewing pipeline are included. A gamut diagram shown on sRGB cannot literally display out-of-sRGB colours.

The habit of documenting inputs, formulas and checks is reinforced in How to check your work.

Guidance for parents and educators

Begin with familiar observations: why a phone photo changes under warm lighting, why printed colours differ from a monitor, or why a gradient has bands. Then move from observation to variables instead of declaring the device defective.

Use colour vision inclusively. Do not make success depend only on naming or distinguishing hues. Pair colour with labels, patterns, position or text. Students vary in colour vision, and accessible charts communicate redundantly.

Ask for source-aware language. “The W3C CSS Color specification defines this conversion” is stronger than copying a matrix from an unknown graphic. Standards can evolve, so record the accessed version or date for technical projects.

Connect mathematics by stage. Ratios and percentages describe code values; functions explain transfer curves; matrices and vectors handle conversion; geometry describes gamut; logarithms appear in imaging and exposure; statistics supports calibration and perception experiments.

Career discussions should stay open. Colour mathematics supports web engineering, animation, photography, printing, display design, film and scientific visualisation. Competence also requires art, physics, software, communication and domain standards. No single mathematics article guarantees a pathway.

Families can use the eduKate Sengkang Mathematics Hub and mathematics pathways guide to connect ideas across stages without assuming there is one correct route.

Colour contrast is a separate design calculation

Colour management aims to preserve intended colour meaning across devices, while accessibility contrast asks whether foreground and background remain distinguishable enough for reading under a defined method. A saturated pair can look vivid yet have poor lightness contrast. Conversely, a restrained palette can be highly readable.

Students can calculate a contrast metric only after converting the required encoded components according to the metric's specification. They should not substitute an ordinary average of R, G and B for relative luminance. Nor should they treat a passing numerical threshold as the complete user experience: font size, weight, glare, display state and visual variation still matter.

A good chart uses redundant cues. Lines can differ by dash pattern and label, categories can have symbols as well as colours, and important states can include text. Red–green alone is especially risky, but every palette should be tested for multiple forms of colour-vision difference and grayscale reproduction.

This is another place where context prevents misuse. A colour-difference formula for quality control and a web-content contrast formula answer different questions. Both use mathematics, yet their inputs, assumptions and thresholds are not interchangeable. Before calculating, write the decision the number is meant to support.

A small audit for an image workflow

Choose one test image containing neutrals, saturated colours, skin-like tones, gradients and fine coloured text. Record its embedded profile and bit depth. View it in colour-managed software, convert a copy to another space, and compare numerical values as well as appearance. Check whether conversion or profile assignment was used. Inspect gradients for banding, edges for chroma artefacts and out-of-gamut warnings for clipped regions.

The audit should not end with “looks the same to me.” Note the display, brightness, room lighting and application. If a measuring instrument is available, distinguish measured values from visual observations. The report becomes useful because another person can repeat it and understand why differences might arise.

Frequently asked questions

What is a colour space?

It is a defined coordinate system with rules connecting numbers to colourimetric meaning. For RGB spaces, primaries, white point and transfer functions are central parts of the definition.

Is sRGB the same as RGB?

No. RGB is a family of additive coordinate systems. sRGB is one standard RGB space with specified primaries, white and transfer characteristics.

What does gamma correction do?

It maps between linear-light quantities and nonlinear signal values, often through a standard piecewise transfer function. The exact direction and standard should be stated.

Why does averaging colours sometimes look dark?

If nonlinear encoded RGB values are averaged directly, the result is not an equal mixture of linear light. Decode, blend in the intended space and re-encode.

What is a gamut?

It is the set of colours a device or colour space can represent under stated conditions. A destination cannot reproduce source colours outside its gamut exactly.

Does a profile change the pixel values?

Assigning a profile changes how existing numbers are interpreted. Converting to another profile usually changes numbers to preserve appearance as far as possible. These are different operations.

Why can two screens disagree?

They may have different primaries, tone response, brightness, settings, age, profiles and ambient light. Software colour management also matters.

What mathematics should a beginner learn first?

Ratios, functions, graphs, exponents, vectors and matrix multiplication form a strong base. Trigonometry, logarithms, numerical methods and statistics deepen later work.

A final perspective

Digital colour is coordinated translation. Spectral light becomes visual response; a colour model turns response into coordinates; a profile connects device behaviour to standards; transfer functions allocate code values; matrices move linear coordinates; gamut mapping handles what cannot fit.

The importance of mathematics lies in making every translation explicit. It tells us why the same numbers can mean different colours, why encoded midpoints can be dark, why an inverse transform can produce negative components and why “millions of colours” is not a perceptual guarantee.

Students who understand that chain become better than software operators. They can diagnose, test, communicate limitations and choose operations that match their purpose. That reasoning travels from a phone photograph to web accessibility, scientific maps, cinema and future display technologies.

Why Mathematics? | Colour Spaces, Gamma Correction and Digital Displays