As part of finishing up work on the 4th Edition of Resposive Web Design with HTML5 and CSS I needed to give the promotional site, https://rwd.education a lick of fresh paint.

There is a whole chapter in the latest edition on color, covering Lab, Display P3 and all the new color functions coming our way. As such, it seemed a little remiss if I didn’t include a little Display P3 goodness on the promotional site.

Progressively enhancing with Display P3 is no harder than with any other color format of old (any of you remember when just enhancing with HSLA over HEX was a thrill?) so for odd declarations, it’s easy enough to do:

.thing {
        background-color: #f90;
        background-color: color(display-p3 1 0.716 0.005);
    }

And non Display P3 capable browsers like Chrome make do with the hex value while Safari, displays a more vibrant orange in the Display P3 space.

So far so good, but who wants to do that every single time they define a color?

Now we have custom properties, it couldn’t be easier:

:root {
    --hl1: #b50404;
    --hl2: #089df4;
    --r1: #ad2486;
    --r2: #d78437;
    --r3: #f2bc09;
    --r4: #aaaf44;
    --r5: #5da183;
    --r6: #1d96b9;
    --r7: #1c61c2;
    --r8: #ee692c;
}

@supports (color: color(display-p3 0.55 0.19 0.71)) {
    :root {
        --hl1: color(display-p3 1 0 0.218);
        --hl2: color(display-p3 0 0.487 1);
        --r1: color(display-p3 0.685 0.008 0.805);
        --r2: color(display-p3 1 0.684 0);
        --r3: color(display-p3 1 0.902 0);
        --r4: color(display-p3 0.639 0.87 0.03);
        --r5: color(display-p3 0 0.935 0.63);
        --r6: color(display-p3 0 0.862 0.935);
        --r7: color(display-p3 0.005 0.428 1);
        --r8: color(display-p3 1 0.716 0.005);
    }
}

We define all our colors once as custom properties, and then override them with display-p3 versions in browsers that support display-p3.

Then setting your color is done just once:

.thing {
    background-color: var(--r8);
}

And just like that, you have the right format for the right device.