color-box on GitHub
DocumentationFeatures
color-box enables you to easily adjust, inspect, mix colors and more. It's modular and supports tree shaking - you only bundle what you use! TypeScript types are included and all functions are immutable, always returning a new Color object.
Example
import { Color, darken, hexString } from "@jgleman/color-box";
const myColor = new Color("#336699");
const myDarkerColor = darken(myColor, 20);
console.log(hexString(myDarkerColor));
// #1a334d
Live Demo
Adjust the mix slider to see a demonstration of the mix function. Try entering your own colors.
The mix function is an implementation of the mixing algorithm from Sass.
#ff0000
rgb(255 0 0)
hsl(0 100% 50%)
#800080
rgb(128 0 128)
hsl(300 100% 25%)
#0000ff
rgb(0 0 255)
hsl(240 100% 50%)
Contrast Ratio between Color 1 and Color 2: 4.7:1
const colorA = new Color("#ff0000");
const colorB = new Color("#0000ff");
const mixedColor = mix(colorB, colorA, 50);Adjust the various properties of a color, such as hue, saturation and lightness:
#00ff00
rgb(0 255 0)
hsl(120 100% 50%)
const color = new Color("#00ff00");
const newColor = setLightness(setSaturation(setHue(color, 120), 100), 50);Adjust the opacity (alpha) of a color.
Alpha 100%
const color = new Color("#000000");
const newColor = setAlpha(color, 100));Make a color darker or lighter
#2dd4bf
rgb(45 212 191)
hsl(172 66% 50%)
const color = new Color("{ldColor}");
const newColor = lighten(color, 0);And More!
See the documentation for a complete list of available functions.