I was reading this article on CSS Color Module Level 4 and what it means for web developers. It’s a very extensive guide and my mind is well boggled already, but it looks like fun.
2 Likes
I started reading it.
My eyes glossed over after the first couple of paragraphs.
I tried to scroll to find a point of TLDR for people who aren’t photographers.
I failed. The article’s conclusion failed.
I’m sure the article is very informative, but… jeezus someone needs to write a crib notes.
I understand the desire to avoid banding being occasionally visible in gradients but, apart from that, I very much doubt anyone would be able to perceive any subjective improvement in colour rendering. Anyway, we would still not be able to get violet.
Brief crib notes from what I read in it:
Cameras and drawing tools have supported images with more than 8 bits per color for a long time. Files and image processing software has supported manipulating these images for as long. It was useful in situations where higher definition than 8 bits per color was noticeable (most easily seen in large areas of gradient in one color). More recently, monitors and video cards have supported the capability. That left CSS as lagging behind, as colors needed to be specified as 24 bit (8x3) entities that no longer aligned perfectly to these higher definition image colors.
1 Like
So if I define a color in the space beyond sRGB, and my website visitor isnt using a superexpensive QHUXLD monitor… what do they see?
I’m only guessing, but even today the common practice would be to just use the top 8 bits of the color value and throw the rest away.
I would think that things won’t appear any different to what they normally see.
If you compare the traditional rgb() colour property with the new spaces, rgb() accepts values from 0 to 255 as that many bits allows, where 0 is none on that channel and 255 is that channel on full power. The new spaces accept percentages, 0 to 1, angle values in degrees, or in some cases other ranges. Though 1 and 100 are lesser than 255, you are not bound to integer values, so there are more incements between using decimals. Where spaces like LCH have an unconstrained range for Chroma, I suppose a display will just cap out the limit of its gamut, since it can’t do any more than that.
So in the finite value ranges, you are still dealing with all or nothing, but with more increments between all or nothing with the larger gamut. The infinite ranges may be a little different, but all hardware will have its limitations, though it does warn about being sensible with those values.
tl;dr
If you have a regular monitor, you won’t know any different, the change will only be seen on monitors capable of larger gamut.
*I don’t know this, but it’s my guess.
1 Like
The article gives a couple of examples of how to handle updating site to support wide gamut colours.
color: red;
color: color(display-p3 1 0 0);
or the use of @supports and @media queries.
That would account for browser support, not monitor support. Or can @media queries recognise wide gamut displays now?
I think they can @media (dynamic-range: high)
I should add that I find the article long winded and confusing. :
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.