A Preview of 4 New CSS Color Features

This article explores the latest changes in the CSS color field and possible future changes, with a surprising amount of content. New and upcoming methods for defining colors are in the number of ways that are even greater than existing ones. Let's take a quick look.

First of all, it is important to emphasize that these contents are very complex. I personally find it difficult to fully understand. But here are some key points:

• Until all the upcoming changes, we only have RGB as the color model, and everything is based on that.
• We have different "color spaces" to handle it differently (for example, the rgb() function maps the RGB color model to a cube with linear coordinates, the hsl() function maps the RGB color model to a cylinder), but they all belong to the sRGB color gamut.
• With the upcoming changes, we will get a new color model and (!) we will get a new function that maps that color model in different ways. So I think it's a double or even triple blow.

I can't explain all the details to you in detail – I'm writing this because I believe a lot of people, like me, want to know why we should care about this, and that's what I'm trying to understand why I should care about this.

Display-P3 turns on more bright colors that were previously unexpressible.

 body {
  background: color(display-p3 1 0.08 0); /* Super red! */
}

It turns out that modern monitors can display more colors, especially extra bright colors, but we just don't have a way to define these colors using classic CSS color syntax such as HEX, RGB, and HSL. Very strange, right? ! But if you use Display-P3, you can access these bright colors more widely.

Development company Panic noticed this early on and began using these colors as "secret weapons":

? In addition to WebGL, p3 color is now an important part of the Panic website’s secret weapon stack. Shh, don't tell anyone, you should view this page on the iMac Pro screen! https://www.php.cn/link/f08c64512c2ce6b9642b58563e9c029b

— Panic (@panic) May 24, 2019

Jen Simmons also describes how to use them, including fallback options for unsupported browsers:

Display P3 color. Designed in the browser. marvelous.

Let me show you how to switch to P3, find a color, and then find a fallback color for older browsers. All operations are performed in Safari Web Inspector. (Open the sound and listen to my explanation!) pic.twitter.com/AaKhrn2s3e

— Jen Simmons (@jensimmons) January 5, 2022

resource

• CSS Wide Gamut Colors Using Display-P3 (WebKit Blog)
• The ever-expanding color gamut on the Internet (Ollie Williams)

HWB is more "human" but that's a bit debatable, and it's still based on sRGB.

I didn't know what hwb() is before - thanks to Stefan Judis's blog post.

I usually think of HSL as a "humanized" CSS color format (and suitable for program control), because, well, operating a 360° hue and 0-100% saturation and brightness have some obvious significance.

But in hwb() we have the hue (I think the same as HSL), then the whiteness and blackness . Stefan:

Adding white and black to the color will affect its saturation. Assume you add the same amount of white and black to the color, the color tone remains the same, but the color loses saturation. This works for up to 50% white and 50% black (hwb(0deg 50% 50%)), which results in non-color colors.

Stefan doubts whether this is easier to understand than HSL, and I tend to agree. I might just need to get used to it more, but it seems to be more abstract than simply changing the brightness or saturation.

HWB is limited to the same color gamut (sRGB) as all old color formats. No new colors are unlocked here.

resource

• HWB Color Selector
• hwb() – Humanized color notation? (Stefan Judis)

LAB is like a rgb() with a wider color gamut

 div {
  background: lab(150% -400 400);
}

When I asked around, I like Eric Portis’ explanation of LAB:

LAB is like RGB, it has three linear components. The lower the number means the fewer the thing, and the larger the number means the more the thing. So you can use LAB to specify the brightest, greenest green ever, which will be very bright and green for everyone, but will be brighter and greener on monitors with a wider color gamut.

So we get all the extra colors, which is great, but there is another problem with sRGB (besides the limited color expression), that is, it is not perceptually unified . Brian Kardell:

The sRGB space is not perceptually unified. The same mathematical movements have different degrees of perceptual effects at different positions in the color space. If you want to read about the designer’s experience with this, here is an interesting example that illustrates the process of working hard to do well.

A classic example here is that in HSL, colors with exactly the same "brightness" actually feel completely different.

HSL and LAB:: Brightness?

The same color from our tricky color vote, but this time I showed the LAB version of the same color. Please note how close the brightness value of LAB is to the results we voted for!

? Not all the color spaces are the same! https://www.php.cn/link/ff15242553d87dd31723dcd88a087382 pic.twitter.com/xkEguq3KZG

— Adam Argyle (@argyleink) December 3, 2019

But in LAB it is obviously perceptually unified, which means that manipulating colors programmatically is a more reasonable task. Another benefit is that the LAB color is specified as device-independent. Michelle Barker:

LAB and LCH are defined in the specification as device-independent colors . LAB is a color space that can be accessed in software like Photoshop, and it is recommended if you want the color on the screen to be the same as the ones printed on a T-shirt, for example.

resource

• lab() (MDN)
• Guide to using modern CSS colors for RGB, HSL, HWB, LAB, and LCH (Michelle Barker)

LCH is like hsl() with a wider color gamut

Remember when I said HSL is “human” because it’s easier to understand than RGB? Changing hue, saturation, and brightness makes sense. lch() Similar to this, we have brightness , chromaticity , and hue . Going back to my conversation with Eric Portis:

LCH is more like HSL: a polar coordinate space. H = Hue = A circle. So doing math to choose complementary colors (or whatever transformation you are after) becomes trivial (just add 180—or any other value!)

I think you would choose LCH just because you like its syntax, or because it makes some of the complex programmatic operations you are trying to perform easier - and you know it expresses over 50% of the colors for free.

We also gain perceived unity here. Lea Verou seems excited that brightness actually makes sense:

In HSL, brightness is meaningless. Colors can have the same brightness value, but the perceived brightness is very different. […] With LCH, any color with the same brightness is equally perceptually bright, and any color with the same chromaticity is equally perceptually saturated.

Another benefit of the new model is that we can get rid of the "gray dead zone" in the CSS color gradient. I don't think that due to this perceptual unity, the two rich colors don't get weird and gradually change themselves in non-rich areas.

Here is a small personal prediction: I would say lch() might become a designer favorite. There will be a lot of new color options soon, and it is always too difficult and weird to choose different colors. LCH seems to be most psychologically effective.

resource

• lch() (MDN)
• LCH color in CSS: What, why and how? (Lea Verou)

"Sure"

LAB and its friends look so novel because it is new to CSS…but LAB was invented in the 1940s. In his conversation with Adam Argyle, he uses a memorable phrase: All color spaces have an Achilles heel . That is, they are a little bad at things. For sRGB, it is a gray dead zone problem and a limited color gamut. LAB is good, but it certainly has its own weaknesses. For example, the blue to white gradient in LAB will pass through the purple area rather clumsyly.

In December 2020, Björn Ottosson said, “Hey, a new color space just appeared” and now OKLAB is coming. Obviously, CSS decision makers believe that the value of this color space is high enough that oklab() and oklch() have been normalized. I think we should care because they are usually better , but don't quote what I said.

Why does Display P3 use the color() function while other functions are not used?

I really don't know. I think the CSS color() function is relatively new, and that's how Safari put it in it in the first place. I don't know if Display P3 will get its dedicated functions, or if we should all start using CSS color(), or what.

 /* This is how to use Display P3*/
color(display-p3 1 0.08 0);

/* But this doesn't work*/
color(oklch 42.1% 0.192 328.6);

/* Do you have to do this?‍♀️ */
oklch(42.1% 0.192 328.6);

/* But you can use color space in gradient... */
background-image: linear-gradient(
    to right
    in oklch,
    lch(50% 100 100),
    lch(50% 100 250)
  );

Relative color syntax is very useful.

There is a very cool feature called "relative color syntax" where you can basically deconstruct the CSS color while moving it to another format. Suppose you have (apparently) the most famous CSS HEX color, fog dog, and you want to convert it to HSL:

 body {
  background: hsl(from #f06d06 hsl);
}

Maybe this doesn't work immediately, but hey, now we can add alpha to it! There is actually no other way to apply alpha to existing HEX colors, so this is very important:

 body {
  background: hsl(from #f06d06 hsl / 0.5);
}

But I can modify it too. Suppose I want to saturate the fog dog a little bit before adding the opacity, as the lower opacity will naturally darken it, I want to offset that. I can use calc() on the variables that are implicit there:

 body {
  background: hsl(from #f06d06 h calc(s 20%) l / 0.5);
}

This is so cool. I'm sure we'll see something amazing from it. It is certainly not limited to HSL. I just use HSL because I find it comfortable now. If I want, I can start with the named color red and modify it in LCH:

 body {
  background: lch(from red l calc(c 15) h / 0.25);
}

These are useful when freely combined with custom properties.

There are no more special functions specifically for alpha.

It should be clear that there is no comma in the alpha value in the CSS color function before it - but a forward slash:

 /* Old! */
rgb(255, 0, 0);
rgba(255, 0, 0, 0.5);

/* New! */
rgb(255 0 0);
rgb(255 0 0 / 0.5);
hsl(0deg 40% 40%)
hsl(0deg 40% 40% / 90%) /* can be a percentage instead of 0.9 or other value*/

/* The new color content has only a single basic function, no alpha minor function*/
lab(49% 39 80)
lab(49% 39 80 / 0.25)

/* Display P3, using color functions, basically the same way as forward slashes*/
color(display-p3 1 0.08 0 / 0.25);

You can even define your own CSS color space.

But I really can't think about this. This shocked me, I'm sorry.

The above is the detailed content of A Preview of 4 New CSS Color Features. For more information, please follow other related articles on the PHP Chinese website!