Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
colorjs.io
Advanced tools
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.
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));
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 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 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.
Features:
Color.something()
functions for one-off calculationsInstall 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";
Warning: 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>
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});
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
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});
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);
FAQs
Let’s get serious about color
The npm package colorjs.io receives a total of 79,713 weekly downloads. As such, colorjs.io popularity was classified as popular.
We found that colorjs.io demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.