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 2 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.

Manipulating colors

You can use properties to modify coordinates of any color space and convert back

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():

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:

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:

let color = new Color("lch(50% 50 10)");
color = color.set({
	h: h => h + 180,
	c: 60
}).lighten();

You can also use properties:

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:

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:

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

Output in any color space

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

Clip to gamut or don't

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:

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:

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:

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):

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

Read more about interpolation