Class: Color

Color()

Color Color class accepts a CSS color string, rgb, hsl data as the input, manipulate the color, and returns a CSS-compatible color string.

Constructor

new Color()

Source:
Examples
new Color('red')  // named CSS colors
new Color('red', 0.5)  // named CSS colors and transparency
new Color('#f00')  // hex 3 characters
new Color('#e2b644')  // hex 6 characters
new Color('rgb(255, 0, 100)')  // rgb()
new Color('rgba(255, 0, 100, 0.5)')  // rgba()
new Color('rgba(255, 0, 100, 0.5)', 0.1)  // 0.1 overrides alpha from rgba
new Color([255,0,0])  // rgb array
new Color([255,0,0], 0.5)  // rgb and transparency
new Color({  // hsl object
    h: 0.2,
    s: 0.5,
    l: 1
})
new Color({  // hsl object and transparency
    h: 0.5,
    s: 1,
    l: 1
}, 0.5)

Methods

alpha(alpha) → {Color}

Sets the transparency of a color
Parameters:
Name Type Description
alpha Number transparency level between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#f00').alpha(0.5).toString();  // returns "rgba(255,0,0,0.5)"

blue(blue) → {Color}

Set the blue component of a color
Parameters:
Name Type Description
blue Number blue component 0-255
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#FF0').blue(255).toString();  // returns "#FFF"

combine(targetColor, amountopt) → {Color}

Changes the color closer to another color by a given percentage
Parameters:
Name Type Attributes Default Description
targetColor Object color string, array, or object
amount Number <optional>
 0.5 how close to the target color between 0 and 1 (0.5 is half-way between)
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('black').combine('red', 0.5).toString(); // returns "#800000"

darken(darkenBy) → {Color}

Decreases the "lightness" of a color value
Parameters:
Name Type Description
darkenBy Number amount to darken between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#f00').darken(0.5).toString(); // returns "#800000"

desaturate(desaturateBy) → {Color}

Decreases the "saturation" of a color value
Parameters:
Name Type Description
desaturateBy Number amount to desaturate between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#d3ccab').desaturate(0.1).toString(); // returns "#cdc8b1"

getAlpha() → {Number}

Returns the transparency of a color
Source:
Returns:
alpha transparency level between 0 and 1
Type
Number
Example
new Color('#F00').getAlpha(); // returns 0
new Color('rgba(255,0,0,0.5)').getAlpha(); // returns 0.5

getBlue() → {Number}

Returns the blue component of a color string
Source:
Returns:
blue component 0-255
Type
Number
Example
new Color('#fff').getBlue(); // returns 255

getGreen() → {Number}

Returns the green component of a color string
Source:
Returns:
green component 0-255
Type
Number
Example
new Color('#fff').getGreen(); // returns 255

getHex() → {String}

Returns the hexidecimal value of the color
Source:
Returns:
hex color value
Type
String
Example
new Color('rgba(255,0,0,0.5)').getHex(); // returns "#f00"

getHSL() → {Array.<Number>}

Returns an [h,s,l] array from color string
Source:
Returns:
hsl array of [hue,saturation,lightness]
Type
Array.<Number>
Example
new Color('#f00').getHSL(); // returns [0,1,0.5]

getHue() → {Number}

Return the "hue" of a color
Source:
Returns:
hue hue value between 0 and 1
Type
Number
Example
new Color('#a1b2c1').getHue(); // returns "0.578125"}
new Color('#f00').getHue(); // returns 0
new Color('#0f0').getHue(); // returns 0.3333333333333333
new Color('#00f').getHue(); // returns 0.6666666666666666

getLightness() → {Number}

Return the lightness of a color (how close to white or black the color is)
Source:
Returns:
lightness lightness value between 0 and 1
Type
Number
Example
new Color('rgb(0,0,0)').getLightness();       // returns 0
new Color('rgb(100,50,100)').getLightness();  // returns 0.29411764705882354
new Color('rgb(255,255,255)').getLightness(); // returns 1

getNames() → {Array}

Returns the array of named color values
Source:
Returns:
named color values
Type
Array
Example
new Color('#f00').tint('#00f',0.5).toString(); // returns "#0f0"
new Color('rgb(0,0,100)').tint('rgb(100,0,0)',0.1).toString(); // returns "#002864"

getRed() → {Number}

Returns the red component of a color string
Source:
Returns:
red component 0-255
Type
Number
Example
new Color('#fff').getRed(); // returns 255

getRGB() → {Array}

Return the red, green, blue color values with the alpha channel as an array
Source:
Returns:
rgba the array of color values
Type
Array
Example
new Color('red).getRGB();   // returns [255,0,0]

getSaturation() → {Number}

Return the "saturation" of a color
Source:
Returns:
saturation saturation value between 0 and 1
Type
Number
Example
new Color('rgb(100,100,100)').getSaturation(); // returns 0
new Color('rgb(100,50,100)').getSaturation();  // returns 0.8333333333333334
new Color('rgb(100,0,100)').getSaturation();   // returns 1

green(green) → {Color}

Set the green component of a color
Parameters:
Name Type Description
green Number green component 0-255
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('rgb(255,0,0)').green(255).toString();  // returns "#FF0"

hue(hue) → {Color}

Set the "hue" of a color
Parameters:
Name Type Description
hue Number hue value between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#f00').hue(2/3).toString(); // returns "#00f"
new Color('#0f0').hue(1/3).toString(); // returns "#0f0"
new Color('#00f').hue(0.23).toString(); // returns "#9eff00"

invert() → {Color}

Inverts the color
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#f00').invert(1).toString(); // returns "#0FF"
new Color('#fff').invert().toString();  // returns "#000"

lighten(lightenBy) → {Color}

Increases the "lightness" of a color value
Parameters:
Name Type Description
lightenBy Number amount to lighten between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#f00').lighten(0.5).toString(); // returns "#FF8080"

lightness(lightness) → {Color}

Set the lightness of a color, how close to white or black the color will be
Parameters:
Name Type Description
lightness Number lightness value between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('rgb(255,0,0)').lightness(0).toString(); // returns "#000"
new Color('rgb(255,0,0)').lightness(0.5).toString(); // returns "#F00"
new Color('rgb(255,0,0)').lightness(1).toString(); // returns "#FFF"

red(red) → {Color}

Set the red component of a color
Parameters:
Name Type Description
red Number red component 0-255
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('rgb(0,0,255)').red(255).toString();  // returns "#F0F"

saturate(saturateBy) → {Color}

Increases the "saturation" of a color value
Parameters:
Name Type Description
saturateBy Number amount to saturate between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('corn silk 3').saturate(0.1).toString(); // returns "#d3ccab"

saturation(saturation) → {Color}

Set the "saturation" of a color
Parameters:
Name Type Description
saturation Number saturation value between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color(100,50,50).saturation(0.5).toString().to.be.equal("#712626");

shiftHue(hueShift) → {Color}

Shifts the "hue" of a color value by a given percentage
Parameters:
Name Type Description
hueShift Number amount to modify the hue by between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color(255,255,0).shiftHue(0.25).toString(); // returns "#00ff7f"

tint(targetColor, amount) → {Color}

Shifts only the hue of a color closer to another color by a given percentage
Parameters:
Name Type Description
targetColor String color string or array
amount Number amount to shift the hue toward the target color between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#f00').tint('#00f',0.5).toString(); // returns "#0f0"
new Color('rgb(0,0,100)').tint('rgb(100,0,0)',0.1).toString(); // returns "#002864"

toString() → {String}

Returns the CSS string of the color, either as hex value, or rgba if an alpha value is defined
Source:
Returns:
css color value
Type
String
Example
new Color('rgb(0,0,255)').toString(); // returns "#00f"