Package Exports

color2k

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color2k) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

lib	size
polished	11.2kB
chroma-js	13.7kB
color	7.6kB
tinycolor2	5kB
color2k	1.5kB 😎

Installation

npm i --save color2k

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

# only needed in SSR 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:

defer to the browser to parse colors via getComputedStyle
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

color2k