[whatwg/dom] Proposal: Colour API (Issue #1208)

## Context

Dozens (if not hundreds) of libraries exist on the web to do something that browsers are able to do but do not expose in a meaningful way in JavaScript; parsing colour values, mapping between colour spaces, mixing colours. 

Here's a not at all exhaustive list of all the libraries that can do colour conversion of some form to another. Ordered by popularity:

- [color](https://github.com/Qix-/color) - parses hex, rgba, hsla, hwb, converts between formats, extracts luminosity (rec709 so WCAG compliant), colour mixing based on SASS, `ligthen`, `darken`, `desaturate`, `grayscale`, `whiten`, `blacken`, `fade`, `mix`. ~16MM/wk downloads, 22kb minified.
- [polished](https://github.com/styled-components/polished) - parses hex, rgba, hsla, hsv, converts between formats, named colours (hardcoded), emulated colour temperatures, converts between formats, extracts luminosity (rec709 so WCAG compliant), colour mixing; `lighten`, `darken`, `desaturate`, `grayscale`, `mix`. ~6MM/wk downloads. 63kb minified.
 - [TinyColor2](https://github.com/bgrins/TinyColor) - parses hex, rgba, hsla, hsva, converts between formats, named colours (hardcoded),  extracts luminance (rec709 so WCAG compliant), ~4MM/wk downloads. 14.9kb minified.
 - [chroma.js](https://github.com/gka/chroma.js) - parses hex, rgba, hsla, hsv, lab, hcl, oklch, converts between formats, extracts single channels from colour spaces, luminosity (rec709 so WCAG compliant), colour mixing; `lighten`, `darken`, `desaturate`, `grayscale`, `mix`, `screen`, `overlay`, `dodge`, `burn`, `multiply`. ~640k/wk downloads. 42kb minified.
 - [color2k](https://github.com/ricokahler/color2k) - parses hex, rgba, hsla, converts between formats, extracts luminance (rec709 so WCAG compliant), basic colour mixing like `desaturate`, `darken`, `adjustHue`. ~500k/wk downloads. 6.1kb minified.

Many more libraries exist that have less notoriety, or provide more of a niche:

 - [jQuery Xcolor](https://github.com/infusion/jQuery-xcolor/) - older, has hardcoded named colours but missing `rebeccapurple`
 - [chromatist](https://github.com/jrus/chromatist)
 - [Colors.js](https://github.com/mbjordan/Colors/)
 - [HSLuv](https://github.com/hsluv/hsluv) - specifically tailored to handle the esoteric HSLuv color space but does parse/convert to/from other formats.
 - [culori](https://www.npmjs.com/package/culori)
 - [randomColor](https://github.com/davidmerfield/randomColor) - largely used for making "attractive" random colours, but has many colour conversion functions built in
 - [d3-color](https://github.com/d3/d3-color) - largely for d3. Readme says "Even though your browser understands a lot about colors, it doesn’t offer much help in manipulating colors through JavaScript" :wink: 

Many many libraries or frameworks also internalise a series of colour functions like [three](https://github.com/mrdoob/three.js/blob/dev/src/math/Color.js), [p5](https://github.com/processing/p5.js/blob/main/src/color/p5.Color.js), [fabric.js](https://github.com/fabricjs/fabric.js/blob/master/src/color/Color.ts), [react-native](https://github.com/facebook/react-native/blob/main/packages/normalize-color/index.js).

Even browsers' devtools have internalised functions to do the same! See [Chrome's color.ts](https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/core/common/Color.ts), [Webkit's Color.js](https://github.com/WebKit/WebKit/blob/main/Source/WebInspectorUI/UserInterface/Models/Color.js).

## Proposal

While a large majority of colour related work _should_ live in CSS, there will likely always be a need to represent colours in JavaScript also. Given the browser has access to these algorithms which are sometimes complex, and given how much these libraries can lag behind the innovation within the web browser (hardly any support oklch for example), I propose a new set of JavaScript APIs that expose CSS colour primitives and functionality, such as parsing, converting from different colour spaces, and exposing functions like `color-mix`, `color-contrast` in JavaScript.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1208
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1208@github.com>