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.
What are colord's main functionalities?
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.
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.
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.
Colord is a tiny yet powerful tool for high-performance color manipulations and conversions.
Features
π¦ Small: Just 1.4 KB gzipped (3x+ lighter than color and tinycolor2)
π Extendable: Built-in plugin system to add new functionality
π« Works everywhere: Supports all browsers and Node.js
π¨ Dependency-free
Benchmarks
Library
Operations/sec
Size (minified)
Size (gzipped)
Dependencies
Type declarations
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.
The library's parser cares about you and tries to prevent as many mistakes and typos as possible. It trims unnecessary whitespaces, clamps numbers, disregards character case, punctuation, brackets, etc. These are some examples:
Returns the hexadecimal representation of a color. When the alpha channel value of the color is less than 1, it outputs #rrggbbaa format instead of #rrggbb.
Converts a color to a CSS keyword. Returns undefined if the color is not specified in the specs.
import { colord, extend } from"colord";
import namesPlugin from"colord/plugins/names";
extend([namesPlugin]);
colord("ff6347").toName(); // "tomato"colord("#00ffff").toName(); // "cyan"colord("#aabbcc").toName(); // undefined (the color is not specified in CSS specs)
Calculates a contrast ratio for a color pair. This luminance difference is expressed as a ratio ranging from 1 (e.g. white on white) to 21 (e.g., black on a white). WCAG Accessibility Level AA requires a ratio of at least 4.5 for normal text and 3 for large text.
colord("#000000").contrast(); // 21 (black on white)colord("#ffffff").contrast("#000000"); // 21 (white on black)colord("#777777").contrast(); // 4.47 (gray on white)colord("#ff0000").contrast(); // 3.99 (red on white)colord("#0000ff").contrast("#ff000"); // 2.14 (blue on red)
colord("#000000").isReadable(); // true (normal black text on white bg conforms to WCAG AA)colord("#777777").isReadable(); // false (normal gray text on white bg conforms to WCAG AA)colord("#ffffff").isReadable("#000000"); // true (normal white text on black bg conforms to WCAG AA)colord("#e60000").isReadable("#ffff47"); // true (normal red text on yellow bg conforms to WCAG AA)colord("#e60000").isReadable("#ffff47", { level: "AAA" }); // false (normal red text on yellow bg does not conform to WCAG AAA)colord("#e60000").isReadable("#ffff47", { level: "AAA", size: "large" }); // true (large red text on yellow bg conforms to WCAG AAA)
Plugins
Colord has a built-in plugin system that allows new features and functionality to be easily added.
import { colord, extend } from"colord";
import a11yPlugin from"colord/plugins/a11y";
extend([a11yPlugin]);
colord("#000000").luminance(); // 0colord("#ccddee").luminance(); // 0.71colord("#ffffff").luminance(); // 1colord("#000000").contrast(); // 21 (black on white)colord("#ffffff").contrast("#000000"); // 21 (white on black)colord("#0000ff").contrast("#ff000"); // 2.14 (blue on red)colord("#000000").isReadable(); // true (black on white)colord("#ffffff").isReadable("#000000"); // true (white on black)colord("#777777").isReadable(); // false (gray on white)colord("#e60000").isReadable("#ffff47"); // true (normal red text on yellow bg conforms to WCAG AA)colord("#e60000").isReadable("#ffff47", { level: "AAA" }); // false (normal red text on yellow bg does not conform to WCAG AAA)colord("#e60000").isReadable("#ffff47", { level: "AAA", size: "large" }); // true (large red text on yellow bg conforms to WCAG AAA)
names (CSS color keywords)
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)
Colord is written in strict TypeScript and ships with types in the library itself β no need for any other install. We provide everything you need in one tiny package.
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.
π A tiny yet powerful tool for high-performance color manipulations and conversions
The npm package colord receives a total of 9,119,765 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.
Package last updated on 07 Apr 2021
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.
Elasticβs return to open source with the AGPL license has been met with skepticism, as many developers see it as a strategic move rather than a genuine effort to restore user trust and freedoms.
A new "revival hijack" supply chain attack targets deleted Python packages, with an estimated 22K packages at risk. Socket can detect and block hijacked packages that have added malicious code.