Important

This slide deck was created for use in a controlled environment, during a talk. It works best with a recent Firefox at 1920x1080. It WILL LIKELY NOT work correctly in other browsers, due to limited support for css variables at this time. But the other browsers will catch up. Right? Right??!!

Color at W3C
20 years of pain

Chris Lilley

me

Hello!
I’m Chris or @svgeesus

Technical Director at W3C
Strategy lead, Core Web Technologies

Started SVG (1996)

SVG WG Chair (1998-2006)

Co-authored PNG (1996)

WebFonts

Topics for today

The Prehistoric Web

CRT monitor

Indexed-color displays
16 color VGA displays. 256 colors common.
“Truecolor” for the lucky few
Gamma mayhem
Mac: 2.6/1.45 = 1.79
SGI: 2.4/1.7 = 1.4
PC, Unix: 2.2 (ish)

W3C Print Workshop

sRGB proposal

Cascading Style Sheets

CSS1 uses sRGB

Color management

Color Management arrives
Mac: ColorSync
Win95/NT: KCMS (aftermarket)
Win98/2000: ICM
WinXP: ICM 2.0
Linux/GNOME: GNOME Color Manager
Linux/KDE: colord-kde

Success!

Not so fast

Perhaps printing?

Browsers
CMS not ubiquitous
Printing
CMS assumed

SVG Print

color-interpolation

rendering-intent

SVG Color

CSS Color

CSS Color 4

What changed?

CSS3 Color

fill: rgb(243, 214, 155);
// looks fine on wide gamut, 
// too pale on sRGB

MQ4 hack

@media dci-p3 {
fill: rgb(243, 214, 155);
}
// hack in a better match for sRGB
fill: rgb(248, 207, 133);
// ewww, really?

LCH is device independent

fill: lch(85.5 43.1 79.1);
// browser calculates rgb for your screen

CIE Hue, Chroma (LCH)

LCH in CSS Color 4

background: lch(50 0 0);
border-color: lch(65 30 180 / 50%);
color: lch(55.3 84.5 10.25, #F06);

CIE a & b

Lab a scale Lab b scale

Lab in CSS Color 4

background: lab(50 0 0);
border-color: lab(65 46 -8 / 50%);
color: lab(55.3 83.1 15.0 / 75%, #F06);

ICC Color in CSS Color 4

Default sRGB colorspace

Predefined display-p3 and rec2020 wide gamut RGB spaces

background: color(display-p3 1.0 0.0 0.5);
background: color(display-p3 .2 .14 .63 / 33%);

Media Queries 4 can check for p3 or rec2020 support

CMYK: ICC Color in CSS Color 4

At-rule (like @font-face) points to ICC profile

background: color(foo 0 .81 .23 .47); //cmyk
@color-profile foo {
src: url('http://example.org/fooprinter-coated.icc');
}

Future challenges

Working color space
sRGB default, for Web compatibility
scRGB? Lab?
Compositing
sRGB default, for Web/Photoshop compatibility
Porter-Duff compositing operators
High Dynamic Range
Driven by movie & TV industries
Rec.2020, PQ or HLG transfer function
Compositing SDR & HDR
iccMAX for HDR
Expert review
W3C Colorweb Community Group
W3C joins ICC