@chiarapassaro/color-palettes-range

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!

Usage no npm install needed!

<script type="module">
  import chiarapassaroColorPalettesRange from 'https://cdn.skypack.dev/@chiarapassaro/color-palettes-range';
</script>

README

@chiarapassaro/color-palettes-range

Color Palette

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

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