Proposal: Colour API
keithamus opened this issue · 2 comments
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 - 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 - 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 - 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 - 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 - 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 - older, has hardcoded named colours but missing
rebeccapurple - chromatist
- Colors.js
- HSLuv - specifically tailored to handle the esoteric HSLuv color space but does parse/convert to/from other formats.
- culori
- randomColor - largely used for making "attractive" random colours, but has many colour conversion functions built in
- 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" 😉
Many many libraries or frameworks also internalise a series of colour functions like three, p5, fabric.js, react-native.
Even browsers' devtools have internalised functions to do the same! See Chrome's color.ts, Webkit's 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.
Aside: I'm not sure where best to put this. Is it a DOM API? Should the csswg pick it up? Does csswg even specify JS APIs?
The DOM Standard is probably not the correct place for this. CSS WG seems more natural and they do define APIs, such as the CSSOM.
https://wicg.github.io/color-api/ exists and might be worth contributing to.