DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for πŸ‘‘ Colord β€” tiny yet powerful tool for high-performance color manipulations and conversions
Vlad Shilov
Vlad Shilov

Posted on

πŸ‘‘ 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.

Benchmarks

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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 πŸ™

GitHub logo omgovich / colord

πŸ‘‘ A tiny yet powerful tool for high-performance color manipulations and conversions

Top comments (0)

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs