Learn
Color theory for people who ship
Six paths through the tools and the writing. Each one pairs the concept with the tool that makes it concrete, because color is one of those subjects where reading about it does almost nothing and moving a slider does almost everything.
Start with the background
The single decision every other color on the page has to answer to.
Tools
Understand contrast properly
Why 4.5:1 is a floor and not a target, and what APCA changes.
Tools
Learn a perceptual color space
HSL lies to you. OKLCH does not. This is the highest-leverage thing to learn.
Tools
Build a palette that scales
From one brand color to a documented, exportable system.
Tools
Ship dark mode without regrets
Dark mode is not an inversion. It is a second, related system.
Tools
Design for every kind of vision
Eight kinds of color vision, and the palettes that survive all of them.
Tools
Straight comparisons
All 6 comparisons — each one leads with a verdict, then shows the working.
- OKLCH vs HSLUse OKLCH for anything you generate — ramps, hover states, accessible pairs, gradients — because equal steps in it look …
- WCAG contrast vs APCAConform to WCAG 2.2 because that is what audits and procurement cite, and consult APCA when a technically-passing pair s…
- Lab vs OKLabBuild new work in OKLab — it fixes CIELAB’s blue-region hue shift, which is the failure you will actually hit when inter…
- HEX vs RGBThey are the same color in two notations, so pick by context: HEX to hand someone a value, <code>rgb()</code> when code …
- RGB vs CMYKDesign in RGB and convert to CMYK only at the end, using a profile for the actual press — a formula-based conversion is …
- sRGB vs Display P3Author in sRGB and reach for Display P3 deliberately, for accents where the extra saturation earns its place — always be…
Look something up
- Color glossary38 terms defined — contrast ratio, chroma, gamut, OKLCH, gamma correction, delta E
- Alpha compositingAlpha compositing is combining a translucent color with what is behind it, weighted by the alpha channel.…
- APCAAPCA is a perceptual contrast model developed for WCAG 3 that reports a signed lightness contrast accounting f…
- BandingBanding is the visible stepping in a gradient that should look smooth, caused by there being fewer distinct 8-…
- Blend modeA blend mode is a function that combines a source color with the backdrop color, producing effects that plain …
- ChromaChroma is how far a color sits from gray at its own lightness — an absolute measure of colorfulness, not a per…
- CIE XYZCIE XYZ is the 1931 device-independent color space that every other color space is defined against, with Y car…