Re: [csswg-drafts] [css-color-4] Helper JavaScript as ESM? (#6716)

The sample code is intended primarily to be straightforwardly read (by humans), as explanation. The fact that it also works is an added bonus.

In terms of usability though, the simple procedural style means that the user needs to know exactly what they are doing. As an example, to convert a `prophoto-rgb` color to `display-p3` you would do all the steps yourself, in the right order: convert from gamma-encoded to linear-light, convert that to XYZ, do the chromatic adaptation from the 'prophoto-rgb` whitepoint of D50 to the `display-p3` whitepoint of D65, convert those XYZ values to linear-light `display-p3`, then apply the gamma encoding.

```js
let color1 = [0.54, 0.928, 0.305];
let color2 = gam_P3(XYZ_to_lin_P3(D50_to_D65(lin_ProPhoto_to_XYZ(lin_ProPhoto(color1)))));
// [0.457, 0.986, 0.299]
```

So in addition to using ESM it would be better to use code which is object oriented and does the right thing automatically.  @leaverou and I took the logic from the sample code and did exactly that to create [color.js](https://colorjs.io/)

Here is the same example in color.js:

```js
let color1 = new Color("color(prophoto 0.54 0.928 0.305)");
let color2 = color1.to("p3");
// color(display-p3 0.457 0.986 0.299)
```

color.js can be used in Node, or in a browser (and does not depend on browser support for any of CSS Color 4). The [API](https://colorjs.io/api/) has [extensive documentation](https://colorjs.io/docs/) which can be live-edited to try things out, and a [color notebook](https://colorjs.io/notebook/) for experimentation (some editing bugs, but still useful). We also made a handy [conversion app](https://colorjs.io/apps/convert/?color=color(display-p3%200.457%200.986%200.299)&precision=4).  The downside of all that, is that the JS source is longer, and somewhat harder to read due to error-checking and extensibility hooks.

It is all [on GitHub](https://github.com/LeaVerou/color.js) and to [use it](https://colorjs.io/get/) simply

```js
import Color from "https://colorjs.io/dist/color.esm.js";
```

I would also like to draw your attention to the [Color API](https://github.com/WICG/color-api) which is being incubated in WICG  and is intended to be a web platform color API. Drawing on the experience with color.js and with CSS typed OM, it should be a lean, cut-down API that correctly does all the common things authors would need.

-- 
GitHub Notification of comment by svgeesus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6716#issuecomment-936247595 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 6 October 2021 13:35:25 UTC