Non-sRGB/wide-gamut color spaces support

[ricokahler]

I got a question about whether or not this lib will support non-sRGB color spaces and I want to dedicate a GitHub issue to this for future reference in the readme.

The short answer is no 😅

To clarify: this issue is discussing whether or not this lib will support more colors than the current rbga 0 - 255 color gamut. This is also known as wide-gamut. This is different from color models (like CMYK etc).

---

The long answer is that support for non-sRGB color spaces is highly dependent on browser support for non-sRGB color spaces. In particular, because we parse colors using canvas, canvas itself must provide a way to get the color in a non-sRGB space. There are proposals on how this might work e.g.

// NOTE: Proposed syntax. Not yet implemented.
canvas.getContext("2d", { colorSpace: "p3" });

but (afaik), there is still no way to pull non-sRGB colors from canvas. Currently we use getImageData to pull the value of the color. ImageData.data only provides a Uint8ClampedArray with values between 0 and 255 inclusive (sRGB space).

Until we get those APIs, adding support for wide-gamut is blocked. Even when the support does come, it'll be a challenge to figure out how to integrate that color space in alongside sRGB while also keeping the bundle size down.

That's particularly challenging because this lib only supports two color models (i.e. rgba and hsla) to reduce branching in code. Wide gamut would support would definitely require supporting another color model and rgba and hsla probably won't be compatible with wide-gamut color spaces.

---

Edit: The implementation was switched to getComputedStyle which is faster however the limitations above mostly still apply.

[ricokahler]

Interestingly though, color2k in Safari is totally fine with parsing a non-sRGB color to the sRGB space, so technically, darken('color(display-p3 1 0.5 0)', 0.1) will work, the result just isn't in the p3 space anymore.

---

---

Edit: after the switch to getComputedStyle, parsing display-p3 does not work.