Skip to content
a color parsing and manipulation lib served in 2kB or less
TypeScript JavaScript CSS
Branch: master
Clone or download

Latest commit

renovate Update all (#68)
* Update all
Latest commit 3ce5fff Jun 4, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows use v2 (#36) May 18, 2020
packages Remove brightness and darken (#52) May 25, 2020
scripts add color2k globally for color2k.com (#33) May 17, 2020
website takes 2 seconds Jun 3, 2020
.eslintrc initial commit May 10, 2020
.gitignore misc May 11, 2020
.nvmrc add nvmrc for netlify May 11, 2020
.prettierrc initial commit May 10, 2020
LICENSE Create LICENSE May 11, 2020
README.md Remove brightness and darken (#52) May 25, 2020
babel.config.json monorepo setup + node only implementation May 10, 2020
jest.config.js add demo link (#30) May 16, 2020
loadershim.js Feat/jsdom (#24) May 14, 2020
package-lock.json Update all (#68) Jun 4, 2020
package.json Update all (#68) Jun 4, 2020
renovate.json add renovate May 10, 2020
rollup.config.js remove nodePlugins May 14, 2020
tsconfig.json fix build script May 11, 2020

README.md

color2k
bundlephobia github status checks codecov

a color parsing and manipulation lib served in 2kB or less (1.4kB 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.4kB

Size comparison

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

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

You can’t perform that action at this time.