DEV Community

Taking colors to the next (CSS) level

Ingo Steinke, web developer on February 08, 2022

"CSS4" will make even brighter colors available to web designers and developers. Like parent selectors, the upcoming CSS Level 4 Color proposal was...

Read full post

Temani Afif • Feb 8 '22

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 • Feb 8 '22

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 • Feb 8 '22

"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 • Feb 8 '22 • Edited

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 • Feb 8 '22

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

Ingo Steinke, web developer • Feb 8 '22

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

Ingo Steinke, web developer • Oct 24 '23 • Edited

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 • Oct 27 '23 • Edited

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 • Feb 8 '22

"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 • Feb 10 '22 • Edited

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 • Feb 16 '22

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?