kandinsky-js
v2.0.0
Published
A tiny colour library
Downloads
19
Readme
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
andc2
.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 betweenc1
andc2
.
linearGradient: (n: number, c1: XYZ, c2: XYZ) => XYZ[];
gradient(easeFn, n, c1, c2)
returns an length
n
array of Vector3 colours. colours are betweenc1
andc2
, and are spaced according to the easing functioneaseFn
.
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 thelinearGradient(n/(numColours-1), col1, col2)
for all colourscol1, 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 betweenc1
andc2
.
rLinearGradient: (n: number, c1: XYZ, c2: XYZ) => XYZ[];
rGradient(easeFn, n, c1, c2)
returns a rounded, length
n
array of Vector3 colours. colours are betweenc1
andc2
, and are spaced according to the easing functioneaseFn
.
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 thelinearGradient(n/(numColours-1), col1, col2)
for all colourscol1, 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 inputhexString
, while the others are colours corresponding to an eve turn around the colour wheel. Ifn
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 inputhsl
, while the others are colours corresponding to an eve turn around the colour wheel. Ifn
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 inputrgb
, while the others are colours corresponding to an eve turn around the colour wheel. Ifn
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;