Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
👑 A tiny yet powerful tool for high-performance color manipulations and conversions
The colord npm package is a tiny yet powerful tool for color conversions and manipulations. It provides functions for parsing colors, converting them between different color models, and manipulating their properties such as hue, saturation, lightness, and alpha channel.
Parsing and converting colors
This feature allows you to parse color strings and convert them to different color models. The example shows how to parse a hex color and convert it to an RGB object.
const { colord, extend } = require('colord');
const c = colord('#ff5733');
console.log(c.toRgb()); // { r: 255, g: 87, b: 51, a: 1 }
Manipulating color properties
This feature enables you to manipulate color properties such as alpha channel. The example demonstrates setting the alpha of an RGBA color and converting it to a string.
const { colord } = require('colord');
const color = colord('rgba(255, 87, 51, 1)');
console.log(color.alpha(0.5).toRgbString()); // 'rgba(255, 87, 51, 0.5)'
Mixing colors
This feature allows you to mix two colors together. The example mixes a color with white at a 50% ratio and outputs the hex value of the result.
const { colord } = require('colord');
const mix = colord('#ff5733').mix('#ffffff', 0.5).toHex();
console.log(mix); // '#ffaba9'
Generating readable colors
This feature helps in checking if a color is readable on another color, which is useful for accessibility. The example checks if the color '#ff5733' is readable on a white background.
const { colord, extend } = require('colord');
extend([require('colord/plugins/a11y')]);
const color = colord('#ff5733');
console.log(color.isReadable('#ffffff')); // true or false
Chroma.js is a powerful library for all kinds of color conversions and color scales. It is more feature-rich and has a larger footprint compared to colord, which is more lightweight.
TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It offers similar functionalities to colord but with a different API design and slightly larger size.
The 'color' package is another tool for color conversion and manipulation. It provides a chainable API and is more established but is larger in size compared to colord.
Library | Operations/sec | Size | Size (gzip) | Dependencies | Types |
---|---|---|---|---|---|
colord 👑 | 2 274 420 | ||||
color | 717 048 | ||||
tinycolor2 | 956 285 | ||||
ac-colors | 637 469 | ||||
chroma-js | 900 826 |
The performance results were generated on a MBP 2019, 2,6 GHz Intel Core i7 via running npm run benchmark
in the library folder. See tests/benchmark.ts.
npm i colord
import { colord } from "colord";
colord("#ff0000").grayscale().alpha(0.25).toRgbaString(); // "rgba(128, 128, 128, 0.25)"
colord("rgb(192, 192, 192)").isLight(); // true
colord("hsl(0, 50%, 50%)").darken(0.25).toHex(); // "#602020"
// String input examples
colord("FFF");
colord("#ffffff");
colord("#ffffffff");
colord("rgb(255, 255, 255)");
colord("rgba(255, 255, 255, 1)");
colord("hsl(0, 100%, 100%)");
colord("hsla(0, 100%, 100%, 1)");
// Object input examples
colord({ r: 255, g: 255, b: 255 });
colord({ r: 255, g: 255, b: 255, a: 1 });
colord({ h: 360, s: 100, l: 100 });
colord({ h: 360, s: 100, l: 100, a: 1 });
colord({ h: 360, s: 100, v: 100 });
colord({ h: 360, s: 100, v: 100, a: 1 });
The library's parser trims unnecessary whitespaces, clamps numbers, disregards character case, punctuation, brackets, etc.
colord(" aBc ").toHex(); // "#aabbcc"
colord("__rGbA 10 20, 999...").toRgbaString(); // "rgba(10, 20, 255, 1)"
colord(" hsL( 10, 200% 30 .5!!!").toHslaString(); // "hsla(10, 100%, 30%, 0.5)"
Method | Result example |
---|---|
toHex() | "#ffffff" |
toRgba() | { r: 255, g: 255, b: 255, a: 1 } |
toRgbaString() | "rgba(255, 255, 255, 1)" |
toHsla() | { h: 360, s: 100, l: 100, a: 1 } |
toHslaString() | hsla(360, 100%, 100%, 1) |
toHsva() | { h: 360, s: 100, v: 100, a: 1 } |
Method | Note |
---|---|
alpha(value) | |
invert() | |
saturate(ratio = 0.1) | |
desaturate(ratio = 0.1) | |
grayscale() | Same as desaturate(1) |
lighten(ratio = 0.1) | |
darken(ratio = 0.1) |
Method | Result example | Note |
---|---|---|
alpha() | 0.5 | |
brightness() | 0.5 | According to WCAG algorithm |
isLight() | false | Same as brightness() >= 0.5 |
isDark() | true | Same as brightness() < 0.5 |
Colord has a built-in plugin system that allows new features and functionality to be easily added.
Provides options to convert a color into a CSS color keyword and vice versa.
import { colord, extend } from "colord";
import namesPlugin from "colord/plugins/names";
extend([namesPlugin]);
colord("tomato").toHex(); // "#ff6347"
colord("#00ffff").toName(); // "cyan"
colord("#aabbcc").toName(); // undefined (the color is not specified in CSS specs)
Adds support of CIE XYZ color model. The conversion logic is ported from CSS Color Module Level 4 Specification.
import { colord, extend } from "colord";
import xyzPlugin from "colord/plugins/xyz";
extend([xyzPlugin]);
colord("#ffffff").toXyz(); // { x: 95.047, y: 100, z: 108.883, a: 1 }
colord({ x: 0, y: 0, z: 0 }).toHex(); // "#000000"
While not only typing its own functions and variables, Colord can also help you type yours. Depending on the color space you are using, you can also import and use the type that is associated with it.
import { RgbColor, RgbaColor, HslColor, HslaColor, HsvColor, HsvaColor } from "colord";
const foo: HslColor = { h: 0, s: 0, l: 0 };
const bar: RgbColor = { r: 0, g: 0, v: 0 }; // ERROR
rgb(256, -1, 999, 2)
)brightness
, isDark
, isLight
alpha
lighten
, darken
invert
FAQs
👑 A tiny yet powerful tool for high-performance color manipulations and conversions
The npm package colord receives a total of 7,914,458 weekly downloads. As such, colord popularity was classified as popular.
We found that colord demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.