Package Exports

lumino

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lumino) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lumino

.github/workflows/badge.yml

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'

import rgba2rgb from 'lumino/rgba2rgb';
import { OutputType } 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.
const res1 = rgba2rgb('rgb(255, 0, 0, 0.5)');
// => {r: 255, g: 128, b: 128 }
const res2 = rgba2rgb({r: 255, g: 0, b: 0, a: 0.5}, undefined, OutputType.STRING);
// => rgb(255, 128, 128)
const res3 = rgba2rgb([255, 0, 0, 0.5], undefined, OutputType.ARRAY);
// => [255, 128, 128]

// Accepts different backgrounds in rgb (default is white)
const res4 = rgba2rgb('rgb(255, 0, 0, 0.5)', 'rgb(0, 0, 0)');
const res5 = rgba2rgb('rgb(255, 0, 0, 0.5)', {r: 0, g: 0, b: 0});
const res6 = rgba2rgb('rgb(255, 0, 0, 0.5)', [0, 0, 0]);
// => {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'

import hex2rgb from 'lumino/hex2rgb';
import { OutputType } 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.
const res1 = hex2rgb('#FF0000');
// => {r: 255, g: 0, b: 0 }
const res2 = hex2rgb('#F00', undefined, OutputType.STRING);
// => rgb(255, 0, 0)
const res3 = hex2rgb('#F00', undefined, OutputType.ARRAY);
// => [255, 0, 0]

// Accepts different backgrounds in hex (default is white)
const res4 = hex2rgb('#FF0000', '#000000');
const res5 = hex2rgb('#FF0000', '#000000');
const res6 = hex2rgb('#FF0000', '#000000');
// => {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'

import hex2rgba from 'lumino/hex2rgba';
import { OutputType } 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.
const res1 = hex2rgb('#FF000099');
// => {r: 255, g: 0, b: 0, a: 0.6 }
const res2 = hex2rgb('#F009', OutputType.STRING);
// => rgb(255, 0, 0, 0.6)
const res3 = hex2rgb('#F009', OutputType.ARRAY);
// => [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'

import hsl2rgb from 'lumino/hsl2rgb';

// 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.
const res1 = hsl2rgb('hsl(0, 0%, 100%)');
// => {r: 255, g: 255, b: 255}
const res2 = hsl2rgb({h: 209, s: 100, l: 57.8}, undefined, OutputType.STRING);
// => rgb(40, 150, 255)
const res3 = hsl2rgb([120, 100, 50], undefined, OutputType.ARRAY);
// => [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'

import rgb2hsl from 'lumino/rgb2hsl';

// 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.
const res1 = rgb2hsl('rgb(255, 255, 255)');
// => {h: 0, s: 0%, l: 100%}
const res2 = rgb2hsl({r: 40, g: 150, b: 255}, undefined, OutputType.STRING);
// => hsl(209.3, 100%, 57.84%)
const res3 = rgb2hsl([0, 255, 0], undefined, OutputType.ARRAY);
// => [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'

import cmyk2rgb from 'lumino/cmyk2rgb';

// 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.
const res1 = cmyk2rgb('device-cmyk(98%, 0%, 51%, 25%)');
// => { r: 4, g: 191, b: 94 }
const res2 = cmyk2rgb({ c: 59.09, m: 86.36, y: 0, k: 13.73 }, undefined, OutputType.STRING);
// => rgb(90, 30, 220)
const res3 = cmyk2rgb([85, 0, 22, 44], undefined, OutputType.ARRAY);
// => [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'

import rgb2cmyk from 'lumino/rgb2cmyk';

// 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.
const res1 = rgb2cmyk('rgb(90, 30, 220)');
// => { c: 59.09, m: 86.36, y: 0, k: 13.73 }
const res2 = rgb2cmyk({r: 22, g: 143, b: 111}, undefined, OutputType.STRING);
// => device-cmyk(84.62%, 0%, 22.38%, 43.92%)
const res3 = rgb2cmyk([255, 128, 0], undefined, OutputType.ARRAY);
// => [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.

Generators

`complementary`

Usage: import complementary from 'lumino/harmony/complementary'
Alternative usage: import { complementary } from 'lumino'

import complementary from 'lumino/harmony';

// Takes in a RGB object and returns a RGB object of the complementary color
const res1 = complementary({r: 0, g: 0, b: 0});
// => {r: 0, g: 0, b: 0}
const res2 = complementary({r: 128, g: 128, b: 128});
// => {r: 128, g: 128, b: 128}
const res3 = complementary({r: 45, g: 230, b: 73});
// => {r: 230, g: 45, b:202}
const res4 = complementary({r: 89, g: 0, b: 240});
// => {r: 152, g: 240, b: 0}

`triadic`

Usage: import triadic from 'lumino/harmony'
Alternative usage: import { triadic } from 'lumino'

import triadic from 'lumino/harmony';

// Takes in a RGB object and returns an array of 3 RGB object of the triadic colors
const res1 = triadic({r: 0, g: 0, b: 0});
// => [{r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}]
const res2 = triadic({r: 40, g: 120, b: 200});
// => [{r: 40, g: 120, b: 200}, {r: 200, g: 40, b: 120}, {r: 120, g: 200, b: 40}]
const res3 = triadic({r: 200, g: 34, b: 89});
// => [{r: 200, g: 34, b: 89}, {r: 89, g: 200, b: 34}, {r: 34, g: 89, b: 200}]
const res4 = triadic({r: 44, g: 222, b: 111});
// => [{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.

import tetradic from 'lumino/harmony';

// Takes in a RGB object and returns an array of 4 RGB object of the tetradic colors
const res1 = tetradic({r: 0, g: 0, b: 0});
// => [{r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}]
const res2 = tetradic({r: 40, g: 120, b: 200});
// => [{r: 40, g: 120, b: 200}, {r: 120, g: 40, b: 200}, {r: 120, g: 200, b: 40}, {r: 200, g: 120, b: 40}]
const res3 = tetradic({r: 200, g: 34, b: 89});
// => [{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
const res4 = tetradic({ r: 44, g: 222, b: 111 }, 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'

import analogous from 'lumino/harmony';

// Takes in a RGB object and returns an array of 3 RGB object of the analogous colors
const res1 = analogous({r: 0, g: 0, b: 0});
// => [{r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}, {r: 0, g: 0, b: 0}]
const res2 = analogous({r: 40, g: 120, b: 200});
// => [{r: 40, g: 120, b: 200}, {r: 40, g: 40, b: 200}, {r: 40, g: 200, b: 200}]
const res3 = analogous({r: 200, g: 34, b: 89});
// => [{r: 200, g: 34, b: 89}, {r: 200, g: 62, b: 34}, {r: 200, g: 34, b: 172}]
const res4 = analogous({r: 44, g: 222, b: 111});
// => [{r: 44, g: 222, b: 111}, {r: 44, g: 222, b: 200}, {r: 66, g: 222, b: 44}]

JSPM

lumino