# Color.js: Let’s get serious about color [![Netlify Status](https://api.netlify.com/api/v1/badges/a6208d72-3d48-43ab-9132-b9f31f828609/deploy-status)](https://app.netlify.com/sites/colorjs/deploys) [![npm](https://img.shields.io/npm/dw/colorjs.io)](https://npmjs.com/package/colorjs.io) [Official website](https://colorjs.io) • [Contribution guide](CONTRIBUTING.md) Color.js is a color conversion and modification library originally created by two of the editors of the CSS Color specifications: Lea Verou and Chris Lilley. They continue to work on it, but are also joined by an exceptional small grassroots team of co-maintainers. ## Features - **Color space agnostic**: Each color object is basically a list of coords and a color space reference. Operations are color space agnostic. Modules for a wide variety of color spaces, including Lab/LCh, OKLab/OKLCh, sRGB and friends (HSL/HSV/HWB), Display P3, J_za_zb_z, REC.2100 and many more. - **Doesn't gloss over color science**: Actual gamut mapping instead of naïve clipping, multiple DeltaE methods (76, CMC, 2000, J_z), multiple chromatic adaptation methods (von Kries, Bradford, CAT02, CAT16), all with sensible defaults - **Up to date with CSS Color 4**: Every CSS Color 4 format & color space supported for both input and output, whether your browser supports it or not. - **Readable, object-oriented API**: Color objects for multiple operations on the same color, and static `Color.something()` functions for one-off calculations - **Modular & Extensible**: Use only what you need, or a bundle. Client-side or Node. Deep extensibility with hooks. - **Fast & efficient**: Procedural, tree-shakeable API available for performance sensitive tasks and reduced bundle size

## 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](https://limonte.dev/total-npm-downloads/?package=colorjs.io)! - Used by several [high impact projects](https://www.npmjs.com/browse/depended/colorjs.io), including [Sass](https://sass-lang.com/), [Open Props](https://open-props.style/), [axe](https://www.deque.com/axe/) accessibility testing engine, and [OddContrast](https://www.oddcontrast.com/) and [CSS HD Gradients](https://gradient.style/) 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](https://github.com/wicg/color-api).

## Installation Color.js is designed make simple things easy, and complex things possible, and that extends to installation as well. For quick experiments, you can just import Color.js directly from the CDN (kindly provided by the awesome folks at [Netlify](https://netlify.com)) with all modules included: ```js import Color from "https://colorjs.io/dist/color.js"; ``` You can also install via npm if you’d prefer: ``` npm install colorjs.io ``` Whether you’re using NPM, the CDN, or local files, Color.js allows you to also import specific modules by directly importing from `src`: - `https://colorjs.io/src/` for the CDN - `node_modules/colorjs.io/src/ for NPM For example: ```js import Color from "https://colorjs.io/src/color.js"; import p3 from "https://colorjs.io/src/spaces/p3.js"; import rec2020 from "https://colorjs.io/src/spaces/rec2020.js"; import deltaE200 from "https://colorjs.io/src/deltaE/deltaE2000.js"; ``` Warning: To use `import` statements in a browser, your ` ```

Manipulating colors

You can use properties to modify coordinates of any color space and convert back ```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 ```

c	File Name	Size	T	Date
zip	dist/	4096	---	2026-06-10 03:35:32
zip	src/	4096	---	2026-06-10 03:35:33
zip	types/	4096	---	2026-06-10 03:35:33
-	LICENSE	1080	%	2026-05-20 11:21:42
-	README.json	21	json	2026-05-20 11:21:42
-	README.md	8355	md	2026-05-20 11:21:42
-	package.json	2995	json	2026-05-20 11:21:42

🌲 / quartz node_modules colorjs.io

control-panel