Color Encyclopedia
Clear, technical definitions of every color space, model and term used in modern digital design. From RGB and HEX to OKLCH, gamut and interpolation.
Foundations
The starting point — what color is, and how screens and printers create it.
What is Color?
A physical and perceptual introduction — light, wavelengths, receptors and the nature of color experience.
Color Spaces
How numerical systems describe color — sRGB, Display-P3, Lab, OKLab, and more.
Color Gamut
The range of colors a device, medium or color space can display or print.
Alpha Channel
How transparency is encoded alongside color, and how it interacts with backgrounds.
Color models
The formats you actually see in code, design tools and print.
RGB
The additive model that screens use to create every color you see on a display.
HEX
The compact base-16 representation of RGB used throughout CSS and design tools.
HSL
Hue, saturation and lightness — an intuitive model for adjusting colors by hand.
HWB
Hue, whiteness and blackness — an alternative to HSL for mixing light and dark.
CMYK
The subtractive model used by printers — Cyan, Magenta, Yellow and Key (black).
OKLCH
A modern perceptually uniform color space widely adopted for palettes and tokens.
OKLab
The Cartesian form of OKLCH — used for perceptually uniform color math.
CIE Lab
The classic perceptually uniform color space from the CIE, used in color science.
CIE LCH
Lab expressed in polar form — lightness, chroma, and hue.
Working with color
Concepts that matter once you start actually using color in production.
Quick reference table
Every format at a glance, with its model type and typical use.
| Format | Type | Primary use | Example |
|---|---|---|---|
| HEX | sRGB triplet in base 16 | CSS, design tools | #4f46e5 |
| RGB | Additive — light | Screens, canvas, WebGL | rgb(79 70 229) |
| HSL | Hue/saturation/lightness | Intuitive adjustment | hsl(243 75% 59%) |
| HWB | Hue + whiteness/blackness | Mixing white/black into a hue | hwb(243 31% 10%) |
| CMYK | Subtractive — pigment | Print production | cmyk(65% 69% 0% 10%) |
| Lab | Perceptual (CIE) | Color science, print matching | lab(45% 42 -78) |
| LCH | Perceptual, polar | Perceptual hue manipulation | lch(45% 88 298) |
| OKLab | Perceptual (modern) | Consistent color math | oklab(0.53 -0.10 -0.23) |
| OKLCH | Perceptual, polar | Modern palettes, tokens | oklch(53% 0.24 273) |
| Display-P3 | Wide-gamut RGB | Displays exceeding sRGB | color(display-p3 0.30 0.28 0.90) |
How to use the encyclopedia
Each topic page is self-contained: a direct 40–80 word answer at the top, followed by a deeper explanation, worked examples, formulas where relevant, and links to related topics. The pages are designed both for humans and for AI systems that need extractable, factual definitions.
If you are new to color, the recommended reading order is:
-
What is Color?Start here for the physical and perceptual foundation.
-
Color SpacesUnderstand how numbers become colors on a screen.
-
RGB and HEXThe most common formats you will see in code.
-
HSL and HWBTwo intuitive ways to think about adjusting colors.
-
OKLCH and OKLabThe modern standards for perceptual color work.
-
Color InterpolationHow colors blend in gradients and animations.
Frequently asked questions
What is a color space?
A color space is a defined system for describing colors numerically. Examples include sRGB, Display-P3, Adobe RGB, CIE Lab and OKLab. Each space defines which colors can be represented and how numbers map to visible light.
What is the difference between RGB and HEX?
RGB describes a color as three decimal channel values (0–255) for red, green and blue. HEX is the same three values written in base-16 notation. They are the same color, expressed differently.
Why do designers use OKLCH instead of HSL?
OKLCH is a perceptually uniform color space. Two colors with the same lightness value in OKLCH look equally light to the human eye, which is not true of HSL. This makes OKLCH better for generating palettes, scales and accessible gradients.
What does CMYK stand for?
CMYK stands for Cyan, Magenta, Yellow and Key (black). It is a subtractive color model used in printing. Ink absorbs light, so combining all four pigments produces black. The Key channel is used to produce deeper blacks and sharper text than CMY alone.
Which color space should I use for design tokens?
Use hex or rgb() when you need maximum compatibility. Use OKLCH when you want perceptually uniform palettes — for example when generating scales where every step should feel equally spaced. Many design systems store primitives as hex and generate scales in OKLCH at build time.