Color Guides
Clear, practical explanations of color models, contrast and color theory for web designers and developers.
Hex color codes explained: how #RRGGBB maps to RGB
A hex color code is RGB written in base 16. Learn the math, the 3-, 4-, 6- and 8-digit forms, how alpha works, and the mistakes that break colors.
Read the guide →RGB vs HSL vs OKLCH: which CSS color model to use and when
RGB describes light, HSL makes it editable, OKLCH makes it perceptually even. Here is what each model is good at and when to reach for it in CSS.
Read the guide →WCAG contrast ratio explained: formula, thresholds and exemptions
How WCAG 2 measures contrast, which ratio each kind of text and UI element needs, and the edge cases that most often trip teams up in audits.
Read the guide →Color harmony guide: complementary, analogous, triadic and more, with hex examples
Every classic color harmony is a fixed rotation on the hue wheel. See each one worked out from a single base color, and how to turn it into a usable UI palette.
Read the guide →What is OKLCH? The perceptual CSS color format, explained
OKLCH is a CSS color format built on perceived lightness, chroma and hue. Learn how its three numbers work and why they make palettes easier to control.
Read the guide →APCA vs WCAG 2: how the two contrast methods differ and which to use
APCA predicts readability better than the WCAG 2 ratio in some cases, but WCAG 2 is still the legal baseline. Here is how the two differ and how to use both.
Read the guide →RGB vs CMYK vs HEX: screen color, print color and how to convert between them
RGB and HEX describe light on a screen; CMYK describes ink on paper. Learn why colors change between them and how to prepare files for each medium.
Read the guide →Tint vs shade vs tone: what they are and how to build color scales with them
A tint adds white, a shade adds black and a tone adds gray. See each one worked out from a single base color, and how to turn them into UI states and scales.
Read the guide →