More, and More Colourful, Web Colors

This story was first published at open-mind-culture.org and republished as CSS4 Colors in Ingo Steinke’s DEV blog.

More, and More Colourful, Web Colors

CSS4 will make even brighter colours available to web designers and developers. Like parent selectors, the upcoming CSS Level 4 colour proposal was first implemented in Safari. But before we dive deeper into the details, let’s make it clear that “CSS4” does not exist, thanks to Temani Afif for pointing it out.

CSS has no Version Numbers

I added a link to the discussion about “CSS4” on CSS-Tricks.com. Of course, there is no “CSS4” in the same strict sense that there has never been “MPEG 3” or “Web3” either. But like Peter-Paul Koch and others have suggested, “CSS4” might help to make CSS more popular. But on the other hand, I recently got quite upset about the so-called “Web3” discussion which inspired Hidde de Vries to his excellent post that the web doesn’t have version numbers.

Brighter Color Spaces

Looking back at the old colour palettes, like IBM CGA, Commodore 64, and the Adobe Photoshop color picker with its “Only Web colors” checkbox, choosing from over 16 million RGB colours using 6-digit or even 8-digit) hex codes, web designers may think that they had all the colors of the world.

But although we already have millions of colors in our browsers, it’s the brightest colors that have been missing!

With the new color functions, we can use color(display-p3), and also lab() and lch() to go beyond the sRGB color space.

The previously available syntax defined colors in sRGB color space. Named colors, hex colors, rgb(), and even hsl() color notations are all limited to the sRGB color space up to CSS3.

.srgb-color-syntax {
  background-color: wheat;
  border-color: #ffea21;
  color: rgba(12, 200, 128, 0.2);
  text-decoration-color: hsl(0 100% 50% / 0.5);
}

.wide-gamut-color-syntax {
  background-color: lab(80% 100 50);
  border-color: lch(80% 100 50);
  color: color(display-p3 1 0.5 0);
}

The color space Display-P3 is a superset of sRGB. It is around 50% larger, including very bright and colorful values that have not been possible to define in CSS until now.

https://www.smashingmagazine.com/2021/11/guide-modern-css-colours/

How to use CCS4 P3 colors

How would we use the new colors?

How to use Color Syntax anyway?

Well, how did we use the old ones? Although I can modify existing RGB colors and I have a rough understanding of additive color mixing and hexadecimal numbers, I would not use hex color notation from scratch.

I use named colors for demos and debugging, otherwise, I would use a color picker or copy the color values I got from a designer.

Then I would define common colors using custom properties or SCSS variables so that I don’t have to bother with every subsequent page or component.

:root {
  --brand-background: #4081c3;
  --brand-primary: color(display-p3 1 0.5 0);
}

or in SCSS

$brand-background: #4081c3;
$brand-primary: color(display-p3 1 0.5 0);

Now we can use the new colors just like any other color in web development. Only difference, and a great improvement: now we can ship nicer websites with even brighter colors to our customers!

This article was first published at open-mind-culture.org and republished as CSS4 Colors in my DEV blog.

Check my DEV blog series What’s next in CSS for more colourful, creative, and technical insights about new and improved stylesheet features.