@color2k/compat v1.0.0-rc.5

color2k ·

a color parsing and manipulation lib served in 2kB or less (1.5kB to be more precise)

color2k is a color parsing and manipulation library with the objective of keeping the bundle size as small as possible while still satisfying all of your color manipulation needs in an sRGB space (wide-gamut is not supported).

The bundle size is currently 1.5kB

Size comparison

Installation

npm i --save color2k

If you need to server-side render any colors, you also need to install the node/ssr compatibility package.

# needed in non-browser environments (e.g. gatsby, next.js)
npm i --save @color2k/compat

Usage

import { darken, transparentize } from 'color2k';

// e.g.
darken('blue', 0.1);
transparentize('red', 0.5);

How so small?

There are two secrets that keep this lib especially small:

1. defer to the browser to parse colors via getComputedStyle
2. only support two color models as outputs, namely rgba and hsla

Why getComputedStyle?

The browser already has the ability to parse colors via getComputedStyle. Other color libs use javascript to parse and transform colors. The result of making the browser parse the color is the removal of any code related to parsing colors resulting in a significantly smaller bundle.

Why not getComputedStyle?

Using getComputedStyle is slower than parsing via javascript.

On my 2019 MacBook Pro:

• getComputedStyle: 594,499 ops/sec
• JavaScript: 3,335,123 ops/sec

See here

In order to increase performance, already computed colors are cached.

Why only rgba and hsla as outputs?

This lib was created with the use case of CSS-in-JS in mind. At the end of the day, all that matters is that the browser can understand the color string you gave it as a background-color.

Because only those two color models are supported, we don't have to add code to deal with optional alpha channels or converting to non-browser supported color models (e.g. CMYK).

We believe that this lib is sufficient for all of your color manipulation needs. If we're missing a feature, feel free to open an issue 😎.

Credits

Heavy credits goes to polished.js and sass. Much of the implementation of this lib is copied from polished!

API and Documentation

Head over to the docs site