feat: support modern css colors

[gka]

CSS now supports a modern syntax and the one currently implemented in chroma.js is rebranded as "legacy". So we should go with the times and change the default output of color.css() to the modern syntax.

Since this is a breaking change I think we should bump the version number to 3.

This branch will also add support for Lab, Lch, OkLab, and OkLch CSS exports, e.g.

chroma('hotpink').css('oklab');

• support configuration of Lab white reference illuminant to match W3C implementation of Lab
• document new methods getLabWhitePoint and setLabWhitePoint
• support .css('lab')
• support .css('lch')
• support .css('oklab')
• support .css('oklch')
• support parsing of modern CSS colors in rgb() space
• support parsing of modern CSS colors in hsl() space
• document new CSS color exporting
• support highlighting of modern CSS color in documentation
• support parsing of modern CSS colors in lab() space
• support parsing of modern CSS colors in lch() space
• support parsing of modern CSS colors in oklab() space
• support parsing of modern CSS colors in oklch() space

[gka]

cc @zyyv

Alright, changing of the CIELab white reference point can now be done using this API:

chroma('hotpink').lab(); // [65.49,64.24,-10.65]
chroma.setLabWhitePoint('D50');
chroma('hotpink').lab(); // [65.86,63.27,-9.64]

This will affect the CIELab color spaces Lab and Lch. I thought this makes it easier to just switch once and for all rather than having to pass the white point as additional argument in all the places where you can define an output mode.

More importantly, chroma.js will ensure that when you export a color as a CSS Lab string, it uses the D50 white point. Otherwise, the color would show up differently in a browser.

[gka]

I'll add the other CSS color spaces Lch, Oklab, and Oklch before merging this.

[gka]

Dang, of course, OKLab is also dependent on a white reference point, and according to the official paper by Björn Ottosson, it's hard-coded to the D65 illuminant:

Oklab uses a D65 white point since this is what sRGB and other common color spaces use.

But as far as I can see, W3C has adapted their implementation of oklab() to also use the D50 illuminant. This means that you can't convert a hex color to an oklab CSS string using chroma.js and then expect a browser to show the same color.

I've solved this problem for the CIE Lab space, but I don't know if I can also do this for the Oklab space. We're using the official conversion matrices, which are hard-coded to D65.

The new matrices have been derived using a higher precision sRGB matrix and with exactly matching D65 values.

[gka]

or perhaps I'm misunderstanding something here. In any case, W3C seems to be using a more complicated method to convert from RGB to OKLab and back. Fortunately, they've published the JS code for their conversions, so we could try to re-use it: https://www.w3.org/TR/css-color-4/#color-conversion-code

[gka]

merging this now, and will fix the oklab issues in another PR.