š Extendable: Built-in plugin system to add new functionality
š CSS-compliant: Strictly follows CSS Color Level specifications
š« Works everywhere: Supports all browsers and Node.js
šØ Dependency-free
Benchmarks
Library
Operations/sec
Size (minified)
Size (gzipped)
Dependencies
Type declarations
colord š
3,524,989
color
744,263
tinycolor2
971,312
ac-colors
660,722
chroma-js
962,967
The performance results were generated on a MBP 2019, 2,6 GHz Intel Core i7 by running npm run benchmark in the library folder. See tests/benchmark.ts.
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.
Produces a mixture of two colors and returns the result of mixing them (new Colord instance).
In contrast to other libraries that perform RGB values mixing, Colord mixes colors through LAB color space. This approach produces better results and doesn't have the drawbacks the legacy way has.
Returns a boolean indicating whether or not an input has been parsed successfully.
Note: If parsing is unsuccessful, Colord defaults to black (does not throws an error).
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)
.delta(color2 = "#FFF") (lab plugin)
Calculates the perceived color difference between two colors.
The difference calculated according to Delta E2000.
The return value is 0 if the colors are equal, 1 if they are entirely different.
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)
In contrast to other libraries that perform RGB values mixing, Colord mixes colors through LAB color space. This approach produces better results and doesn't have the drawbacks the legacy way has.
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
We found that @pixi/colord demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 2 open source maintainers collaborating on the project.
Last updated on 23 Sep 2023
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.
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.