https://svgees.us/blog/colorjs-release.html

Home Blog Speaking Publications CV
Twitter Github

[2506926] Color.js Released

Published on 29 June 2022

[colorjs-lo]

Related: Lea's blog post for the release of color.js

It has taken Lea and I far too long - there is always something more
that really should be added, always some conversion that really needs
an authoritive set of data to validate our code against - but we
finally decided, time to actually release Color.js.

By which, I guess, we mean removing the polite figleaf that said,
"whoops you stumbled on an unreleased thing, please be careful and
lower your expectations".

Because people are already using it to make demos and to check other
color conversion code against (this includes some browser
implementations of CSS Color 4 and CSS Color 5).

Lots of color spaces

Color.js is a JavaScript library - which you can use on a web page,
or from node, or run locally - to make, modify, and manipulate colors
in a wide variety of color spaces.

That includes all the predefined color spaces from CSS Color 4, plus
the Device-independent Colors: CIE Lab and LCH, OKLab and OKLCH plus
of course all the legacy color syntaxes.

In addition it includes some spaces useful for HDR, like rec2100-pq
and rec2100-hlg, J[z]a[z]b[z], IC[T]C[P] and a couple of color spaces
from the film and tv industry (ACESScc for color grading, ACEScg for
physical rendering and compositing).

Speaking personally, being able to create examples in all those color
spaces, and accurately convert them to other color spaces, was
essential to me for making examples, creating diagrams, writing and
verifying browser tests, and for sanity checking the CSS Color 4
specification in the days before browsers started implementing it.

Why do we need it

Now, CSS Color 4 includes simple (but accurate) Sample code for Color
Conversions so what extra does color.js add?

Well, the sample code is purely procedural, lots of
easy-to-understand but tiny, single-purpose functions, so to use it
you really need to apply a bunch of operations, one after another,
not missing any out. All done using simple arrays, so remember to
keep track of what each one contains!

To take an example: convert color(prophoto-rgb 0.7 0.2 0.65) to
oklch. Using the sample code:

let mycolor = [0.7, 0.2, 0.65]; // this is ProPhoto by the way
let myoklch = OKLab_to_OKLCH(XYZ_to_OKLab(D65_to_D50(
    lin_ProPhoto_to_XYZ(lin_ProPhoto(mycolor)))));

(Prophoto uses the D50 whitepoint while OKLCH uses D65, so there is a
chromatic adaptation step in the middle there)

Now let's do that in color.js:

let mycolor = new Color('color(prophoto-rgb 0.7 0.2 0.65)');
let myoklch = mycolor.to('oklch');

Each color object contains, not just the actual color coordinates,
(and the alpha, if it is not fully opaque) but also an explicit color
space identifier. The code can look up what white point each color
space uses, and can figure out how to convert between any pair of
them.

Notice that the color can be specified exactly the same way you would
in CSS, and that conversion is as simple as saying where you want to
go. (Internally, the exact same set of steps as the first example are
carried out, for you).

Here is a handy color conversion app, written in color.js, which I
use all the time.

Interpolating colors

On the legacy web, you can make a gradient between two (or more)
colors. As long as all are in sRGB, missing out around a third of all
the colors most modern screens can display. And provided the
interpolation is carried out in sRGB too, giving muddy, too-dark
mixtures and tempting you to add just a couple more gradient stops to
get things looking right.

CSS Color 4 explains how to interpolate any two colors regardless
what color space they were originally in. And you get to pick the
color space used for interpolation, too: diffeent ones give very
different results. For example:

linear-gradient(in lab to right, white, #01E)
linear-gradient(in srgb to right, white, #01E)
linear-gradient(in oklab to right, white, #01E)

[rectangula]

The middle gradient of these three, in sRGB, is too dark and a bit
purplish. The top one, in CIE Lab, is way too purple while the bottom
one in shiny new OKLab has a nicely even lightness throughout and no
purple shift at all.

This rendering of the brand-new CSS Images 4 gradient syntax was
generated in color.js, using the gradient interpolation demo app

Gradients aren't the only time colors are interpolated on the web;
just one of the prettiest to show. Animations, transitions,
compositing and CSS Color 5 color-mix() also use interpolation, and
color.js has you covered until all the browsers implement all of this
(and beyond, because older browsers will always need a helping hand).

And that's not all

I haven't even talked about automatic gamut mapping, which brings
undisplayable colors into gamut while trying to keep them as
similar-looking as possible. Or the several different color
difference (DE) formulae that color.js supports. Or the alternate
Chromatic Adaptation Transform methods you can use. Or just little
utility functions to get luminance (on any color) or the u,v
chromaticity coordinates, for making diagrams.

But this is a release announcement not a tutorial, so I had best be
ending here.

Get color.js, enjoy, and report bugs!!