Different Lab implementations?

[seanmrich]

When I create a Lab color in color.js using Color("lab", [0, 125, 125]), I get full black. Conversions to other color spaces also result in black. However, in other tools this color produces a maroon red.

CSS implementations seem to differ. Using the css color lab(0 125 125) yields black in Chrome, but in Safari it's maroon. Some design tools like the Affinity products and many online color pickers also show a similar maroon color. Looking at the conversion code and the math in Wikipedia, I get a Y value of 0 in the XYZ color space when lightness is 0 (which I think means black, right?). This makes me think the black result is correct. Also, all the descriptions of the Lab color space describe 0 lightness being black.

My best guess is that the tools producing red are clipping the conversion to rgb. The color.js conversion tool referenced above shows raw coordinates for srbg as rgb(49.44% -26.55% -33.01%). If you clip the blue and green channels to 0, you do get a maroon red. Could this be the source of the difference? Or are there different, legitimate implementations of Lab that produce different results?

[facelessuser]

When I create a Lab color in color.js using Color("lab", [0, 125, 125]), I get full black. Conversions to other color spaces also result in black. However, in other tools this color produces a maroon red.

There are inconsistencies across browsers currently. Colors outside of the display gamut must be gamut mapped to the displayable gamut, and depending on the rules the browser is following, this could be different.

In the CSS spec, at one time, it was mentioned when lightness is 0% or 100% that the a and b were powerless, I think that was later removed in favor of letting gamut mapping take care of putting the color into gamut. Some browsers may follow this rule though.

Then there is the suggested CSS gamut mapping algorithm which reduces chroma until the color fits into the gamut. This preserves lightness and hue. At zero lightness, chroma would get reduced to zero creating a black color. I don't think any browser does this currently, and if they do some form of this, it is behind an experimental flag.

The other gamut mapping approach is simply clipping channel values that exceed the gamut. This does in fact, as you guessed, create a maroon color for those values.

It will probably be some time before browsers finish fixing all the issues. In addition to just variations due to bugs, they still haven't agreed to do anything similar to the CSS suggested gamut mapping algorithm. It may be that the final solution to display out of gamut colors that browsers adopt could be different.

At some point, hopefully, the results will be similar across all browsers.

[seanmrich]

That’s very helpful, thank you.