1
00:00:01,200 --> 00:00:16,407
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.

2
00:00:16,548 --> 00:00:18,764
It's blue, the color of a link.

3
00:00:18,847 --> 00:00:23,791
In the style sheet, the browser uses the last line it understands.

4
00:00:23,991 --> 00:00:28,227
Each line was added because the line above it wasn't enough.

5
00:00:28,531 --> 00:00:43,053
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.

6
00:00:43,753 --> 00:00:48,569
The web's first color convention came before any color standard.

7
00:00:48,780 --> 00:00:58,728
In April nineteen ninety-three, the Mosaic browser made links blue and underlined, and visited links dark purple.

8
00:00:58,928 --> 00:01:00,145
Why blue?

9
00:01:00,321 --> 00:01:07,657
The reasons are unclear, but it stuck, and the browser defaults still carry those two colors today.

10
00:01:08,007 --> 00:01:10,455
Notice the accessibility problem?

11
00:01:10,805 --> 00:01:14,461
Blue against black text is a weak contrast.

12
00:01:14,729 --> 00:01:22,355
Despite this failure, the convention survived because links are also indicated by an underline.

13
00:01:23,055 --> 00:01:35,511
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.

14
00:01:35,814 --> 00:01:42,988
The value was a hash sign and six hex digits, two each for red, green and blue.

15
00:01:43,500 --> 00:01:47,365
There were no names yet, just numbers.

16
00:01:47,564 --> 00:01:57,489
That's the top of our color ladder: zero zero zero zero F F, no red, no green, all the blue there is.

17
00:01:57,688 --> 00:02:05,093
And numbers were exactly where the trouble started, because a number can specify a color the screen can't display.

18
00:02:05,794 --> 00:02:11,957
Many computers early on supported only eight-bit color: a mere two hundred fifty-six colors.

19
00:02:12,168 --> 00:02:23,741
The operating system kept some for itself, Windows reserved twenty, and Macs, Windows PCs and Unix workstations each filled their palettes differently.

20
00:02:23,941 --> 00:02:34,806
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.

21
00:02:34,970 --> 00:02:41,807
In hex that's zero zero, three three, six six, nine nine, C C and F F.

22
00:02:41,844 --> 00:02:48,518
Six times six times six is two hundred sixteen colors, available on every system.

23
00:02:48,821 --> 00:02:54,752
Our blue, zero zero zero zero F F, is one of them.

24
00:02:54,952 --> 00:03:05,051
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.

25
00:03:05,331 --> 00:03:08,743
Here's a lake sky with no exact match.

26
00:03:08,814 --> 00:03:10,997
Snapping breaks it into bands.

27
00:03:10,997 --> 00:03:18,356
Dithering rebuilds it from speckles, and makes the file bigger than the original, because speckles don't compress.

28
00:03:18,567 --> 00:03:27,308
Even the browsers' own link color, zero zero zero zero E E, isn't quite our blue and isn't on the palette.

29
00:03:27,449 --> 00:03:33,426
On an eight-bit screen it snapped to the nearest one: plain blue.

30
00:03:33,625 --> 00:03:42,447
In nineteen ninety-six the designer Lynda Weinman named and published the two hundred sixteen as the "browser-safe" palette.

31
00:03:42,658 --> 00:03:47,532
This palette is what web designers chose from for years.

32
00:03:47,732 --> 00:03:55,288
Then display hardware moved on to sixteen-bit color: five bits for red and blue, six for green.

33
00:03:55,685 --> 00:04:07,873
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.

34
00:04:08,270 --> 00:04:18,357
In two thousand, David Lehn and Hadley Stern of Razorfish tested the palette, and a mere twenty-two colors held everywhere.

35
00:04:18,498 --> 00:04:21,097
Most of those were greens.

36
00:04:21,298 --> 00:04:33,545
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.

37
00:04:33,663 --> 00:04:35,600
It isn't just history, though.

38
00:04:35,776 --> 00:04:44,632
It teaches a lesson about color: there's often a gap between the color you ask for and the color someone sees.

39
00:04:45,332 --> 00:04:55,930
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.

40
00:04:56,234 --> 00:05:02,397
That's how the web got papaya whip, peru, dodger blue and many other names.

41
00:05:02,597 --> 00:05:07,657
But no standard defined them, and they varied from browser to browser.

42
00:05:07,961 --> 00:05:12,835
Plain blue, the second line of our ladder, was in every list.

43
00:05:13,535 --> 00:05:18,177
When the standards caught up, they kept only sixteen of those names.

44
00:05:18,481 --> 00:05:35,708
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.

45
00:05:36,012 --> 00:05:38,495
The web tends to accrete.

46
00:05:38,694 --> 00:05:46,842
That's why green, on the web, is a dark green, and the bright green most people expect is called lime.

47
00:05:47,043 --> 00:06:05,640
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.

48
00:06:05,723 --> 00:06:08,891
Those are the next two lines of our ladder.

49
00:06:09,591 --> 00:06:21,954
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.

50
00:06:22,339 --> 00:06:27,585
From then on, a hex number meant a color in sRGB.

51
00:06:27,784 --> 00:06:31,730
Even then, the same numbers didn't look the same everywhere.

52
00:06:31,998 --> 00:06:45,453
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.

53
00:06:45,757 --> 00:06:59,013
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.

54
00:06:59,713 --> 00:07:02,927
CSS throws away a color it can't read.

55
00:07:03,138 --> 00:07:06,364
HTML's old color attributes never did.

56
00:07:06,505 --> 00:07:14,409
Browsers repaired whatever authors typed, and the HTML standard now defines the repairs, step by step.

57
00:07:14,713 --> 00:07:24,161
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.

58
00:07:24,362 --> 00:07:26,521
The joke has a real lesson.

59
00:07:26,521 --> 00:07:29,608
HTML guesses; CSS refuses.

60
00:07:29,645 --> 00:07:39,476
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.

61
00:07:39,629 --> 00:07:44,120
Get the color right, or your users see a color you never chose.

62
00:07:44,820 --> 00:07:55,964
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.

63
00:07:56,244 --> 00:08:01,374
Two lists had been merged, so dark gray is lighter than gray.

64
00:08:01,574 --> 00:08:08,944
CSS Color 3, in twenty eleven, also added H S L: hue, saturation, lightness.

65
00:08:09,179 --> 00:08:12,056
At last, numbers a person could reason about.

66
00:08:12,302 --> 00:08:25,814
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.

67
00:08:26,118 --> 00:08:29,552
Useful, but something better was coming.

68
00:08:30,253 --> 00:08:36,253
One name deserves an aside, as a reminder of the people who make the web.

69
00:08:36,627 --> 00:08:44,996
In twenty fourteen, Rebecca Meyer, the daughter of the CSS author Eric Meyer, died on her sixth birthday.

70
00:08:45,125 --> 00:08:57,906
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.

71
00:08:58,106 --> 00:09:11,885
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.

72
00:09:12,166 --> 00:09:17,493
When you build for other people, make your own choices on purpose.

73
00:09:18,192 --> 00:09:22,242
Color science finally brought the numbers closer to people.

74
00:09:22,511 --> 00:09:32,227
In twenty twenty, Björn Ottosson published Oklab, a color space fitted to how people see, simple enough to compute per pixel.

75
00:09:32,496 --> 00:09:40,319
Its polar form, O K L C H, has three knobs: lightness, chroma, and hue.

76
00:09:40,519 --> 00:09:43,605
Equal numbers now look like equal steps.

77
00:09:43,805 --> 00:09:47,680
Two colors at the same lightness carry the same weight.

78
00:09:47,973 --> 00:09:57,352
A gradient through O K L C H stays colorful where an sRGB gradient goes gray in the middle.

79
00:09:57,552 --> 00:10:06,351
Every current browser supports it, so beyond a quick named color, write your colors in O K L C H.

80
00:10:07,050 --> 00:10:08,441
And just in time.

81
00:10:08,617 --> 00:10:17,845
Phones and laptops now show Display P3, a gamut about a third larger than sRGB on this diagram, mostly in greens and reds.

82
00:10:18,021 --> 00:10:23,929
O K L C H can name those colors, and colors no screen can show at all.

83
00:10:24,129 --> 00:10:30,640
This video was made in sRGB, so the P3 green you're looking at isn't P3.

84
00:10:30,851 --> 00:10:38,454
It's the nearest color the video can carry: the web-safe palette's problem, thirty years later.

85
00:10:39,154 --> 00:10:55,894
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.

86
00:10:56,094 --> 00:11:04,033
And every rung still works, so a rule can name the best color first and fall back gracefully.

87
00:11:04,430 --> 00:11:07,377
The color you ask for is a request.

88
00:11:07,518 --> 00:11:11,626
Good color on the web is making that request well.

89
00:11:11,826 --> 00:11:17,815
And even with all this right, there's one more variable: the people themselves.

90
00:11:17,840 --> 00:11:27,765
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.

91
00:11:28,069 --> 00:11:30,098
Plan for that variability.

92
00:11:30,182 --> 00:11:33,581
It's the ultimate rule of web development.