Digital Colour

Why the same HEX value looks different on two screens, what sRGB, Display P3 and Rec. 2020 actually are, how HDR changes the rules, and how to write wide-gamut colour in CSS without breaking older displays.

Covers screens, browsers and colour encoding. Printing lives in Print; cameras in Photography; the maths of colour spaces in Colour Systems.

15 topics · 63 evidence-labelled claims · 25 sources

Tools

Gamut checker

Colour spaces and gamuts

sRGB, P3, Adobe RGB, Rec. 709 and Rec. 2020.

What is sRGB, and why is it still the default colour space?sRGB is the colour space the web, most software and most cameras assume when nothing else is stated: three primaries shared with…What is Display P3, and how much more colour does it show than sRGB?Display P3 is an RGB colour space defined by Apple that pairs the red and green primaries of digital-cinema DCI-P3 with the D65 w…Should I use Adobe RGB or sRGB for photos and design work?Use sRGB for anything going to the web, to most clients or to software you do not control; use Adobe RGB (1998) only in a colour-…What are Rec. 709 and Rec. 2020, and why does video colour work differently?Rec.

Encoding and transfer

Gamma, transfer functions, white points and HDR.

What is gamma, and why do colour spaces use different transfer functions?A transfer function is the curve that converts between stored numbers and physical light.What is a white point, and why do screens use D65 while print uses D50?A white point is the colour a system treats as neutral white; every other colour in the space is defined relative to it.What is the difference between HDR and SDR colour?SDR (standard dynamic range) video and images describe a picture relative to the display's white, which is assumed to be around 1…What happens to a colour that a screen cannot display?It has to be replaced with one the screen can show.

Displays and devices

Panels, calibration and colour management.

Why does the same HEX colour look different on two screens?A HEX code is not a colour; it is an instruction — three numbers that mean 'this much red, green and blue' in whatever colour spa…Do browsers and operating systems colour-manage, and where does it break?Mostly, but not uniformly.Do OLED and LCD screens show colour differently?Yes, mainly at the dark end and at wide viewing angles.What does calibrating a display actually do, and is it worth it?Calibration adjusts a display towards a chosen target — a white point, a brightness and a tone curve — and profiling then measure…

Colour on the web

CSS Color 4, OKLCH and wide-gamut fallbacks.

How do I write wide-gamut colours in CSS with safe fallbacks?Write every colour as an sRGB value first, then override it with a wide-gamut value — color(display-p3 …), oklch() or lab() — eit…Why are designers switching to OKLCH, and how do you use it well?Because its lightness number tracks perceived lightness far better than HSL's, so colours with the same L look about equally ligh…How do JPEG, WebP and AVIF compression change colour?Lossy image formats convert RGB to one brightness channel plus two colour-difference channels and usually store the colour channe…