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('#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([255,0,0])  // rgb array
new Color([255,0,0, 0.5])  // rgba array (alpha channel)
new Color({  // hsl object
    h: 0.2,
    s: 0.5,
    l: 1
})
new Color({  // hsla object
    h: 0.5,
    s: 1,
    l: 1,
    a: 0.5
})

Members

(static) names

Color.names is n object literal containing the list of named color values and their RGB value array
Properties:
Name Type Description
names
Source:
Example
console.log( Color.names.red ); // outputs [255,0,0]

rgb

The the array containing red, green, blue color values, and the alpha channel value
Properties:
Name Type Description
rgb
Source:
Example
console.log( new Color('red').rgb ); // outputs [255,0,0]

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}

Shifts the hue of a 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(0).combine('#fff').toString(); // returns "#808080"
new Color(255,0,0).combine('#00f',0.7).toString(); // returns "#4D00B3"

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(125,0,0).desaturate(0.2).toString(); // returns "#710C0C"

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

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

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"

hsl(hue, saturation, lightness) → {Color}

Set the hue, saturation, or lightness of a color and return the new color
Parameters:
Name Type Description
hue Number hue value between 0 and 1
saturation Number saturation value between 0 and 1
lightness Number lightness value between 0 and 1
Source:
Returns:
new Color() instance
Type
Color
Example
new Color('#f00').hsl(null,0.5,0.5).toString(); // returns "#BF4040"

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).toString(); // returns "#F00"
new Color('#00f').hue(1/3).toString(); // returns "#0F0"

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('rgb(125,0,0)').saturate(0.2).toString(); // returns "#7D0000"

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('rgb(100,50,50)').saturation(0).toString(); // returns "#4B4B4B"
new Color('rgb(50,0,0)').saturation(0.5).toString();  // returns "#260C0C"
new Color('rgb(50,50,100)').saturation(1).toString(); // returns "#000096"

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('rgb(255,0,0)').tint('#00f',0.5).toString(); // returns "#F0F"
new Color('rgb(0,0,100)').tint('rgb(100,0,0)',0.1).toString(); // returns "#140064"