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??!!

The Evolution of CSS4 Color

Chris Lilley

me

Hello!
I’m Chris or @svgeesus

Technical Director at W3C
(Interaction Domain)

Started SVG (1996)

SVG WG Chair (1998-2006)

Co-authored PNG (1996)

WebFonts

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);

Topics for today

Basics

prism
Light
wavelengths visible to humans

Visible spectrum

visible spectrum

Human eye

Retinal cells: rods & cones

retinal cells

Cone response to light

cone responses

Cone responses (log scale)

cone responses

Human brain

Opponent colors

Opponent colors

Opponent colors

Opponent colors

What color is white?

white paper under tungsten light

What color is white?

the famous dress
Color
a subjective sensation in the brain caused by visible light acting on the eye
Whaaaaat!?!
So we need, like, spectral data! And electrodes in the brain and and and (collapses, sobbing)

Science to the rescue!

Measurement

Spectral measurement

luminous efficiency function

Brightness varies by wavelength

luminous efficiency function
Visual match
Two colors that look identical can have wildly different spectra

Color matching

color mixing
Matching color
Can be defined with just three numbers. Full spectral data is not needed.
CIE XYZ
Gets rid of the negative numbers
Y is the luminance
Additive colorspace
Luminance gradient
XYZ issues
Not perceptually uniform
XYZ issues
White adaptation not handled

CIE Lab

CIE Lightness (L)

Luminance scale

CIE Luminance (Y)

Luminance scale

CIE a & b

Lab a scale Lab b scale

CIE Lab

CIE Hue, Chroma (LCH)

What about HSL?

HSL diagram

Color displays

Characterization
Measure the color of red, green & blue at different levels (0…255)
Calibration
Correct imbalances to give neutral grays, known whitepoint
Gamut
The range of colors that can be correctly displayed.

Chromaticity diagram

CIE 1931 chromaticity diagram

sRGB gamut

2013 MacBook Air

DCI P3 gamut

Device dependent
Same RGB value gves different colors on different displays
Device independent
Can be displayed accurately, if in gamut

CMYK

Color patches

ICC profiles
Store the measured data of a device, allowing conversion to a profile connection space (XYZ or Lab).

CSS4 Color

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

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');
}

Can I use it?

No.
This is not in the browsers yet
Safari Nightly, now
Early days yet
First Public Working Draft, Tues 5 July 2016