Color Model

Colors passed around in words don't survive the trip. "A slightly deeper blue" becomes a different color in each listener's head. Wherever the person drawing the design and the person writing the code are separate, that happens on every handoff.

Pagedeck had the problem too. Noa asked for the button to go one step deeper, and Theo eyeballed a value that looked about right. The button that shipped was slightly muddier than the design, and the difference cost another round of messages. Both of them were looking at the same color without being able to name the same value.

A color model is an agreed rule for splitting a color into a few numbers. Once the values are fixed, nothing shifts on the way across.

Split color along a few axes and put a value on each axis. Two of them dominate screen work.

1. Writing it as amounts of red, green and blue. Each value runs 0 to 255 and describes how much of each light gets mixed. It matches how a display actually mixes light, which makes it the default screen notation, usually shortened to six hexadecimal digits. The weaknesses: you can't guess the color from the digits, and going one step deeper means adjusting all three values at once.
2. Writing it as hue, saturation and lightness. Hue is a position in degrees on a color wheel, saturation is how intense it is, lightness is how bright. Lower the lightness alone and you get a darker step of the same family, which makes building several steps from one color much easier.

Print uses a notation based on four inks instead. A screen builds color by adding light while print subtracts it with ink, so a color that looked vivid on a monitor comes out dull on paper.

One trap comes with the second notation. Identical lightness values don't look equally bright — put a yellow and a blue written at the same lightness side by side and the yellow reads far brighter. Build your steps on the numbers alone and measuring contrast ratio will turn up steps that fail.

Whichever notation you pick, the values don't get scattered through the code. Give each one a name and register it as a design token, and the design file and the code call the same name. Noa can take the button one step deeper without Theo transcribing a value.

"Give me the hex for that. Matching it by eye comes out different."

Hand over a value instead of a description.

"Let's build the palette in hue, saturation and lightness. The steps are far easier."

Make the family's steps by changing lightness alone.

"This is going to print, so the screen values don't carry over."

Ink shifts the color, so it needs the print notation instead.

Noa designs palettes in hue, saturation and lightness and records the settled values in hex alongside. The notation that's comfortable for designing isn't the one that goes into code.