cft

More, and More Colourful, Web Colours

CSS4 will make even brighter colours available to web designers and developers.


user

Ingo Steinke

2 years ago | 2 min read

"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.

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

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.

Old color palettes: IBM CGA, Commodore, Adobe color Picker with “Only Web colors” checkbox

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 colur(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 colorshex colorsrgb(), 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 prefer named colors for demos and debugging, otherwise, like in front-end web dev projects, I would use a color picker or copy the color values I got from a designer.

Screenshots of color pickers and colors as css variables

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.

Upvote


user
Created by

Ingo Steinke

I am Ingo Steinke, a human being on this planet, trying to make the world a better place.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles