color-box

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

Demo Website (work in progress) | Documentation

About

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

Install

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");

RGB:

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

HSL:

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);
console.log(hexString(myDarkerColor));
// #1a334d