What is colorjs.io?
colorjs.io is a comprehensive library for color manipulation and conversion. It supports a wide range of color spaces and provides utilities for color mixing, contrast checking, and more.
What are colorjs.io's main functionalities?
Color Conversion
This feature allows you to convert colors between different color spaces. In the example, the color 'red' is converted to the LCH color space.
const Color = require('colorjs.io');
const color = new Color('red');
console.log(color.to('lch').toString());
Color Manipulation
This feature allows you to manipulate colors, such as lightening or darkening them. In the example, the color 'blue' is lightened by 20%.
const Color = require('colorjs.io');
const color = new Color('blue');
const lighterColor = color.lighten(0.2);
console.log(lighterColor.toString());
Color Mixing
This feature allows you to mix two colors together. In the example, 'red' and 'blue' are mixed in equal parts to create a new color.
const Color = require('colorjs.io');
const color1 = new Color('red');
const color2 = new Color('blue');
const mixedColor = color1.mix(color2, 0.5);
console.log(mixedColor.toString());
Contrast Checking
This feature allows you to check the contrast ratio between two colors. In the example, the contrast ratio between 'white' and 'black' is calculated.
const Color = require('colorjs.io');
const color1 = new Color('white');
const color2 = new Color('black');
console.log(color1.contrast(color2));
Other packages similar to colorjs.io
color
The 'color' package is a popular library for color manipulation and conversion. It supports a variety of color spaces and provides methods for color transformations. Compared to colorjs.io, it has a simpler API but fewer features.
chroma-js
chroma-js is another powerful library for color manipulation and conversion. It offers a wide range of color spaces and provides utilities for color scales and interpolation. Compared to colorjs.io, chroma-js is more focused on color scales and data visualization.
tinycolor2
tinycolor2 is a lightweight library for color manipulation and conversion. It supports basic color transformations and provides a simple API. Compared to colorjs.io, tinycolor2 is less feature-rich but more lightweight and easier to use for simple tasks.
Color.js: Let’s get serious about color
Official website • Contribution guide
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,
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
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) with all modules included:
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:
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 <script>
needs type="module"
Are you old school and prefer to simply have a global Color
variable?
We’ve got you covered!
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;
color.lch.c *= 1.2;
color.hwb.w += 10;
To modify coordinates in any color space you use color.set()
and color.setAll()
:
let color = new Color("slategray");
color.set({
"lch.l": 80,
"lch.c": c => c * 1.2
});
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");
color.set({
l: 80,
c: c => c * 1.2
});
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;
color.lch.c *= 1.2;
color.hwb.w += 10;
Coordinates of the color's color space are available without a prefix:
let color = new Color("slategray").to("lch");
color.l = 80;
color.c *= 1.2;
Read more about color manipulation
Converting between color spaces & stringifying
Convert to any color space:
let color = new Color("slategray");
color.to("lch")
Output in any color space
let color = new Color("slategray");
color + "";
color.to("p3").toString({precision: 3});
Clip to gamut or don't
let color = new Color("p3", [0, 1, 0]);
color.to("srgb") + "";
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",
outputSpace: "srgb"
});
redgreen(.5);
Interpolation by discrete steps:
let color = new Color("p3", [0, 1, 0]);
color.steps("red", {
space: "lch",
outputSpace: "srgb",
maxDeltaE: 3,
steps: 10
});
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