A JavaScript/TypeScript Color Utility Library (inspired by date-fns).

Demo Website (work in progress) | Documentation


This library aims to work like date-fns does for dates, but for colors. This library provides a basic Color object which is then passed to the utility functions. Any utility function that changes the passed in color, does so immutably, returning a new color. Another goal is for any color manipulation functions to match the Sass spec where it makes sense.

  • Modular, only use what you need. Supports tree-shaking.
  • Immutable, always returns a new color instance.
  • TypeScript support

To Do List

  • more functionality
  • additional color formats (hsv, hwb, cmyk, stretch goal: oklch, oklab, other CSS4 colors)
  • optimizations
  • so much more


npm install --save @jgleman/color-box

Quick Usage

See the documentation for more info on all available functions.

import { Color } from "@jgleman/color-box"

To create a new color, you can provide a color as a string in either hex:

const myColor = new Color("#336699");


const myColor = new Color("rgb(51 102 153)");


const myColor = new Color("hsl(210 50% 40%)");

A Color object represents the color you have entered internally as HEX, RGB and HSL. Once you have created a Color, you can use that color in any of the provided functions:

import { Color, darken, hexString } from "@jgleman/color-box";

const myColor = new Color("#336699");
const myDarkerColor = darken(myColor, 20);
// #1a334d

Generated using TypeDoc