@chiarapassaro/color-palettes-range

Are you bored with classic color palettes?

Now you can generate more than three or five colors palette: take a Complementary Palette or a Random Dominant Palette, and you can decide how many colors you want!

V2.0.4

Update

Added Gradient from BaseColor to EndColor

##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(), ...]

Create Gradient Palette

palette.gradient({ numColors, endColor })

Props:

Colors number (1-100) EndColor obj Hsl()

Return:

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

Get Gradient Palette

palettes.getGradient()

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