What changed?
- Adobe RGB and the SLR crowd
- P3 and Apple
- Wide gamut, HDR TV/movies
- Mobile CMS
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 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');
}
