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 Temani @afif for pointing it out, and thanks to @grahamthedev 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.

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

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) only as the rightmost digit in a hexadecimal number. 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.

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.

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!

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.

Comments

[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)

[Ingo Steinke, web developer]

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.

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

[Ingo Steinke, web developer]

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.

[GrahamTheDev]

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

[Ingo Steinke, web developer]

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

[Ingo Steinke, web developer]

Another helpful detail that might not be obvious: there is no need for a feature query like @supports (color: color(display-p3 1 0.5 0). As Robin Rendle showed on CSS-Tricks.com we can prepend a fallback color, so our new p3-color will be treated as a progressive enhancement, ignored by browsers that don't support this syntax:

.foo {
  color: orange;
  color: color(display-p3 1 0.5 0);
}

In case the video hardware doesn't support the color, it should fall back to a similar color that can be displayed using a gamut reduction as specified by the High Dynamic Range and Wide Gamut Color note, if I understand it correctly.

If we're not sure about our current browser, we could use an Apple Safari browser on a remote MacBook via BrowserStack, and open its devtools by right-clicking to "inspect" this codepen. Update: current Gnome Web, Chromium and derived browsers like Vivaldi or Google Chrome also have this inspector. But it only appears when inspecting a (p3) color() function, otherwise, there will be a classic RGB color picker.

My Linux Chrome screen does not show any difference of color beyond the marked line, and I can't even tell if my RGB screenshot would when viewed on another hardware. So I might be surprised if I used this color in production. 😲

PhpStorm 2023.2.3 does not show color previews or fallbacks yet.

[Ingo Steinke, web developer]

How to convert RGB notation to display-p3? David Darnes has a pramatic approach in his blog: darn.es/using-display-p3-colour/

RGB channels range from 0 to 225 and Display-P3 0 to 1 so it's not going to take much work to do the maths or so it seems. But that's a "cheap" approximation, as it shifts the color more towards the extended P3 colour space, so don't use it for brand colors!

David quotes a function assumes hex colors (not rgb(a)) in eleventy or a similar JAMstack site generator, but we can use adapt to any other environment.

const hexToP3 = (string) => {
    const aRgbHex = string.replace("#", "").match(/.{1,2}/g);
    const aRgb = [
        (parseInt(aRgbHex[0], 16) / 255).toFixed(2),
        (parseInt(aRgbHex[1], 16) / 255).toFixed(2),
        (parseInt(aRgbHex[2], 16) / 255).toFixed(2),
    ];
    return `color(display-p3 ${aRgb.join(" ")})`;
};

This is good enough for some manual adaptions prior to using the extended color picker. The shift toward the p3 spectrum might be formally incorrect, but it might go into the right direction in our specific use case. What's the point of converting RGB to p3 if we don't want to alter the original color?

Parse an existing code block of hex RGB custom properties in JS on Codepen, assuming lines end with #aabbcc; notation:

Follow-up post: Generate P3 Color Variations from RGB Hex Values

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

[Ingo Steinke, web developer]

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)

[Ingo Steinke, web developer]

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?