/kandinsky-js

🌈A tiny colour library

Primary LanguageJavaScriptMIT LicenseMIT

Kandinsky JS


A (mini) colour manipulation library

Installation

npm install --save kandinsky-js

and import as needed.

Features

  • Written in TypeScript, usable in JavaScript
  • Immutable, composable functions
  • Deals with hex, rgb and hsl colours
  • Programmatic generation for linear and non-linear gradients

API

Types

type RGB = [number, number, number];
type HSL = [number, number, number];

// When either RGB or HSL colours can be used
type XYZ = RGB | HSL;

// `t` is expected to be in range [0, 1], and the function should return a value
// in the range [0, 1]
type EaseFn = (t: number) => number;

rgb2hsl(rgbArray)

returns a hsl array

rgb2hsl: ([r, g, b]: RGB) => HSL;

hsl2rgb(hslArray)

returns an rgb array

hsl2rgb: ([h, s, l]: HSL) => RGB;

hex2rgb(hexString)

returns an rgb array

hex2rgb: (hex: string) => RGB;

rgb2hex(rgbArray)

returns a hex string

rgb2hex: (rgb: RGB) => string;

hex2hsl(hexString)

returns a hsl array

hex2hsl: (hex: string) => HSL;

hsl2hex(hslArray)

returns a hex string

hsl2hex: (hsl: HSL) => string;

darkenRgb(amount, rgbArray)

returns a darkened rgb array. amount is a value in the range [0, 1]

darkenRgb: (amount: number, rgb: RGB) => RGB;

lightenRgb(amount, rgbArray)

returns a lightened rgb array. amount is a value in the range [0, 1]

lightenRgb: (amount: number, rgb: RGB) => RGB;

darkenHsl(amount, hslArray)

returns a darkened hsl array. amount is a value in the range [0, 1]

darkenHsl: (amount: number, [h, s, l]: HSL) => HSL;

lightenHsl(amount, hslArray)

returns a lightened hsl array. amount is a value in the range [0, 1]

lightenHsl: (amount: number, [h, s, l]: HSL) => HSL;

lightenHex(amount, hexString)

returns a lightened hex string. amount is a value in the range [0, 1]

lightenHex: (amount: number, hex: string) => string;

darkenHex(amount, hexString)

returns a darkened hex string. amount is a value in the range [0, 1]

darkenHex: (amount: number, hex: string) => string;

lerp3(t, c1, c2)

returns a Vector3 colour somewhere between c1 and c2. t is the "time" value in the range [0, 1]

lerp3: (t: number, [a1, b1, c1]: XYZ, [a2, b2, c2]: XYZ) => XYZ;

linearGradient(n, c1, c2)

returns an length n array of Vector3 colours. colours are evenly spaced between c1 and c2.

linearGradient: (n: number, c1: XYZ, c2: XYZ) => XYZ[];

gradient(easeFn, n, c1, c2)

returns an length n array of Vector3 colours. colours are between c1 and c2, and are spaced according to the easing function easeFn.

gradient: (ease: EaseFn, n: number, c1: XYZ, c2: XYZ) => XYZ[];

multiGradient(n, [col1, col3, ..., colN])

returns a length n array of Vector3 colours. colours are the ones formed from the linearGradient(n/(numColours-1), col1, col2) for all colours col1, col2, ..., colN

multiGradient: (n: number, colors: XYZ[]) => XYZ[];

rLinearGradient(n, c1, c2)

returns a rounded, length n array of Vector3 colours. colours are evenly spaced between c1 and c2.

rLinearGradient: (n: number, c1: XYZ, c2: XYZ) => XYZ[];

rGradient(easeFn, n, c1, c2)

returns a rounded, length n array of Vector3 colours. colours are between c1 and c2, and are spaced according to the easing function easeFn.

rGradient: (ease: EaseFn, n: number, c1: XYZ, c2: XYZ) => XYZ[];

rMultiGradient(n, [col1, col3, ..., colN])

returns a rounded, length n array of Vector3 colours. colours are the ones formed from the linearGradient(n/(numColours-1), col1, col2) for all colours col1, col2, ..., colN

rMultiGradient: (n: number, colors: XYZ[]) => XYZ[];

complimentHex(n, hexString)

returns an length n array of hex strings. The 0th color is the same as the input hexString, while the others are colours corresponding to an eve turn around the colour wheel. If n is 3 for example, the two other colours would represent a 1/3 and 2/3 rotation of the colour wheel.

complimentHex: (n: number, hex: string) => string[];

complimentHsl(n, hsl)

returns an length n array of hsl Vector3. The 0th color is the same as the input hsl, while the others are colours corresponding to an eve turn around the colour wheel. If n is 3 for example, the two other colours would represent a 1/3 and 2/3 rotation of the colour wheel.

complimentHsl: (n: number, [h, s, l]: HSL) => HSL[];

complimentRgb(n, rgb)

returns an length n array of rgb Vector3. The 0th color is the same as the input rgb, while the others are colours corresponding to an eve turn around the colour wheel. If n is 3 for example, the two other colours would represent a 1/3 and 2/3 rotation of the colour wheel.

complimentRgb: (n: number, rgb: RGB) => RGB[];

rgb2css(alpha, rgb)

returns an rgba css string like rgba(255, 255, 255, 1) from the rgb color and alpha value

rgb2css: (alpha: number, rgb: RGB) => string;

hsl2css(alpha, hsl)

returns an hsl css string like hsl(222, 50%, 75%, 0.6) from the hsl color and alpha value

hsl2css: (alpha: number, [h, s, l]: HSL) => string;