It is exciting to see so many new color features for the CSS Color Module. There are nevertheless a couple items that resulted in a "raised eyebrow response". This Gist is mainly going to focus on one: the use of the LAB version of LCh instead of LUV LCh, which may be better suited for the task but appears to have been dismissed as if irrellevant.
I DISAGREE. Luv is in common use and very relevant, and LuvLCh or one of the several LuvLCh variants has distinct advantages over LabLCh for use cases such as choosing color for web content for displays.
Of the other eyebrow-raisers that are related to this topic and may come up, are the inappropriate use of the D50 illuminant. D65 is the CIE standard, and D65 is the standard for nearly all display colorspaces and working spaces including sRGB which is the default standard for web content.
This seems related to the use of ICC profiles where OpenColorIO LUTs may be more appropriate (especially for HDR). The ICC themselves mention this, as while the spec says that ICC is "general purpose" that the choices made favor the printing/desktop publishing industry. Color mixing and color contrast are associated here as well. I intend to discuss these issues separately, but am mentioning as there is a relationship to this Lab/Luv chat.
The upshot is, I am confused by some of what I have been reading in the CSS Color spec and posts, as some of it is contrary to recommended or best practices that we use in the film and television industriesv— as this is a work in progress, I hope I am coming in at a good time to prevent problems and provide pro-active and constructive support. So let's get into the Lab/Luv and working colorspace discussion.
The same year Lucas released StarWars, the CIE released it's own version of a blockbuster: uniform color spaces that modeled the human visual perception of lightsabers, and of small color differences: L*a*b** and L*u*v* these colorspaces were a big step toward color appearance models (CAM), in fact some color scientists do refer to them as simple appearance models as they have simple chromatic adaptation transforms... but I'm going to leave that controversy alone, LOL (see Appendix A).
That is irrelevant, as Lab and Luv have different applications and preferred use cases. Lab may "seem" more popular, and perhaps it is in some way because it is visibly part of Photoshop and also as the PCS in ICC profiles which involve CMYK. And of course Lab and the derived difference maths are used in industries such as paint to measure reflected surface colors.
But don't discount Luv. It has wide adoption in industries and applications where the measured color is self-illuminating as opposed to reflective/subtractive. Luv is common in the television industry, and lighting, and the uv plot is MilSpec for use with spectroradiometer results. Also, LUV is often "hidden" behind commercial products, for instance Tektronix's color correction system TekHVC uses Luv as the basis, with a minor modification to the C value, and aligning hue 0• with "best red". There are web-oriented LChuv projects out there as well.
Again, this is irrelevant, as Lab and Luv have different strengths and weaknesses, depending on the use or application.
Lab is considered better for reflective surface colors illuminated by a standard illuminant like D65 (D50 is used in the printing industry).
Luv is considered better for emissive, self-illuminated colors. Oh, by the way, that means things like computer monitors and TV sets. Luv is also widely used for information visualization due to it's stable saturation performance.
Both Lab and Luv use the identical L* (Lstar) for perceptual lightness. And L* is the one part of Lab and Luv that is somewhat perceptually uniform, so long as the surround is white or light grey.
Neither Lab or Luv are "truly" uniform in terms of hue and chroma, but Lab is markedly worse than Luv. Lab suffers from unstable hue that changes due to L* or C and moreover Lab has significant inaccuracies in the blue area. The distribution of Lab colors is also much more uneven than Luv, and the opponents are not at 180• to each other.
The uv of Luv makes up the more modern spectral locus which is a better choice than the 1931 diagram. Luv has more stable hue when L* or C is changed (before clipping) than Lab, though Luv can be more susceptible to clipping. The distribution of Luv colors is also much more even than Lab.
- Luv has both saturation and chroma available, and is more stable in this attribute.
- Lab has only chroma, and is not stable in regards to hue.
- Luv's more even color distribution means the hue control in LCh has a more uniform and intuitive effect.
- While I am still conducting tests, Luv appears to be much better for gradients and additive non-linear color mixing.
- The fact that Luv is more stable in hue make it a better choice for "color adjustment" than Lab.
This is not to say there are not other alternatives ever better that Luv, but Luv beats Lab in these areas. There are modified Luv systems, and newer appearance models such as RLAB, LLAB, CAM02-UCS, CAM16(developmental) IPT etc. that can have additional benefits in certain areas.
In this image, we compare the LAB and LUV hue angles at maximum saturation for sRGB. This was created using the MacOS colorpicker at max saturation, and sending the resultant colors into a CIELAB or CIELUV processor and reading the reported hue angle, and selecting the sRGB hex values at 5° increments for LAB and LUV.
As can be seen, the LUV hue angles are better distributed across the total color palette. Of course, color does not have an "angle", but using an angle for hue is a convenient way for humans to adjust color to their perception. For use with an LCh type of colorpicker, you want a hue distribution that is more consistent with perception of the colors on a display, and that's Luv, not Lab.
Let's look at some examples of color generated using Lab or Luv values. For this test series, the generator was set for constant L* and C across the panel's colors, only hue changing — of course once gamut clipping occurs, these shift. Both have the hue offset to start at the top with "best red".
METHOD: Each panel has 72 colors for Lab and 72 for Luv, generated in 5• increments. The L* and C were set at a static value for each generation series. The L* was the same for Lab and Luv, but the C was set higher for Luv, as Luv uses a different and larger range. The match point was the first color, "best red".
Most panels are using L* 74.5 for this demonstration. The C values were set to match the first (red) color, and both adjusted in tandem in view of the effect of color clipping. The hue start value was adjusted (mainly for Lab) for best red as the start color. The Generator then added 5• of hue to each subsequent color.
These Lab and Luv values were then processed by the standard CIE math into sRGB values (rounded to INT), and placed into an array used for the actual CSS colors of each strip. These sRGB colors were fed back into the CIE math to determine the ultimate Lab or Luv values of the resultant sRGB values.
Color clipping is here defined as a variance in each color strip of more than ±1 unit of the generated value for L*, C, or h. The first couple panels were set for no clipping, and then the allowed clipping was increased, as discussed in comments.
Best red is defined as #FF0000 when fully saturated, with desaturated versions having identical G and B values, such as #FF9797. Luv was very stable as C or L* were adjusted to different levels, but Lab's hue angle shifted on every adjustment.
You can also see these and others at the experiment site: https://www.myndex.com/SAPC/DEV98LABLUV
It is difficult to tell the difference between Lab and Luv in this panel with the chroma so very low and L* at 80.0 — but do make note of the hue start values.
Under these conditions this is the highest chroma level before clipping. Luv has more consistent saturation and a more even color distribution than Lab.
Increasing C to where the clipping is just starting and leaving L* at 74.5, we can see Luv has a more consistent saturation across all colors, and a better color distribution than Lab. Meanwhile, Lab is already showing hue shifts due to the change in C and requires a hue offset to continue to match on purest red. Luv is hue stable thus far.
We can now see the unique colors (red yellow green cyan blue magenta) are more evenly distributed in LUV, while LAB has very different distributions, excess blue and cyan, minimized yellow, etc.
Leaving L* at 74.5 but jacking up chroma till we start to clip some sRGB colors, the better distribution of Luv's colors are now easier to see. But also, as we increase C we find Lab has significant hue shifts and saturation becomes more uneven, even for colors that are not clipping. Luv remains hue stable, with the exception of heavily clipped colors like purple.
To emphasize Luv's better distribution of hue from 0-360, we set the Lab/Luv color generator to the heavily clip the sRGB output colors. Again, Lab has hue shifts with changes in C, over 12° compared to the first panel. At this high clipping we finally need to adjust Luv's start (pure red), but Luv is clearly more hue stable than Lab.
While we'd never clip like this in normal use, forcing the Lab/Luv color generator to clip the majority of colors, we learn a bit about the inner structure of Lab/Luv, and can clearly see the distribution relative to sRGB primaries and unique colors.
We're lost and we need a map... a Gamut map... One of the things this exercise demonstrates is that for both Lab and Luv, an LCh color control will easily go out of sRGB gamut if not constrained such as with a map.
One of the solutions that is free and readily available is called HSLuv, which can be seen at https://www.hsluv.org however I am not endorsing it as yet as I have not fully evaluated it, but it looks interesting.
Another option might be to use TekHCV which is part of the the color correction system Tektronix developed using Luv, and the patent is expired. There are a few other patents with useful concepts that are expired or otherwise in the PD. Like, an ocean full.
So while it is true that using a CIE LCh, either Lab or Luv, is a generally more intuitive and perceptually relative way to create or adjust colors, the CIE math has nothing to prevent the creating of or adjusting to out of gamut colors. And then the big question is: in the context of CSS, how should the standard specify gamut mapping in these circumstances?
There is no perfect gamut mapping method — but the many choices could be reduced to a few practical ones. For instance, a designer may want to increase or decrease a luminance to meet a contrast goal, and not care if there is a saturation, or even a mild hue shift. But another author may need to absolutely constrain hue or sat. Etc.
Concerns with gamut mapping is one reason it is wrong to force the inappropriate use of D50 in an environment that is otherwise entirely D65. And this extends to tools for creating gradients or generating colors or automated color palettes, and selection of workspaces. But these are topics for another Gist.
This Discussion Continues in the Next Gist
CIE TC1-34 definition: a color appearance model is any model that includes predictors of at least the relative color appearance attributes of lightness, chroma, and hue. For a model to include reasonable predictors of these attributes, it must include at least some form of a chromatic adaptation transform. Models must be more complex to include predictors of brightness and colorfulness or to model other luminance-dependent effects such as the Stevens effect or the Hunt effect.
Given the above definition, it has been stated that some simple uniform color spaces, such as CIELAB and CIELUV, can be considered color appearance models. These colorspaces include simple chromatic adaptation transforms and predictors of lightness, chroma, and hue (Fairchild).
To me this is something of a semantic argument, and I really hate semantic arguments. Nevertheless, Lab and Luv predict certain attributes of color appearance and/or color difference. But they are also both incomplete in this regard.
—Andrew Somers, Nov. 2020
Love the article, but you should probably replace that u'v' chromaticity diagram. It should look something closer to this:
That was generated with this GLSL code I wrote:
https://www.shadertoy.com/view/7s2SDc