colorjs.io Open in urlscan Pro
3.124.44.91  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Get Color.js
Docs
 * The Color object
 * Supported color spaces
 * Color difference
 * Color manipulation
 * Contrast
 * Gamut Mapping
 * Interpolation
 * Chromatic Adaptation
 * Output
 * Procedural, tree-shakable API

API Play! Demos Tests GitHub File bug


COLOR.JS V0.4.0


LET'S GET SERIOUS ABOUT COLOR

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, OKLab/OKLCh, sRGB
and friends (HSL/HSV/HWB), Display P3, Jzazbz, 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, Jz), 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


COLOR.JS: LET’S GET SERIOUS ABOUT COLOR



 * Official website
 * Contribution guide

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, Jzazbz, 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, Jz), 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


INSTALLATION

Install via npm:

npm install colorjs.io

For quick experiments, you can just import Color.js directly from the CDN with
all modules included:

import Color from "https://colorjs.io/dist/color.js";

You can also import specific modules:

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";

To use import statements in a browser, your <script> needs type="module"

Or, if you'd rather just have Color as a global variable, the classic way, just
include the following script in your HTML:

<script src="https://colorjs.io/dist/color.global.js"></script>

Read more about installation


READING COLORS

Any color from CSS Color Level 4 should work:

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:

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


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

Your new development career awaits. Check out the latest listings.ads via Carbon
From Lea Verou (co-editor of CSS Color 4 and 5) and Chris Lilley (co-editor of
CSS Color 3, 4, and 5; W3C representative to ICC)
Get Color.js
Docs
 * The Color object
 * Supported color spaces
 * Color difference
 * Color manipulation
 * Contrast
 * Gamut Mapping
 * Interpolation
 * Chromatic Adaptation
 * Output
 * Procedural, tree-shakable API

API Play! Demos Tests GitHub File bug