color2k – a tiny color manipulation lib (2.9kB) perfect for CSS-in-JS
Tags: showdev, javascript, opensource
Published: 2020-05-22 14:03:45

## What is color2k?

> Edit: after the 1.0 release, the bundle size did increase due to compatibility issues. Rest assured, color2k is still the smallest library of its kind.

[color2k](https://github.com/ricokahler/color2k) is a plain and simple color manipulation library. It can take in colors and change them programmatically giving you the power to write something like this 👇

```js
createPalette(['palevioletred', 'peachpuff', 'papayawhip', 'lavenderblush']);
```

that can output something like this ([CodeSandbox link](https://codesandbox.io/s/color2k-demos-8vjh3?file=/src/App.tsx)) 👇

[![palette example](https://ricos-dropbox.netlify.app/color2k-demo.png)](https://codesandbox.io/s/color2k-demos-8vjh3?file=/src/App.tsx)

## Why color2k?

color2k is not the first of its kind. There are many others that do a great job but this one has one goal in mind — a small bundle size.

| lib                                                       | size                                                  |
| --------------------------------------------------------- | ----------------------------------------------------- |
| [polished](https://github.com/styled-components/polished) | [11.2kB](https://bundlephobia.com/result?p=polished)  |
| [chroma-js](https://github.com/gka/chroma.js)             | [13.7kB](https://bundlephobia.com/result?p=chroma-js) |
| [color](https://github.com/Qix-/color)                    | [7.6kB](https://bundlephobia.com/result?p=color)      |
| [tinycolor2](https://github.com/bgrins/TinyColor)         | [5kB](https://bundlephobia.com/result?p=tinycolor2)   |
| [color2k](https://github.com/ricokahler/color2k)          | [1.5kB](https://bundlephobia.com/result?p=color2k) 😎 |

## Why does a small bundle size matter?

Bundle size is a key indicator of web performance simply because downloading and [parsing JavaScript on a slow network with a less than ideal processor is expensive](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4). Before the user can interact with your page, the browser must download, parse, and execute your code — this is why 50kB of JavaScript is not equivalent to 50kB of JPEG.

## How is color2k so small?

There are two secrets to color2k's bundle size:

### 1. `getComputedStyle`

color2k's main secret for a small bundle size is deferring to the browser to parse colors instead of doing it itself. color2k uses [`getComputedStyle` to parse colors into RGBA](https://github.com/ricokahler/color2k/blob/24473dfa56e89fe97f9a2189d329587e7bcc684f/packages/parse-to-rgba/src/index.ts#L50-L57). This enables it to accept any color you can pass to as a CSS property value.

### 2. Do less conversions

color2k was written for the use case of CSS-in-JS. In this context, it doesn't really matter if the color is output as `hex` vs `rgb` vs `hsla`. color2k only does the conversions it needs in order to manipulate your color and that's it.

## Sound interesting?

Check it out! color2k makes the perfect companion lib for CSS-in-JS 🚀 [color2k.com](https://color2k.com) | [github](https://github.com/ricokahler/color2k)