# A Colorful History of the Web — narration script

Runtime 11:38. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode.

## 0:00 · One color, six ways

- `0:01` These lines say the same thing six times: six hex digits in an HTML attribute, a name, three hex digits, three decimal numbers, a hue and lightness, and finally oklch. It's blue, the color of a link. In the style sheet, the browser uses the last line it understands.
- `0:23` Each line was added because the line above it wasn't enough. Read from top to bottom, they're a history of web color, and a history of one problem: the color you ask for is not always the color the screen shows and certainly not what a user might perceive.

## 0:43 · Blue before any standard

- `0:43` The web's first color convention came before any color standard. In April nineteen ninety-three, the Mosaic browser made links blue and underlined, and visited links dark purple.
- `0:58` Why blue? The reasons are unclear, but it stuck, and the browser defaults still carry those two colors today. Notice the accessibility problem? Blue against black text is a weak contrast. Despite this failure, the convention survived because links are also indicated by an underline.

## 1:22 · Six hex digits

- `1:23` Authors got their first say over color in nineteen ninety-five, from Netscape 1.1: bgcolor and text attributes on the body of the page, plus link colors. The value was a hash sign and six hex digits, two each for red, green and blue. There were no names yet, just numbers.
- `1:47` That's the top of our color ladder: zero zero zero zero F F, no red, no green, all the blue there is. And numbers were exactly where the trouble started, because a number can specify a color the screen can't display.

## 2:05 · 216 colors you could count on

- `2:05` Many computers early on supported only eight-bit color: a mere two hundred fifty-six colors. The operating system kept some for itself, Windows reserved twenty, and Macs, Windows PCs and Unix workstations each filled their palettes differently.
- `2:23` So the browsers sampled the color space in even steps: zero, twenty, forty, sixty, eighty and a hundred percent of each of red, green and blue. In hex that's zero zero, three three, six six, nine nine, C C and F F. Six times six times six is two hundred sixteen colors, available on every system. Our blue, zero zero zero zero F F, is one of them.
- `2:54` Any other color was snapped to the nearest of the two hundred sixteen, or dithered: drawn as a pattern of nearby colors that the eye blends. Here's a lake sky with no exact match. Snapping breaks it into bands. Dithering rebuilds it from speckles, and makes the file bigger than the original, because speckles don't compress. Even the browsers' own link color, zero zero zero zero E E, isn't quite our blue and isn't on the palette. On an eight-bit screen it snapped to the nearest one: plain blue.
- `3:33` In nineteen ninety-six the designer Lynda Weinman named and published the two hundred sixteen as the "browser-safe" palette.  This palette is what web designers chose from for years.
- `3:47` Then display hardware moved on to sixteen-bit color: five bits for red and blue, six for green. Those levels don't land on the web-safe steps, so nearly every safe color had to be shifted, and browsers shifted an image and a background of the same color differently. In two thousand, David Lehn and Hadley Stern of Razorfish tested the palette, and a mere twenty-two colors held everywhere. Most of those were greens.
- `4:21` The palette's day was over, though oddly it lives on as a ready-made grid in color pickers, where the problem isn't reproduction anymore but too much choice. It isn't just history, though. It teaches a lesson about color: there's often a gap between the color you ask for and the color someone sees.

## 4:44 · Names from the X Window System

- `4:45` Hex is hard to read, and browsers soon accepted names too, many from the X Window System, the Unix graphics system the first browsers were built on. That's how the web got papaya whip, peru, dodger blue and many other names.
- `5:02` But no standard defined them, and they varied from browser to browser. Plain blue, the second line of our ladder, was in every list.

## 5:13 · The standards define sixteen

- `5:13` When the standards caught up, they kept only sixteen of those names. CSS, in December nineteen ninety-six, and HTML three point two, a month later, chose the colors of the Windows VGA palette: the sixteen colors of a PC graphics card, though most of the other colors will still work today. The web tends to accrete.
- `5:38` That's why green, on the web, is a dark green, and the bright green most people expect is called lime.
- `5:47` CSS also added two new ways to write numbers: three hex digits as a shorthand, so zero zero zero zero F F became zero zero F, every web-safe color fitting neatly; and R G B with decimal numbers: zero, zero, two fifty-five. Those are the next two lines of our ladder.

## 6:09 · A default space

- `6:09` The same year, Hewlett-Packard and Microsoft proposed sRGB, a standard color space based on the monitors of the time, and CSS adopted it a month later. From then on, a hex number meant a color in sRGB.
- `6:27` Even then, the same numbers didn't look the same everywhere. Macs used a display gamma of one point eight and PCs two point two, so a page designed on a Mac looked darker on a PC, until Apple switched to two point two in two thousand nine. The specifics aren't the lesson; the lesson is that a screen influences what people see and since your display won't be the user's display expect some differences.

## 6:59 · Every string is a color

- `6:59` CSS throws away a color it can't read. HTML's old color attributes never did. Browsers repaired whatever authors typed, and the HTML standard now defines the repairs, step by step. Feed it Chuck Norris, and the letters that aren't hex digits become zeros, the string is split in three, and you get a dark red.
- `7:24` The joke has a real lesson. HTML guesses; CSS refuses. Type zero zero F without its hash sign and HTML gives you near-black; CSS would ignore the bad line and keep the one before it. Get the color right, or your users see a color you never chose.

## 7:44 · 147 names and a hue wheel

- `7:44` SVG wrote the browsers' whole list into a standard in two thousand one, and it was later adopted by CSS: a hundred forty-seven names, quirks included. Two lists had been merged, so dark gray is lighter than gray.
- `8:01` CSS Color 3, in twenty eleven, also added H S L: hue, saturation, lightness. At last, numbers a person could reason about. But H S L is arithmetic on the R G B cube, not a model of vision: our blue and this yellow both claim fifty percent lightness, and the yellow sends thirteen times the light. Useful, but something better was coming.

## 8:29 · the web by people, for people

- `8:30` One name deserves an aside, as a reminder of the people who make the web. In twenty fourteen, Rebecca Meyer, the daughter of the CSS author Eric Meyer, died on her sixth birthday. The web community asked for a color in her memory, and the CSS Working Group added rebecca purple, six six three three nine nine, the hundred forty-eighth name.
- `8:58` Web technology is full of choices like that, made by people: a link blue Tim Berners-Lee calls just a default, a palette a designer named, a color named for a child. When you build for other people, make your own choices on purpose.

## 9:17 · Color as people see it

- `9:18` Color science finally brought the numbers closer to people. In twenty twenty, Björn Ottosson published Oklab, a color space fitted to how people see, simple enough to compute per pixel. Its polar form, O K L C H, has three knobs: lightness, chroma, and hue.
- `9:40` Equal numbers now look like equal steps. Two colors at the same lightness carry the same weight. A gradient through O K L C H stays colorful where an sRGB gradient goes gray in the middle.
- `9:57` Every current browser supports it, so beyond a quick named color, write your colors in O K L C H.

## 10:06 · More color than sRGB

- `10:07` And just in time. Phones and laptops now show Display P3, a gamut about a third larger than sRGB on this diagram, mostly in greens and reds. O K L C H can name those colors, and colors no screen can show at all.
- `10:24` This video was made in sRGB, so the P3 green you're looking at isn't P3. It's the nearest color the video can carry: the web-safe palette's problem, thirty years later.

## 10:38 · Read your rule backwards

- `10:39` Every rung on this ladder fixed a limit of the one before: numbers no one could read, too few colors on screen, names no standard defined, hues that ignored the eye, lightness that wasn't lightness.
- `10:56` And every rung still works, so a rule can name the best color first and fall back gracefully. The color you ask for is a request. Good color on the web is making that request well.
- `11:11` And even with all this right, there's one more variable: the people themselves. Some of your users see color differently than you do, some don't see it at all, and all of them see it in rooms and on screens you'll never know. Plan for that variability. It's the ultimate rule of web development.