Every colour you have ever seen on a screen — this page's background, a sunset photo, a neon sign in a game — is mixed live from just three lights: red, green and blue. Vary their intensities and you get millions of hues from three humble channels. It is one of the most elegant hacks in all of technology.
This article explains how it works: the RGB, HEX and HSL notations (and how they relate), why screens add light while printers subtract it, what bit depth and colour gamuts mean, and why the same colour never looks quite identical on two different screens.
RGB: mixing light
Screens are additive: they start from black (no light) and add coloured light. Each pixel contains red, green and blue subpixels, each typically driven at 256 intensity levels (0–255). Full red plus full green reads as yellow; all three at full blast reads as white; all three off is black. Every on-screen colour is a point in this three-dimensional space.
The model maps neatly onto human vision, which is why it won: our eyes have three cone types, roughly tuned to red, green and blue wavelengths. RGB is not a perfect model of perception — equal numeric steps do not look equally different — but as an engineering compromise between simplicity and fidelity, it has survived essentially unchanged for decades.
HEX: the same thing, written shorter
HEX notation is RGB in base-16: #FF5733 means red=FF (255), green=57 (87), blue=33 (51). Web developers inherited it from the early web, where every byte of HTML mattered, and it stuck because it is compact and copy-paste friendly. The three-digit shorthand (#F53 = #FF5533) saves a few more characters.
Functionally, #FF5733 and rgb(255, 87, 51) are identical — the browser converts both to the same internal values. HEX cannot express transparency on its own (the 8-digit #RRGGBBAA variant exists but rgba() is clearer), which is the one practical reason to prefer rgb() notation in modern CSS. Choose by readability; the rendering is the same.
HSL: colour the human way
Nobody thinks “I want rgb(87, 51, 255)” — people think “a vivid blue-violet, fairly bright”. HSL (hue, saturation, lightness) encodes colour the way humans describe it: pick an angle on the colour wheel, decide how intense, decide how light. Adjusting a design becomes intuitive: need a darker variant? Lower the lightness. A muted version? Lower the saturation.
Under the hood, HSL is just a cylindrical remapping of the RGB cube — every HSL colour is exactly some RGB colour. Design tools convert freely between them. The practical upshot: think and adjust in HSL, ship in HEX or RGB, and let the tooling translate.
- Hue: the position on the colour wheel, 0–360° (0° red, 120° green, 240° blue).
- Saturation: 0% grey to 100% vivid.
- Lightness: 0% black through 50% pure colour to 100% white.
Additive vs subtractive: screens vs print
Screens emit light, so they add: black is the absence of everything, white is everything at once. Printers work in reverse — paper starts white (reflecting all light) and inks subtract wavelengths. Cyan ink absorbs red light, magenta absorbs green, yellow absorbs blue; the CMYK model adds black (K) because real inks make muddy darks.
This is why screen designs often disappoint in print: some vivid RGB colours — especially bright greens and cyans — simply cannot be mixed from CMYK inks. They fall “out of gamut” and get approximated. Designing for print means working inside the smaller CMYK gamut from the start, or accepting the shift. Neither model is wrong; they describe opposite physics.
Bit depth, gamuts, and banding
Bit depth is how finely each channel is sliced: 8 bits gives 256 levels per channel, hence 256³ ≈ 16.7 million colours. Ten-bit panels give 1,024 levels per channel — over a billion colours. The visible payoff is in smooth gradients: 8-bit skies can show banding (visible steps), while 10-bit renders them seamlessly.
Gamut is the range of colours a device can produce at all, defined by standards like sRGB (the web's baseline), Adobe RGB (print-oriented) and Display P3 (Apple's wide gamut). A P3 display can show saturated reds and greens that sRGB cannot describe. Content mastered in a wide gamut looks richer on capable screens — and gets clipped to fit on others, which is why sRGB remains the safe interchange format.
Why colours differ between screens
Even showing the same file, two screens disagree. Panel technology sets the baseline (OLED's per-pixel light vs LCD's backlight), factory calibration varies wildly, brightness and ambient light reshape perception, and features like Night Shift deliberately warm everything after dark. Colour profiles try to standardise the chain, but most consumer screens are never calibrated.
For critical work — photography, brand design, print — the answer is a hardware calibrator and a controlled viewing environment. For everything else, the pragmatic rule: check important colours on at least two very different screens (say, a laptop and a phone). If it looks right on both, it will look right almost everywhere.
Frequently asked questions
How many colours can a screen actually show?
At 8 bits per channel — the common standard — a screen addresses 256×256×256 = 16.7 million colours. Ten-bit panels address just over a billion. In practice the human eye distinguishes far fewer in most scenes, but the extra steps matter most in smooth gradients, where 8-bit can show visible banding.
Why does my design look different on my phone?
Several links in the chain differ: panel technology (OLED vs LCD), colour gamut (sRGB vs Display P3), factory calibration, brightness settings, and software like Night Shift that warms the display after dark. The same file is being interpreted by different hardware — some difference is unavoidable without calibrated profiles.
HEX or RGB — which should I use?
They are the same colour written two ways: #FF5733 is exactly rgb(255, 87, 51). HEX is compact and traditional in code; rgb() notation is more readable and supports alpha transparency directly (rgba). Use whichever your team reads faster — the browser treats them identically.
What is sRGB and should I care?
sRGB is the standard colour space of the web — the agreed definition of what “red 255” means. Designing in sRGB is the safe default because every browser and most screens understand it. Wide-gamut spaces like Display P3 can show richer greens and reds, but only on supporting displays; for broad compatibility, sRGB remains the lingua franca.
Conclusion
Digital colour is a chain of translations: numbers to light to eyes to brains, with a different dialect at every link. RGB and HEX say the same thing two ways, HSL speaks human, and every screen reinterprets the message through its own panel and calibration. Understand the chain and you stop blaming the wrong link — and start designing colours that survive the journey.