High-Performance Color Manipulation in JavaScript – Color-bits

Color-bits is a JavaScript library for high-performance color manipulation.

It works by representing RGBA colors as single int32 numbers. This compact representation contributes to its speed and efficiency by minimizing memory allocation during color processing.

The library supports CSS Color Module Level 4 color spaces in absolute representations. It converts non-sRGB color spaces using clipping, mirroring browser behavior. Color-bits preserves up to 8 bits of precision for each channel.

Every function in color-bits is tree-shakeable, resulting in a bundle size between 1.5kb and 3kb, depending on usage. Benchmarks show color-bits outperforming similar libraries, with operations per second reaching 22,966,299 – significantly faster than alternatives like colord, tinycolor2, chroma-js, and color.

How to use it:

1. Install Color-bits via NPM or PNPM.

pnpm install color-bits

2. Import the necessary functions to manipulate colors. Here’s an example of how to parse and adjust opacity on a color:

import * as Color from 'color-bits'

const background = Color.parse('#fafaf8')
const seeThrough = Color.alpha(background, 0.8)
const output = Color.format(seeThrough) // #fafaf8cc

3. For scenarios where you don’t need to store colors but want to manipulate them on the fly, the color-bits/string module simplifies string-based operations. This can offer performance improvements by handling string transformations directly.

import * as Color from 'color-bits/string'

const output = Color.alpha('#fafaf8', 0.8) // #fafaf8cc

4. All possible functions for color manipulation.

alpha(color, value)
blend(background, overlay, opacity, gamma)
darken(color, coefficient)
format(color)
formatHEX(color)
formatHEXA(color)
formatHSLA(color)
formatHWBA(color)
formatRGBA(color)
from(color)
getAlpha(c)
getBlue(c)
getGreen(c)
getLuminance(color)
getRed(c)
lighten(color, coefficient)
newColor(r, g, b, a)
parse(color)
parseColor(color)
parseHex(color)
setAlpha(c, value)
setBlue(c, value)
setGreen(c, value)
setRed(c, value)
toHSLA(color)
toHWBA(color)
toNumber(color)
toRGBA(color)

Changelog:

v1.1.0 (01/29/2025)

• feat: formatHEXA, formatHEX