CIE JavaScript Tools

The Color & Illumination Engineering JavasScript toolbox, or CIE-JS in short, is a Typescript/JavasScript Library for color engineering. It can be used in online Web Applications and shell scripts, using a runtime tool such as Deno.

The color calculations in this library are different from more traditional color calculation libraries.

Firstly, it uses spectral distributions as the basis for color calculations exclusively. Colors are not represented by just three numbers, such as three R, G, and B values, but by an array of spectral power or reflectivity values. Even when you give three color values, the library will create a spectral distribution for it, based on the extra information you have, or applies a default if you don’t have any. This extra information might be that the values you have are from a camera, or that you want to display a particular color on a monitor. This makes color calculations not only more accurate but also allows you to calculate color appearance for specific observers and viewing conditions.

Secondly, the library is fully written in the Rust programming language, and made available as a WebAssembly library. You might have never heard of this language, and, if so, you can immediately forget it again, except for remembering that code written in Rust is blazingly fast, comparable to libraries written in C, and having the benefit of being very safe and reliable.

Thirdly, the whole library is written for web applications, so all the functions can be directly used in browsers, and can use the full web infrastructure. Using the library only requires adding only two lines to your scripts; there is nothing to compile or install, and runs on any modern computing platform, including mobile devices. And, if you want, you can even use it to do calculations interactively, using Deno, in your shell.

Using the library, in any browser, or any JavaScript runtime requires only two lines of additional code. In any ES6 module or script, add the following two lines at the top:

    import init, * as cie from "https://gerardharbers.com/cie.js";
    await init();

There are no extra libraries to install, and nothing to configure. In the next example, we calculate the CIELab coordinates for a Munsell color patch, using the CIE 2015 10º standard observer, instead of the more common CIE 1931 2º observer:

    const munsell = await fetchMunsell();
    const c2015_2 = await fetchCie2015_10();
    console.log(munsell.lab(c2015_2));

Now you might want to know what that color looks like on your screen. Assuming you have a display, calibrated to the sRGB color space, you can get its RGB color coordinates like this:

console.log(munsell.rgb(c2015_2));

Notice that we have not used any reference to the CIE 1931 standard observer, although the sRGB color space is defined using that observer only. This is possible because we use spectral representations of the sRGB primaries instead of their chromaticity values, as used in other libraries.

If you have measured the spectral luminance from your display with a spectrometer, you can get more precise color coordinates. If your display’s spectral data is available, for example, in a file called my_lg3420.json, you can get a better color representation using;

    const myLG = await Display.fetch("file://my_lg3420.json");
    c2015_2.display = myLG;
    console.log(munsell.rgb(c2015_2));

For more on this see the Displays Chapter.