Live data from Hacker News

High Definition CSS Color Guide

developer.chrome.com

41–50 of 58 posts

Re: High Definition CSS Color Guide

#41
post #40

Earlier quoted context omitted.

p3 has been the default for Apple desktop & mobile displays since 2017 (iPhone 7 era). Other device manufacturers are more likely to have lagged on that but I would imagine a fair number would have added support since. Also, within CSS & browsers at least, the colours gracefully degrade based on the hardware, so using p3 in a supported browser is not going to look terrible on hardware without p3 support.

> the colours gracefully degrade based on the hardware, so using p3 in a supported browser is not going to look terrible on hardware without p3 support. I feel like it makes it difficult for a brand to decide to rebrand themselves using P3 colors if it means their brand colors will be wrong on many people’s displays.

> I feel like it makes it difficult for a brand to decide to rebrand themselves using P3 colors if it means their brand colors will be wrong on many people’s displays.

Only if the colors they choose fall outside the sRGB gamut. And if they do, the brand can specify colors for both gamuts.

  .brand-color {
    /* Fallback for browsers that don't support color-gamut media query */
    background-color: rgb(0, 122, 255); /* sRGB version */
  
    /* For browsers that support wide gamut but without color-gamut media query */
    background-color: color(display-p3 0 0.478 1); /* Display P3 version */
  
    @media (color-gamut: p3) {
      /* For browsers that support Display P3 with color-gamut media query */
      background-color: color(display-p3 0 0.478 1); /* Display P3 version */
    }
  }
FWIW, this is a fairly common thing to have to handle. For example, many brands use colors that can't be perfectly reproduced on paper, t-shirts, etc.

Re: High Definition CSS Color Guide

#42
post #29

Earlier quoted context omitted.

it's similar to all the others: either a non-generally-human-comprehensible notation (how is pure red oklch(62.8% 0.25768330773615683 29.2338851923426) treating you?) or seriously flawed (like HSL)

Are you sure you’re not thinking of okLAB? okLCH is basically HSL, with numbers that are consistent. Not sure why those numbers wouldn’t be human comprehensible. You’ve got a lightness of about 62%, which sounds right - that’s how far between black and white you are at pure red. You have a chroma of 0.25, which you need to understand as being ‘quite high’ (0.33 is about as high as chroma goes), which I appreciate is…

> 62%, which sounds right - that’s how far between black and white you are at pure red.

First, it's not 62%, but 62.8%, so that's already a fail at producing a basic color. Second, it doesn't sound right - you have no general knowledge/experience clue that this much light between black and white is red, so have no chance for a good guess

> I appreciate is a thing you have to learn, but it’s not beyond human comprehension.

Can you not appreciate that 0-100 is something that you almost don't have to learn?

> if you lower that chroma you get colors that are as red, but less intense - which is what you would expect

Yes, that's the good part!

> And then you have a hue, which is an arbitrary angle

That's another common flaw of all these color notations (they should allow "r" for red and then +-degrees for deviations), but it this case it's worse because it's again not a clean 29 number for a "clean" color

> Add 180 to it to get a complement though, or add or subtract 120 to get to green or blue.

If you remember the whole wheel. Not beyond "human comprehension", just UI fail for the non-expert general human

Re: High Definition CSS Color Guide

#43
post #37

The article says #rgb is used 25% of the time... but Chrome gives a warning about it

Is your point that people shouldn't be using a standard feature because chrome doesn't like it or that chrome shouldn't be complaining because 25% of all colour declarations use this syntax?

I think Chrome should stop complaining ;)

Re: High Definition CSS Color Guide

#44
post #29

Earlier quoted context omitted.

OkLCH is the best version of that. Sure, you have to worry about chroma limits, but they reflect the reality of color differences (blues are never going to be as vivid as greens)

it's similar to all the others: either a non-generally-human-comprehensible notation (how is pure red oklch(62.8% 0.25768330773615683 29.2338851923426) treating you?) or seriously flawed (like HSL)

You can shorten that to oklch(62.8% 0.2576 29.23) and it will still max out the red subpixel on your sRGB monitor, not that this is a particularly serious flaw with okLCH anyway IMO, especially compared to the incomprehensible nonsense that is #RRGGBB unless you're specifically working with sRGB subpixels/pixels and not colour

Re: High Definition CSS Color Guide

#45
post #21

Joke is on them to think I care about any of this when I work on my company-issued ThinkPad T14 with a 45% NTSC screen that maxes out at 300 nits. Realistically, at this time, this is for developers who works on a MacBook and creates web pages for users that use MacBook or iPad Air/Pro. Most Windows laptops under $600 don't even have sRGB, and even some over $1k don't (like my ThinkPad). sRGB is often as good as it g…

Yeah, there's a $1700 hp on my desk with a 6 bit per channel display.

Re: High Definition CSS Color Guide

#47

> The following color spaces offer access to larger gamuts than sRGB. The display-p3 color space offers almost twice as many colors as RGB, while Rec2020 offers almost twice as many as display-p3. That's a lot of colors! Are there any stats on how many people have devices that support these color spaces? Guessing you're not going to get a lot of brands picking p3 colors until it's widely supported by devices in gener…

p3 has been the default for Apple desktop & mobile displays since 2017 (iPhone 7 era). Other device manufacturers are more likely to have lagged on that but I would imagine a fair number would have added support since. Also, within CSS & browsers at least, the colours gracefully degrade based on the hardware, so using p3 in a supported browser is not going to look terrible on hardware without p3 support.

Apple devices (both web and mobile together) are about 23% of web users, even assuming 100% of them are from after 2017. I think you're right that there are quite a few non-Apple displays that support P3, but I can't find stats on how many web users that translates to. I assume it's 50% or less though.

Re: High Definition CSS Color Guide

#48
post #21

Joke is on them to think I care about any of this when I work on my company-issued ThinkPad T14 with a 45% NTSC screen that maxes out at 300 nits. Realistically, at this time, this is for developers who works on a MacBook and creates web pages for users that use MacBook or iPad Air/Pro. Most Windows laptops under $600 don't even have sRGB, and even some over $1k don't (like my ThinkPad). sRGB is often as good as it g…

iPhones and Android phones don't exist? Perhaps all Android phones are $200 and don't support HDR.

There's a lot of windows laptops that support P3 or in the case of some OLED displays exceed Display P3's gamut.

The same for monitors. There's 4K OLEDs hitting the market hitting about 80% rec 2020 and completely covering Display P3.

Your display market knowledge is a few years outdated.

Re: High Definition CSS Color Guide

#49
post #42

Earlier quoted context omitted.

Are you sure you’re not thinking of okLAB? okLCH is basically HSL, with numbers that are consistent. Not sure why those numbers wouldn’t be human comprehensible. You’ve got a lightness of about 62%, which sounds right - that’s how far between black and white you are at pure red. You have a chroma of 0.25, which you need to understand as being ‘quite high’ (0.33 is about as high as chroma goes), which I appreciate is…

> 62%, which sounds right - that’s how far between black and white you are at pure red. First, it's not 62%, but 62.8%, so that's already a fail at producing a basic color. Second, it doesn't sound right - you have no general knowledge/experience clue that this much light between black and white is red, so have no chance for a good guess > I appreciate is a thing you have to learn, but it’s not beyond human comprehen…

Why do you want this particular red to be a special easy to pick color?

Re: High Definition CSS Color Guide

#50
post #42

Earlier quoted context omitted.

> 62%, which sounds right - that’s how far between black and white you are at pure red. First, it's not 62%, but 62.8%, so that's already a fail at producing a basic color. Second, it doesn't sound right - you have no general knowledge/experience clue that this much light between black and white is red, so have no chance for a good guess > I appreciate is a thing you have to learn, but it’s not beyond human comprehen…

Why do you want this particular red to be a special easy to pick color?

Such "pure" colors are foundational mental categories, or anchors, so that's only natural they should be the easiest - it makes working with colors more accessible

But they should all be easy, and your suggestion fails at multiple points as I've explained above, not only for red, so the I'm puzzled why you insist it should be that hard and want a proof of the opposite

Post reply on HN