https://css-tricks.com/new-css-color-features-preview/
I was just writing in my “What’s new in since CSS3?” article about recent and possible future changes to CSS colors. It’s weirdly a lot. There are just as many or more new and upcoming ways to define colors than what we have now. I thought we’d take a really quick look.
First, a major heads up. This stuff is so complicated. I barely understand it. But here are some aspects:
rgb() function mapped that RGB color model as a cube with linear coordinates, the hsl() function mapped that RGB color model as a cylinder) but it was all sRGB gamut.I can’t personally educate you on all the nitty-gritty details — I’m writing this because I bet there are a lot of you like me, wondering why you should care at all about this, and this is my attempt to understand why I should care about all of it.
body {
background: color(display-p3 1 0.08 0); /* super red! */
}
It turns out that modern monitors can display way more colors, particularly extra vibrant ones, but we just have no way of defining those colors with classic CSS color syntaxes, like HEX, RGB, and HSL. Super weird, right?! But if you use Display-P3, you get a wider range of access to these vibrant colors.
That white line in Safari DevTools is showing us the “extra” range of Display-P3
The dev shop Panic latched onto this early on and started using these colors as a “secret weapon”:
🌈 Along with WebGL, p3 colors are now a big part of the Panic website secret weapon pile. Shh, don’t tell anyone, but you should see this page on an iMac Pro screen! https://t.co/glrhPNuCdR
Jen Simmons also covers how to use them, including a fallback for non-supporting browsers:
Display P3 color. Designing in the browser. Amazing. Let me show you how to switch over to P3, find a color, and then find a fallback color for older browsers. All while working inside Safari Web Inspector. (Turn sound on to hear me explain!) pic.twitter.com/AaKhrn2s3e