Fully color space aware
Each color belongs to a color space; operations are color space agnostic. Modules for a wide variety of color spaces, including Lab/LCH, sRGB and friends (HSL/HSV/HWB), Display P3, Jzazbz, REC.2100 and more.
Color.js is currently an unreleased work in progress. Here be dragons. If you found this website somehow, feel free to try it out and give us feedback, but sshhhh! 🤫 There are more bugs in the live code snippets ("Color Notebook") in the docs than the actual Color.js library, so before reporting a bug, please try to reproduce it outside Color Notebook.
Reading colors
Any color from CSS Color Level 4 should work:
let color = new Color("slategray");
let color2 = new Color("hwb(60 30% 40%)");
let color3 = new Color("color(display-p3 0 1 0)");
let color4 = new Color("lch(50% 80 30)");
// CSS variables work too!
let colorjsBlue = new Color("--color-blue");
Manipulating colors
You can use properties to modify coordinates of any color space and convert back
let color = new Color("slategray");
color.lightness = 80; // LCH coords available directly on colors
color.chroma *= 1.2; // saturate 20%
color.hwb.whiteness += 10; // any other color space also available
Chaining-style modifications are also supported:
let color = new Color("lch(50% 50 10)");
color = color.set({
hue: h => h + 180,
chroma: 60
}).lighten();
Converting between color spaces & stringifying
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").toString({inGamut: false})
Change color space:
let color = new Color("slategray");
color.space = "srgb"; // Convert to sRGB
color.spaceId = "srgb"; // Same
color.space = "sRGB"; // Capitalization doesn't matter
color.space = Color.spaces.srgb; // Same
color.spaceId = Color.spaces.srgb; // Same
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);