Lumino
A simple library for handling conversion of color models and generating different color harmonies.
Docs
Transformations
rgba2rgb
Usage: import rgba2rgb from 'lumino/rgba2rgb'
Alternative usage: import { rgba2rgb } from 'lumino'
;; // Accepts an rgba-string, rgba object, or rgba array. It's also possible// to specify output type to string, array or object. Object is default.;// => {r: 255, g: 128, b: 128 };// => rgb(255, 128, 128);// => [255, 128, 128] // Accepts different backgrounds in rgb (default is white);;;// => {r: 128, g: 0, b: 0}
Alternative versions:
Usage: import { rgba2rgbString } from 'lumino/rgba2rgb'
Alternative usage: import { rgba2rgbString } from 'lumino'
Description: Works as the main function, but only returns a RGB string.
Usage: import { rgba2rgbObject } from 'lumino/rgba2rgb'
Alternative usage: import { rgba2rgbObject } from 'lumino'
Description: Works as the main function, but only returns a RGB object.
Usage: import { rgba2rgbArray } from 'lumino/rgba2rgb'
Alternative usage: import { rgba2rgbArray } from 'lumino'
Description: Works as the main function, but only returns a RGB array.
hex2rgb
Usage: import hex2rgb from 'lumino/hex2rgb'
Alternative usage: import { hex2rgb } from 'lumino'
;; // Accepts an hex-string, either of length 3, 4, 6 or 8 (not including the #).// It's also possible to specify output type to string, array or object. Object is default.;// => {r: 255, g: 0, b: 0 };// => rgb(255, 0, 0);// => [255, 0, 0] // Accepts different backgrounds in hex (default is white);;;// => {r: 128, g: 0, b: 0}
Alternative versions:
Usage: import { hex2rgbString } from 'lumino/hex2rgb'
Alternative usage: import { hex2rgbString } from 'lumino'
Description: Works as the main function, but only returns a RGB string.
Usage: import { hex2rgbObject } from 'lumino/hex2rgb'
Alternative usage: import { hex2rgbObject } from 'lumino'
Description: Works as the main function, but only returns a RGB object.
Usage: import { hex2rgbArray } from 'lumino/hex2rgb'
Alternative usage: import { hex2rgbArray } from 'lumino'
Description: Works as the main function, but only returns a RGB array.
hex2rgba
Usage: import hex2rgba from 'lumino/hex2rgba'
Alternative usage: import { hex2rgba } from 'lumino'
;; // Accepts an hex-string, either of length 3, 6 (automatically sets opacity to 1), 4 or 8 // (not including the #).// It's also possible to specify output type to string, array or object. Object is default.;// => {r: 255, g: 0, b: 0, a: 0.6 };// => rgb(255, 0, 0, 0.6);// => [255, 0, 0, 0.6]
Alternative versions:
Usage: import { hex2rgabString } from 'lumino/hex2rgba'
Alternative usage: import { hex2rgbaString } from 'lumino'
Description: Works as the main function, but only returns a RGBA string.
Usage: import { hex2rgbaObject } from 'lumino/hex2rgba'
Alternative usage: import { hex2rgbaObject } from 'lumino'
Description: Works as the main function, but only returns a RGBA object.
Usage: import { hex2rgbaArray } from 'lumino/hex2rgba'
Alternative usage: import { hex2rgabArray } from 'lumino'
Description: Works as the main function, but only returns a RGBA array.
hsl2rgb
Notice: This function rounds to the closest integer, as such some accuracy from hsl will be lost.
Usage: import hsl2rgb from 'lumino/hsl2rgb'
Alternative usage: import { hsl2rgb } from 'lumino'
; // Accepts an hsl-string, hsl object, or hsl array. It's also possible// to specify output type to string, array or object. Object is default.;// => {r: 255, g: 255, b: 255};// => rgb(40, 150, 255);// => [0, 255, 0]
Alternative versions:
Usage: import { hsl2rgbString } from 'lumino/hsl2rgb'
Alternative usage: import { hsl2rgbString } from 'lumino'
Description: Works as the main function, but only returns a RGB string.
Usage: import { hsl2rgbObject } from 'lumino/hsl2rgb'
Alternative usage: import { hsl2rgbObject } from 'lumino'
Description: Works as the main function, but only returns a RGB object.
Usage: import { hsl2rgbArray } from 'lumino/hsl2rgb'
Alternative usage: import { hsl2rgbArray } from 'lumino'
Description: Works as the main function, but only returns a RGB array.
rgb2hsl
Notice: This function rounds to a float with 2 decimals accuracy, as such some accuracy will be lost.
Usage: import rgb2hsl from 'lumino/rgb2hsl'
Alternative usage: import { rgb2hsl } from 'lumino'
; // Accepts an rgb-string, rgb object, or rgb array. It's also possible// to specify output type to string, array or object. Object is default.;// => {h: 0, s: 0%, l: 100%};// => hsl(209.3, 100%, 57.84%);// => [120, 100, 50]
Alternative versions:
Usage: import { rgb2hslString } from 'lumino/rgb2hsl'
Alternative usage: import { rgb2hslString } from 'lumino'
Description: Works as the main function, but only returns a HSL string.
Usage: import { rgb2hslObject } from 'lumino/rgb2hsl'
Alternative usage: import { rgb2hslObject } from 'lumino'
Description: Works as the main function, but only returns a HSL object.
Usage: import { rgb2hslArray } from 'lumino/rgb2hsl'
Alternative usage: import { rgb2hslArray } from 'lumino'
Description: Works as the main function, but only returns a HSL array.
cmyk2rgb
Notice: You should be careful with conversion between cmyk and rgb as it brings in inaccuracies
Usage: import cmyk2rgb from 'lumino/cmyk2rgb'
Alternative usage: import { cmyk2rgb } from 'lumino'
; // Accepts an rgb-string, rgb object, or rgb array. It's also possible// to specify output type to string, array or object. Object is default.;// => { r: 4, g: 191, b: 94 };// => rgb(90, 30, 220);// => [21, 143, 111]
Alternative versions:
Usage: import { cmyk2rgbString } from 'lumino/cmyk2rgb'
Alternative usage: import { cmyk2rgbString } from 'lumino'
Description: Works as the main function, but only returns a RGB string.
Usage: import { cmyk2rgbObject } from 'lumino/cmyk2rgb'
Alternative usage: import { cmyk2rgbObject } from 'lumino'
Description: Works as the main function, but only returns a RGB object.
Usage: import { cmyk2rgbArray } from 'lumino/cmyk2rgb'
Alternative usage: import { cmyk2rgbArray } from 'lumino'
Description: Works as the main function, but only returns a RGB array.
rgb2cmyk
Notice: You should be careful with conversion between cmyk and rgb as it brings in inaccuracies
Usage: import rgb2cmyk from 'lumino/rgb2cmyk'
Alternative usage: import { rgb2cmyk } from 'lumino'
; // Accepts an rgb-string, rgb object, or rgb array. It's also possible// to specify output type to string, array or object. Object is default.;// => { c: 59.09, m: 86.36, y: 0, k: 13.73 };// => device-cmyk(84.62%, 0%, 22.38%, 43.92%);// => [0, 49.8, 100, 0]
Alternative versions:
Usage: import { rgb2cmykString } from 'lumino/rgb2cmyk'
Alternative usage: import { rgb2cmykString } from 'lumino'
Description: Works as the main function, but only returns a CMYK string.
Usage: import { rgb2cmykObject } from 'lumino/rgb2cmyk'
Alternative usage: import { rgb2cmykObject } from 'lumino'
Description: Works as the main function, but only returns a CMYK object.
Usage: import { rgb2cmykArray } from 'lumino/rgb2cmyk'
Alternative usage: import { rgb2cmykArray } from 'lumino'
Description: Works as the main function, but only returns a CMYK array.
hwb2rgb
Usage: import hwb2rgb from 'lumino/hwb2rgb'
Alternative usage: import { hwb2rgb } from 'lumino'
; ;// => { r: 143, g: 9, b: 1 };// => rgb(0, 255, 0);// => [90, 30, 220]
Alternative versions:
Usage: import { hwb2rgbString } from 'lumino/hwb2rgb'
Alternative usage: import { hwb2rgbString } from 'lumino'
Description: Works as the main function, but only returns a RGB string.
Usage: import { hwb2rgbObject } from 'lumino/hwb2rgb'
Alternative usage: import { hwb2rgbObject } from 'lumino'
Description: Works as the main function, but only returns a RGB object.
Usage: import { hwb2rgbArray } from 'lumino/hwb2rgb'
Alternative usage: import { hwb2rgbArray } from 'lumino'
Description: Works as the main function, but only returns a RGB array.
rgb2hwb
Usage: import rgb2hwb from 'lumino/rgb2hwb'
Alternative usage: import { rgb2hwb } from 'lumino'
; ;// => { h: 258.95, w: 11.76, b: 13.73 };// => hwb(164.13, 8.63%, 43.92%);// => [30.12, 0, 0]
Alternative versions:
Usage: import { rgb2hwbString } from 'lumino/rgb2hwb'
Alternative usage: import { rgb2hwbString } from 'lumino'
Description: Works as the main function, but only returns a HWB string.
Usage: import { rgb2hwbObject } from 'lumino/rgb2hwb'
Alternative usage: import { rgb2hwbObject } from 'lumino'
Description: Works as the main function, but only returns a HWB object.
Usage: import { rgb2hwbArray } from 'lumino/rgb2hwb'
Alternative usage: import { rgb2hwbArray } from 'lumino'
Description: Works as the main function, but only returns a HWB array.
Generators
complementary
Usage: import complementary from 'lumino/harmony/complementary'
Alternative usage: import { complementary } from 'lumino'
; // Takes in a RGB object and returns a RGB object of the complementary color;// => {r: 0, g: 0, b: 0};// => {r: 128, g: 128, b: 128};// => {r: 230, g: 45, b:202};// => {r: 152, g: 240, b: 0}
triadic
Usage: import triadic from 'lumino/harmony'
Alternative usage: import { triadic } from 'lumino'
; // Takes in a RGB object and returns an array of 3 RGB object of the triadic colors;// => [{r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}];// => [{r: 40, g: 120, b: 200}, {r: 200, g: 40, b: 120}, {r: 120, g: 200, b: 40}];// => [{r: 200, g: 34, b: 89}, {r: 89, g: 200, b: 34}, {r: 34, g: 89, b: 200}];// => [{r: 44, g: 222, b: 111}, {r: 111, g: 44, b: 222}, {r: 222, g: 111, b: 44}]
tetradic
Usage: import tetradic from 'lumino/harmony'
Alternative usage: import { tetradic } from 'lumino'
NB: It defaults to a 60% distance difference, but it's possible to give a custom distance as a second argument.
; // Takes in a RGB object and returns an array of 4 RGB object of the tetradic colors;// => [{r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}];// => [{r: 40, g: 120, b: 200}, {r: 120, g: 40, b: 200}, {r: 120, g: 200, b: 40}, {r: 200, g: 120, b: 40}];// => [{r: 200, g: 34, b: 89}, {r: 200, g: 145, b: 34}, {r: 34, g: 89, b: 200}, {r: 34, g: 200, b: 145}] // Custom distance difference set to 90;// => [{r: 44, g: 222, b: 111}, {r: 44, g: 66, b: 222}, {r: 222, g: 200, b: 44}, {r: 222, g: 44, b: 155}]
analogous
Usage: import analogous from 'lumino/harmony'
Alternative usage: import { analogous } from 'lumino'
; // Takes in a RGB object and returns an array of 3 RGB object of the analogous colors;// => [{r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}];// => [{r: 40, g: 120, b: 200}, {r: 40, g: 40, b: 200}, {r: 40, g: 200, b: 200}];// => [{r: 200, g: 34, b: 89}, {r: 200, g: 62, b: 34}, {r: 200, g: 34, b: 172}];// => [{r: 44, g: 222, b: 111}, {r: 44, g: 222, b: 200}, {r: 66, g: 222, b: 44}]
splitComplementary
Usage: import splitComplementary from 'lumino/harmony'
Alternative usage: import { splitComplementary } from 'lumino'
; // Takes in a RGB object and returns an array of 3 RGB object of the split-complementary colors;// => [{r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}];// => [{r: 40, g: 120, b: 200}, {r: 200, g: 200, b: 40}, {r: 200, g: 40, b: 40}];// => [{r: 200, g: 34, b: 89}, {r: 34, g: 172, b: 200}, {r: 34, g: 200, b: 62}];// => [{r: 44, g: 222, b: 111}, {r: 222, g: 44, b: 66}, {r: 200, g: 44, b: 222}]
TODO
Conversion
- HSL(A) to RGBA
- RGBA to HEX
Harmony Generation
- Monochromatic