Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ricokahler/color2k
a color parsing and manipulation lib served in roughly 2kB
https://github.com/ricokahler/color2k
chroma-js color color-manipulation color-parser css-in-js polished tinycolor
Last synced: 3 days ago
JSON representation
a color parsing and manipulation lib served in roughly 2kB
- Host: GitHub
- URL: https://github.com/ricokahler/color2k
- Owner: ricokahler
- License: mit
- Created: 2020-05-10T00:29:24.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-13T10:25:12.000Z (13 days ago)
- Last Synced: 2025-01-16T01:12:38.468Z (10 days ago)
- Topics: chroma-js, color, color-manipulation, color-parser, css-in-js, polished, tinycolor
- Language: TypeScript
- Homepage: https://color2k.com
- Size: 2.83 MB
- Stars: 618
- Watchers: 6
- Forks: 11
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - color2k
- awesome-list - color2k
README
# [color2k](https://color2k.com)
[](https://bundlephobia.com/result?p=color2k) [](https://github.com/ricokahler/color2k/actions) [](https://codecov.io/gh/ricokahler/color2k)  [](https://github.com/semantic-release/semantic-release)
> a color parsing and manipulation lib served in roughly 2kB or less (2.8kB 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.
The full bundle size is [currently 2.8kB](https://bundlephobia.com/result?p=color2k) but [gets as small as 2.1k](https://bundlejs.com/?q=color2k&treeshake=[{darken}]) with tree shaking.
## Size comparison
| lib | size |
| --------------------------------------------------------- | ----------------------------------------------------- |
| [chroma-js](https://github.com/gka/chroma.js) | [13.7kB](https://bundlephobia.com/result?p=chroma-js) |
| [polished](https://github.com/styled-components/polished) | [11.2kB](https://bundlephobia.com/result?p=polished) |
| [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 | [2.8kB](https://bundlephobia.com/result?p=color2k) 😎 |
👋 Compare tree-shaken bundle outputs on [bundlejs.com](https://bundlejs.com/?share=PTAEFcDsGMHsFt4FNIBdQENIBNRIB4AOsATuvLNuADZIDOoqsoc8hGJSjAFkgJYlQdPgC96oAFASQeIqXQAqUADMSCUACJo3NfAwBaAFZ0NAbmlgCxMqCWr1G4tT51e2MxdnXFK3ZrjUpB4yVvK2vg6ofJAAngGkAEweoTYA3tgcANYoAL4R8P6wgSQJmR5AA)
## Installation
Install with a package manager such as `npm`
```
npm i color2k
```
**OR** use with [skypack.dev](https://www.skypack.dev/) in supported environments (e.g. [deno](https://deno.land/manual/linking_to_external_code), [modern browsers](https://docs.skypack.dev/#whats-old-is-new-again)).
```js
import { darken, transparentize } from 'https://cdn.skypack.dev/color2k?min';
```
## Usage
```js
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. Simplicity — only handles basic color manipulation functions
2. Less branching in code — only support two color models as outputs, namely `rgba` and `hsla`
### 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](https://github.com/ricokahler/color2k/issues/new) 😎.
## 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](https://color2k.com)