Implement CSS Color 4 gamut mapping

[svgeesus]

Currently, gamut mapping tries to allow any coordinate in any color space to be reduced (including nonsensical ones like hue) and uses deltaE 2000 as a color distance metric.

• Implement proposed improved CSS color 4 gamut mapping in a codepen (far end of JND MINDE)
• Investigate odd results with imaginary colors
• Add to color.js codebase
• Make it the default GMA

See also this codepen and this demo

[svgeesus]

Does not just affect GM single colors, but also affects smoothness of gradients, see this awful example

[svgeesus]

On lab(50% -127 -127) I get starting oklch of
[ 0.42226189321340196, 1.9540778145796625, 191.20237227483153 ]
and after GM I get
[ 0.43100803800138154, 0.0741924017206513, 191.0338159551419 ]

So the chroma is vastly reduced but the hue is very similar.

[svgeesus]

Exploring the CIE Lab L=50 plane over a,b = -125 to +125 I am struck by the OKLab a value in the -125,-125 corner:

lab(50% 125 125) = oklab(60.58% 0.357 0.152)
lab(50% -125 125) = oklab(53.41% -0.32 0.194)
lab(50% -125 -125) = oklab(42.27% -1.9 -0.37)
lab(50% 125 -125) = oklab(65.4% 0.257 -0.35)

[svgeesus]

So exploring the CIE a,b plane gives odd results if the GMA is using OKLCH

but equally, exploring the OKLab ab plane while mapping in CIE LCH is odd too

[svgeesus]

(TIL that screenshots of Canvas elements on my WCG screen look nothing like the actual screen)

[svgeesus]

Here exploring OKLab a,b we see mapping in CIELCH gives a patch of solid color in the a positive, b positive corner (bottom right)

[svgeesus]

Live versions:

• CIE Lab explorer
• OKLab explorer

[jamesnw]

@svgeesus - We are looking to use Color.js to implement CSS Color 4 logic (conversions, gamut, etc) for Sass in the node-embedded-host, and gamut mapping is one piece that is currently missing. Is there anything blocking this algorithm from being used in Color.js? (Perhaps waiting for clarity on w3c/csswg-drafts#9449 or other outstanding issues?)

If there isn't anything blocking, are there parts that we could help implement here in Color.js?

[LeaVerou]

@jamesnw exciting! Would love to support you folks in this.
AFAIK the only blocker is our lack of time: both @svgeesus and I are spread very thin. So yeah, we'd love help from you folks! Happy to assist with any questions about the codebase, architecture, API etc.

[jamesnw]

@LeaVerou Great! I have a draft PR at #344. I have a few questions there, and am open to your thoughts on documentation and how best to incorporate this change. Thanks!

[svgeesus]

Closed by #352