Impact

- Has been used to create demos for several W3C specifications
- Has been used by browsers to test their CSS Color 4/5 implementations
- Over 119 million total npm downloads!
- Used by several high impact projects, including Sass, Open Props, axe accessibility testing engine, and OddContrast and CSS HD Gradients color tools
- Parts of Color.js’s API are used as a testing ground for the design of a native Color object for the Web platform.

Reading colors

Any color from CSS Color Level 4 should work:

`js
let color = new Color("slategray");
let color2 = new Color("hwb(60 30% 40% / .5)");
let color3 = new Color("color(display-p3 0 1 0 / .9)");
let color4 = new Color("lch(50% 80 30)");
`

You can also create Color objects manually:

`js
let color2 = new Color("hwb", [60, 30, 40], .5);
let color3 = new Color({space: "p3", coords: [0, 1, 0], alpha: .9});
`

Read more about color objects

`js
let color = new Color("slategray");
color.lch.l = 80; // Set coord directly in any color space
color.lch.c *= 1.2; // saturate by increasing LCH chroma by 20%
color.hwb.w += 10; // any other color space also available
`

To modify coordinates in any color space you use color.set() and color.setAll():

`js
let color = new Color("slategray");

// Multiple coordinates
color.set({
"lch.l": 80, // set lightness to 80
"lch.c": c => c * 1.2 // Relative manipulation
});

// Set single coordinate
color.set("hwb.w", w => w + 10);
`

Coordinates of the color's color space are available without a prefix:

`js
let color = new Color("slategray").to("lch");

// Multiple coordinates
color.set({
l: 80, // set lightness to 80
c: c => c * 1.2 // Relative manipulation
});

// Set single coordinate
color.set("h", 30);
`

Chaining-style modifications are also supported:
`js
let color = new Color("lch(50% 50 10)");
color = color.set({
h: h => h + 180,
c: 60
}).lighten();
`

You can also use properties:

`js
let color = new Color("slategray");
color.lch.l = 80; // Set coord directly in any color space
color.lch.c *= 1.2; // saturate by increasing LCH chroma by 20%
color.hwb.w += 10; // any other color space also available
`

Coordinates of the color's color space are available without a prefix:

`js
let color = new Color("slategray").to("lch");
color.l = 80; // Set LCH lightness
color.c *= 1.2; // saturate by increasing LCH chroma
`

Read more about color manipulation

Converting between color spaces & stringifying

Convert to any color space:

`js
let color = new Color("slategray");
color.to("lch") // Convert to LCH
`

Output in any color space

`js
let color = new Color("slategray");
color + ""; // default stringification
color.to("p3").toString({precision: 3});
`

Clip to gamut or don't
`js
let color = new Color("p3", [0, 1, 0]);
color.to("srgb") + ""; // Default toString()
color.to("srgb").toString({inGamut: false});
`

Read more about output

Interpolation

Get a function that accepts a percentage:

`js
let color = new Color("p3", [0, 1, 0]);
let redgreen = color.range("red", {
space: "lch", // interpolation space
outputSpace: "srgb"
});
redgreen(.5); // midpoint
`

Interpolation by discrete steps:

`js
let color = new Color("p3", [0, 1, 0]);
color.steps("red", {
space: "lch",
outputSpace: "srgb",
maxDeltaE: 3, // max deltaE between consecutive steps
steps: 10 // min number of steps
});
`

Shortcut for specific points in the range:

`js
let color = new Color("p3", [0, 1, 0]);
let redgreen = color.mix("red", .5, {space: "lch", outputSpace: "srgb"});
let reddishGreen = color.mix("red", .25, {space: "lch", outputSpace: "srgb"});
`

Static syntax (every color method has a static one too):

`js
Color.mix("color(display-p3 0 1 0)", "red", .5);
``

Read more about interpolation

Other Color.js Initiatives

These are all very experimental and not as polished as Color.js itself, but we are excited about their potential.

$3

This is a set of (currently 10) web components for building color-related apps (the first library of its kind to our knowledge).
It includes things like color pickers, color charts, interactive color scales, and more.

$3

A set of color-related apps, such as color pickers, converters, and more.

$3

A research project which aims to analyze designer-created color palettes in a variety of color spaces,
both to document patterns (e.g. what hue names are most popular?)
and to understand what makes aesthetically pleasing color scales.

Maintainer team

Color.js is maintained by a small grassroots core team of core maintainers, with numerous contributions from the community.
The core team is:

Sponsor

Color.js is a free and open source project, developed on a volunteer basis.
We very recently started an Open Collective so you can fund Color.js's development.
If your company depends on Color.js in any way, it is in your best interest to ensure its future is sustainable.

The best way to sponsor Color.js is to become a sponsor on Open Collective:

Once there are enough sponsors, we plan to feature them prominently on our website and README, so if you want to be among the first ones to get your name in there, now’s the chance!