DEV Community

Cover image for Taking colors to the next (CSS) level
Ingo Steinke
Ingo Steinke

Posted on • Updated on

Taking colors to the next (CSS) level

"CSS4" will make even brighter colors available to web designers and developers. Like parent selectors, the upcoming CSS Level 4 Color 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 @afif for pointing it out, and thanks to @inhuofficial for suggesting the new title!

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" (MP3) or "Web3" either. But like @ppk and others have suggested, "CSS4" might help to make CSS more popular. On the other hand, I recently got quite upset about the so-called "Web3" discussion which inspired @hidde to his excellent post that the web doesn't have version numbers.

Brighter Color Spaces

Looking back at the old color palettes, like IBM CGA, Commodore 64, and the Adobe Photoshop color picker with its "Only Web Colors" checkbox, choosing from over 16 million RGB colors 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 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);
}
Enter fullscreen mode Exit fullscreen mode

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-colors/

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.

#ff22aa == #f2a; The first ones are red, the last ones are blue, "f" means fifteen,"a" means ten, both is more than two,  so I'd expect a purple color.

Thanks to @yutamago for pointing out that a single "f" means "fifteen" (which is even easier to keep in mind than what I mistakenly wrote before) and that my pragmatic approach is an oversimplification of the actual values: "f" is a shortcut for "ff" in this example, the hexadecimal notation of 255, which is the highest possible unsigned integer that can be stored as a 16-bit value. Hope I got this one right now.

But you see my point: those values are not supposed to be read and written by humans without using tools.

I prefer named colors for demos and debugging. Otherwise, like in front-end web 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);
}
Enter fullscreen mode Exit fullscreen mode

or in SCSS

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

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!

Note: this article was first published as more, and more colourful, web colours in British English and it's also available in German as mehr und buntere Webfarben. It has been republished my medium and Tealfeed.

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

Discussion (9)

Collapse
afif profile image
Temani Afif

a small rectification: it's "CSS Colors Level 4" and not "CSS4" or "CSS4 Colors". CSS4 doesn't exist. It's the color module at Level 4 and it can increase to Level 5, Level 6 and so on but CSS will remain CSS (no CSS3 or CSS4 or CSS5)

Collapse
ingosteinke profile image
Ingo Steinke Author

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 @ppk and others have suggested, "CSS4" might help to make CSS more popular, I am trying out different publishing techniques, including clickbait headlines and (over)using hashtags.
I agree with you in general, and I recently got quite upset about the so-called "Web3" discussion which inspired @hidde to his excellent post that the web doesn't have version numbers.

Collapse
afif profile image
Temani Afif

"CSS4" might help to make CSS more popular, I am trying out different publishing techniques, including clickbait headlines and (over)using hashtags. --> well, I strongly disagree with this. It won't make CSS popular, it will simply create more confusion especially for new learner. Using "missleading" information for popularity is not a good thing.

New developers reading your article or similar ones will be "Oh, I have to drop CSS3 and start learning CSS4" and this confusion will never end because they will start googling about "CSS4" and all they will get is more confusion between articles saying it doesn't exist and other articles claiming it does. You can even find Job Posts wanting people to have experience in CSS4 which, of course, doesn't make sense.

I cannot talk about the "web3" hype but CSS is different because with CSS we had versions until CSS3 where the versioning system changed and is now applied per module instead of the whole language. We don't have CSS4 but we will have Flexbox 3 and CSS Grid 4, Colors 5, CSS selectors 6 and so on.

Thread Thread
ingosteinke profile image
Ingo Steinke Author • Edited on

I should make a post "Can I use CSS4 in Web3"? No, just trying to be funny. I changed the title to "more, and more colorful, web colors" like I already did in my original blog post.

We don't have CSS4 but we will have Flexbox 3 and CSS Grid 4, Colors 5, CSS selectors 6 and so on.

As long as it's backward compatible, I will keep promoting the concept of progressive enhancement as one of the best features of CSS as a language, especially compared to --JavaScript-- ECMAScript.

Another buzzword proposal was "CSSnext". Maybe "latest" might also be appropriate.

Thread Thread
inhuofficial profile image
InHuOfficial

What about "taking colours to the next (CSS) level", clickbaity and truthful all at the same time (my speciality!)

Thread Thread
ingosteinke profile image
Ingo Steinke Author

Thanks for the brilliant suggestion! I will translate it to American English and use it as the new title.

Collapse
yutamago profile image
Yutamago

"f means sixteen, a means ten"

Yes and no. In this example you're looking at #f2a, wherein f is shorthand for ff (which you correctly demonstrate) and therefore does not mean 16 but 255.
And the hex value f alone would be 15 in decimal instead of 16. Remember the word hexadecimal literally stands for 16 numbers, from 0 until 15. You cannot represent a value of 16 in one digit.

Collapse
ingosteinke profile image
Ingo Steinke Author • Edited on

absolutely right, it's fifteen, not sixteen! off by one error, still good enough for a rough pragmatic estimation, but factually wrong anyway. Thanks for pointing out!

"f means fifteen" is even easier to remember!

f like "fifteen"
d like "dreizehn" (German for thirteen)
c like "zwΓΆlf" (at least phonetically, again in German)

Collapse
ingosteinke profile image
Ingo Steinke Author

I still wonder how to test new Safari features on Linux - or even on an Apple device.
I have a MacBook build in 2010, still a useful laptop, that doen't get the latest Safari browser. I have an old iPhone, used only for testing, that doesn't get the latest Safari.

I installed Gnome Web which seems to be the closest to AppleWebkit, but it does not offer the latest features like CSS parent selectors or color display-p3 in the current version (3..38.6.19-gbbc62f3e1 powered by WebKitGTK 2.34.3 on Ubuntu Budgie / focal 20.04.3 LTS) which shows a copyright note from 2020 anyway.

Hackintosh looks like a promising solution to run an actual Apple operating system in a VirtualBox even on a Linux PC, but I'm not quite sure how to obtain a valid license and actually make it work, but I did not have time nor priority so far.

Are there any other solutions to run a browser with the latest AppleWebkit engine on Linux?