👑 Colord — tiny yet powerful tool for high-performance color manipulations and conversions

The Story

It's been a year since we introduced react-colorful, the fastest and smallest color picker component for React and Preact apps. Developers love how fast it works and how small its bundle is, so the package has become quite popular (about 1 million downloads weekly).

During the maintenance of react-colorful, we examined the color processing and discovered that all popular color manipulation libraries (such as color and tinycolor2) are quite heavy and slow. For instance, importing all 14 components including their styles from the react-colorful package would be less expensive than importing a constructor from tinycolor2.

That is why react-colorful is not dependent on any of these libraries and has its own color conversion logic built from scratch.

A couple of months ago we noticed that the color conversion code we wrote appeared to be quite performant, so we decided to reuse our experience and created a new modern color manipulation library called Colord 👑

Meet Colord 👑

A tiny yet powerful tool for high-performance color manipulations and conversions.

• 📦 Small: Just 1.5 KB gzipped (3x+ lighter than color and tinycolor2)
• 🚀 Fast: 3x+ faster than color and tinycolor2
• 😍 Simple: Chainable API and familiar patterns
• 💪 Immutable: No need to worry about data mutations
• 🛡 Bulletproof: Written in strict TypeScript and has 100% test coverage
• 🗂 Typed: Ships with types included
• 🏗 Extendable: Built-in plugin system to add new functionality
• 👫 Works everywhere: Supports all browsers and Node.js
• 💨 Dependency-free

Benchmarks

We have performed a bunch of benchmarks against popular color manipulation libraries, and Colord currently beats them all.

API

Colord has an immutable chainable API and follows familiar patterns.

import { colord } from "colord";

colord("#ff0000").grayscale().alpha(0.25).toRgbString(); // "rgba(128, 128, 128, 0.25)"
colord("rgb(200, 200, 200)").isLight(); // true
colord("hsl(0deg, 50%, 50%)").darken(0.25).toHex(); // "#602020"

Supported Color Models

• Hexadecimal strings (including 3, 4 and 8 digit notations)
• RGB strings and objects
• HSL strings and objects
• HSV objects
• Color names (via plugin)
• HWB objects and strings (via plugin)
• LCH objects and strings (via plugin)
• LAB objects (via plugin)
• XYZ objects (via plugin)
• CMYK and more are coming...

Plugin System

You probably noticed we used the word "plugin" in the section above. That is actually one of the best things about Colord that other libraries don't have.

By default, Colord includes the most popular color models and functions. The library doesn't add unnecessary expensive features to keep your bundle lightweight, but ships with a powerful plugin system that enables developers to add the methods and color models their applications might require.

import { colord, extend } from "colord";

// 1. import plugins
import a11yPlugin from "colord/plugins/a11y";
import lchPlugin from "colord/plugins/lch";

// 2. enable them
extend([a11yPlugin, lchPlugin]);

// 3. use new methods and parsers
colord("#FFF").isReadable('#DDD'); // false
colord("lch(48.25% 30.07 196.38)").toHex(); // "#008080"

Official plugins are continually being added. These are the ones available right now:

• a11y (Accessibility tools)
• hwb (HWB color model)
• lab (CIE LAB color space)
• lch (CIE LCH color space)
• mix (Color mixing)
• names (CSS color keywords)
• xyz (CIE XYZ color space)

❤️ Thanks for reading

Colord cares about bundle size, application performance, and interface accessibility. I hope that the community shares our values and will find the library useful for further projects.

It will help us a lot if you star the repo on GitHub or share the link to this article with your friends 🙏

omgovich / colord

👑 A tiny yet powerful tool for high-performance color manipulations and conversions