[css-color-4] Conversion examples give unexpected results (lab -> sRGB, lab -> P3, ...)

[romainmenke]

Have been working on a postcss-lab-function and found some discrepancies in colors converted with the code found here : https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js

I am unsure if I am doing this wrong, or if there is a real issue.
It might also be a bug in Safari as there is no other browser I can compare it with.

Results :

• lab : https://romainmenke.github.io/lab-lch-display-p3/lab.html
• lch : https://romainmenke.github.io/lab-lch-display-p3/lch.html

(Safari 15 supports all features, so can be used to compare)

display-p3 has a large difference, but sRGB is also sometimes different.

Code used in the conversion :

https://github.com/romainmenke/lab-lch-display-p3/blob/main/conversion.js#L1-L60

• P3 values are used as is
• sRGB values are multiplied by 255

Would be great to pinpoint were this goes wrong so that I am sure the plugin uses correct conversions.

[facelessuser]

@romainmenke I don't think there is any problem. It is difficult to discuss as you haven't really highlighted a specific example, but an entire page of innumerable examples. In order to discuss this, I will take a single example from your page: lab(45% -128 -128).

Let's keep in mind that while Safari supports the color syntaxes of lab, srgb, and display-p3, that does not mean your display or Safari will render their true color. Let's consider the specified example of lab(45% -128 -128). This color is out of gamut for both Display P3 and sRGB.

>>> Color('lab(45% -128 -128)')
color(--lab 45% -128 -128 / 1)
>>> Color('lab(45% -128 -128)').convert('srgb')
color(srgb -0.91497 0.58722 1.2945 / 1)
>>> Color('lab(45% -128 -128)').convert('display-p3')
color(display-p3 -0.80848 0.55319 1.2455 / 1)

Not only that, browsers do not yet provide any kind of gamut mapping, so colors that are out of gamut will simply get clipped to fit the current space, and then, if your monitor can't display them, they may be clipped/mapped there as well. Considering that the above example is out of gamut in both sRGB and Display P3, and most new macs ship with Display P3 monitors, the above example will not display correctly in Safari on its Display P3 monitor. Below will show you what the colors will actually get clipped to.

>>> Color('lab(45% -128 -128)')
color(--lab 45% -128 -128 / 1)
>>> Color('lab(45% -128 -128)').convert('srgb').clip()
color(srgb 0 0.58722 1 / 1)
>>> Color('lab(45% -128 -128)').convert('display-p3').clip()
color(display-p3 0 0.55319 1 / 1)

Clipping in one color space will yield a different color than clipping in another color space. Let's compare a color clipped in sRGB and Display P3:

>>> c = Color('lab(45% -128 -128)')
>>> c.convert('srgb').clip().convert('lab')
color(--lab 59.747% -3.438 -62.586 / 1)
>>> c.convert('display-p3').clip().convert('lab')
color(--lab 57.186% -3.1467 -71.391 / 1)

The colors are no longer what you started out with. Hopefully, that explains why they may look different when viewing them on your test page.

[romainmenke]

I think clip is the part I was missing :)

Will have to try this out and will update after.
I will also include better references to specific examples if needed :)

[svgeesus]

In particular, the following color from basic.css lab(100% 50 0) is as light as media white, but very saturated. The red and blue components are out of the gamut of sRGB, display-p3 and rec2020: color(rec2020 1.229 0.884 1.006)

For round-trip unit testing, I would suggest sticking to colors inside the sRGB gamut for the most part, with a few display-p3 as well.

[svgeesus]

The problem was introduced with this commit

[romainmenke]

Out of curiosity, where does this code come from :

>>> Color('lab(45% -128 -128)')
color(--lab 45% -128 -128 / 1)
>>> Color('lab(45% -128 -128)').convert('srgb').clip()

Is it something from here : https://colorjs.io ?

[facelessuser]

Out of curiosity, where does this code come from :

>>> Color('lab(45% -128 -128)')
color(--lab 45% -128 -128 / 1)
>>> Color('lab(45% -128 -128)').convert('srgb').clip()

Is it something from here: https://colorjs.io ?

No, it doesn't come from https://colorjs.io. It is a Python project https://facelessuser.github.io/coloraide/. It was certainly inspired by https://colorjs.io in many ways, but it does go its own way.