Nothing Particularly Magnificent

    @chiarapassaro/color-palettes-range

    1.2.2 • Public • Published

    @chiarapassaro/color-palettes-range

    Color Palette

    Generate many color schemes from a color

    V1.2.2

    ##Install

    $ npm init
    $ npm install @chiarapassaro/color-palettes-range
    

    ##Usage

    var ColorPalettesRange = require("@chiarapassaro/color-palettes-range/src/js");
    

    Functionality

    Create Hsl color:

    var baseColor = new ColorPalettesRange.Hsl(
        {
            hue, 
            saturation, 
            brightness
        }
    );
    
    Props:

    Hue degree (1-360)
    Saturation (1-100)
    Brightness (1-100)

    Methods:
    baseColor.getHue() -> number
    baseColor.getSaturation() -> number
    baseColor.getBrightness() -> number
    baseColor.setHue(number)
    baseColor.setSaturation(number)
    baseColor.setBrightness(number)
    baseColor.printHsl() -> string hsl(hue, saturation% , brightness%)
    baseColor.printRgb() -> string rgb(value, value , value)
    baseColor.printHex() -> string #RRGGBB
    
    

    Create palettes:

    var palettes = new ColorPalettesRange.SetColorPalette(baseColor)
    
    Arguments:

    Base Color [obj Hsl]

    Methods:

    Base Color

    palettes.getBasecolor() -> obj Hsl()
    updateColorPalette(newColor)
    

    Triadic:

    Create Triadic scheme:

    palettes.triad()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Get palettes Triadic

    palettes.getTriad()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Create Complementary palettes:

    palettes.complementar(
        {
            numColor, 
            stepDegree
        }
    );
    
    Props:

    Color number - even
    Step degree between colors
    Max degree numColor*step = 140

    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Get palettes complementary colors

    palettes.getComplementar()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Create Split complementary palettes:

    palettes.splitComplementar()
    
    Return:
    Array [obj Hsl(), obj Hsl()]
    

    Get palettes Split complementary colors

    palettes.splitComplementar()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Create Analogous palettes:

    palettes.analogous(
        {
            typeScheme, 
            numColor, 
            stepDegree
        }
    );
    
    Props:

    Scheme Type: 'allArch', 'cold', 'warm'
    Colors number - even
    Step degree between colors
    Max degree numColor*step = 60

    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Get analogous colors

    palettes.getAnalogous()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Create tetradic palettes:

    palettes.tetradic()
    
    Return:
    Array [obj Hsl(), obj Hsl()]
    

    Get Tradic Colors

    palettes.getTetradic()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Create Square palettes:

    palettes.square()
    
    Return:
    Array [obj Hsl(), obj Hsl()]
    

    Get Square colors

    palettes.getSquare()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Create Monochrome palettes:

    palettes.mono (
        {
            numColor, 
            stepDegree, 
            typeScheme
        }
    )'
    
    Props:

    Colors number - even
    Step degree between colors
    Max degree numColor*step = 100
    Scheme type = saturation / brightness

    Return:
    Array [obj Hsl(), obj Hsl()]
    

    Get Monochrome colors

    palettes.getMono()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Create Random with Dominat Color palettes

    palettes.randomDominant(
        {
            numColor, 
            percDominant
        }
    );
    
    Props:

    Colors number - even (1-360)
    Color Dominant Percentage (1-100)

    Return:
    Array [obj Hsl(), obj Hsl()]
    

    Get Random Dominant colors

    palettes.getRandomDominant()
    
    Return:
    Array [obj Hsl(), obj Hsl(), ...]
    

    Conversion Utilities

    Convert Hsl color:

    var color = new ColorPalettesRange.HslConvert(
        {
            hue, 
            saturation, 
            brightness
        }
    )
    
    Props:

    hue (1-360)
    saturation (1-100)
    brightness (1-100)

    Methods:
    color.getRgb() -> [Obj] new Rgb(r, g, b)
    color.getRed() -> number
    color.getGreen() -> number
    color.getBlue() -> number
    color.getHex() -> [Obj] new Hex(#RRGGBB)
    

    Convert Rgb color:

    var color = new ColorPalettesRange.RgbConvert(
        {
            red, 
            green,
            blue
        }
    );
    
    Props:

    red (1-255)
    green (1-255)
    blue (1-255)

    Methods:
    color.getHsl() -> [Obj] new Hsl({hue, saturation, brightness})
    color.getHue() -> number
    color.getSaturation() -> number
    color.getBrightness() -> number
    color.getHex() -> [Obj] new Hex(#RRGGBB)
    

    Convert Hex color:

    var color = new ColorPalettesRange.HexConvert(#RRGGBB)
    
    Arguments:

    hex (#RRGGBB)

    Methods:
    color.getRgb() -> [Obj] new Rgb(r, g, b)
    color.getRed() -> number
    color.getGreen() -> number
    color.getBlue() -> number
    color.getHsl() -> [Obj] new Hsl({hue, saturation, brightness})
    color.getHue() -> number
    color.getSaturation() -> number
    color.getBrightness() -> number
    

    Create Rgb color:

    var color = new ColorPalettesRange.Rgb(
        {
            red, 
            green, 
            blue
        }
    );
    
    Props:

    Red (1-255)
    Green (1-255)
    Blue (1-255)

    Methods:
    color.getRed() -> number
    color.getGreen() -> number
    color.getBlue() -> number
    color.printHsl() -> string rgb(r, g , b)
    color.setRed(number)
    color.setBlue(number)
    color.setGreen(number)
    
    

    Create Hex color:

    var color = new ColorPalettesRange.Hex(#RRGGBB)
    
    Arguments:

    #RRGGBB

    Methods:
    color.printHex() -> string #RRGGBB
    color.setHex(#RRGGBB)
    

    #Example with ChartJs Wheels Color Palette

    Install

    npm i @chiarapassaro/color-palettes-range

    DownloadsWeekly Downloads

    37

    Version

    1.2.2

    License

    ISC

    Unpacked Size

    2.08 MB

    Total Files

    8

    Last publish

    Collaborators

    • chiarapassaro