Narwhals Prolong Mischief

    lumino
    TypeScript icon, indicating that this package has built-in type declarations

    2.6.0 • Public • Published

    Lumino

    CI .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.

    hwb2rgb

    Usage: import hwb2rgb from 'lumino/hwb2rgb'
    Alternative usage: import { hwb2rgb } from 'lumino'

    import hwb2rgb from 'lumino/hwb2rgb';
     
    const res1 = hwb2rgb('hwb(3.38, 0.39%, 43.92%)');
    // => { r: 143, g: 9, b: 1 }
    const res2 = hwb2rgb({ h: 120, w: 0, b: 0 }, undefined, OutputType.STRING);
    // => rgb(0, 255, 0)
    const res3 = hwb2rgb([258.95, 11.76, 13.73], undefined, OutputType.ARRAY);
    // => [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'

    import rgb2hwb from 'lumino/rgb2hwb';
     
    const res1 = rgb2hwb('rgb(90, 30, 220)');
    // => { h: 258.95, w: 11.76, b: 13.73 }
    const res2 = rgb2hwb({r: 22, g: 143, b: 111}, undefined, OutputType.STRING);
    // => hwb(164.13, 8.63%, 43.92%)
    const res3 = rgb2hwb([255, 128, 0], undefined, OutputType.ARRAY);
    // => [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'

    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}]

    splitComplementary

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

    import splitComplementary from 'lumino/harmony';
     
    // Takes in a RGB object and returns an array of 3 RGB object of the split-complementary 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: 200, g: 200, b: 40}, {r: 200, g: 40, b: 40}]
    const res3 = analogous({r: 200, g: 34, b: 89});
    // => [{r: 200, g: 34, b: 89}, {r: 34, g: 172, b: 200}, {r: 34, g: 200, b: 62}]
    const res4 = analogous({r: 44, g: 222, b: 111});
    // => [{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

    Install

    npm i lumino

    DownloadsWeekly Downloads

    5

    Version

    2.6.0

    License

    MIT

    Unpacked Size

    59.4 kB

    Total Files

    55

    Last publish

    Collaborators

    • andreasjj