C3

C3 (Categorical Color Components) is a JavaScript library for modeling color naming data. It can be used to create a variety of applications, including improved color selection, image editing, or palette analysis tools.

C3 also includes backend components (written in Java) for processing raw color naming data and producing a compact model of color naming. The resulting JSON model file is loaded by the client C3 library.

This is a fork of C3 that makes it possible to use the library as a ES6 module (eg. so you can use import { load } from "c3-module").

It can be installed by running npm i c3-module.

Example usage:

import * as c3 from 'c3-module';

// You can use the c3 object as shown in the examples now.
// Example: find and print 3 red colors
const redIndex = c3.terms.findIndex(e => e == "red");
const colorIndexes = c3.termsRelatedColors(redIndex, 3);
colorIndexes.forEach(ci => console.log(c3.color[ci.index].css("rgb"))); 
// rgb(220, 0, 15)
// rgb(198, 0, 0)
// rgb(198, 0, 14)

// Example: find and print 3 terms related to "red"
const termIndexes = c3.termsRelatedTerms(redIndex, 3);
termIndexes.forEach(ti => console.log(c3.terms[ti.index])) 
// red
// brightred
// bloodred

A difference between this fork and the original c3 library is how you access data and functions. c3.terms and c3.colors are the same, but functions like c3.terms.relatedColors are now c3.termsRelatedColors to avoid overloading built in JavaScript.

Another difference is that instead of keeping track of colors using d3-colors, this library use chroma-js which means you access color information as described in their documentation.

Finally, the full size of the compiled script is about 2 MB, primarely because the data file is now embedded into the script. This is done to make it easier to use the library without hosting the data, and avoids having to wait for the data to load during runtime.

Development Setup

The easiest way to work with the library is to have a local project that includes this project as a local dependency, eg. by running npm i /path/to/c3-module and then use it as in the example.

Compile using npx tsup src/index.ts or with type declarations npx tsup src/index.ts --dts.

If the compiler complains about Cannot find module ..., try installing typescript globally and link it.

npm i typescript -g
npm link typescript