12 practical guides covering OKLCH, WCAG contrast, design tokens, dark mode, gradients, color psychology, and more. No jargon. No fluff.
A plain-English intro to the three properties every color has - hue, saturation and lightness - and why they matter for digital design.
OKLCH is a perceptually uniform color space supported in modern CSS. Learn what it is, why it matters, and when to use it instead of HSL.
Complementary, analogous, triadic, tetradic - which color harmony fits your project? Plain explanations with real-world examples.
WCAG 2.1 contrast ratios are the legal accessibility standard. Learn what AA and AAA mean, how to test, and why APCA is the future.
Dark mode is not just inverted light mode. Learn how to choose surface colors, lower chroma, fix contrast, and avoid pure-black pitfalls.
Why some gradients look professional and others look muddy. Learn to pick stops, interpolate in OKLCH, and avoid the "gray middle" problem.
A practical guide to color psychology in design - what each hue connotes, where the cliches come from, and when to break the rules.
A repeatable process for picking a brand color that is distinctive, on-message, accessible, and works across light and dark mode.
Design tokens are just named variables for design decisions. Learn what color tokens are, the W3C DTCG format, and how to ship them.
Tailwind v4 ships with an OKLCH default palette and the @theme directive. Learn what changed, how to migrate, and how to extend.
About 1 in 12 men and 1 in 200 women have a form of color blindness. Learn the simple design rules that make your interface work for them.
A comprehensive WCAG color reference: contrast ratios, focus, target size, color-only signals, APCA, audit checklist and code examples.
The articles above are deep-dives. Visit the glossary for plain-English definitions of WCAG, OKLCH, APCA, design tokens, and 60+ other terms.