Colorful — Documentation

Colorful

new Colorful(hex)

Source:
Parameters:
Name Type Description
hex string

A hex value to instantiate the class.

Members

(readonly) analogous

Get the HEX values for two new colors that are analogous to the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#e69df6", "#9dadf6" ]
console.log(myColor.analogous);

(readonly) blue

Get the red component of the color representing the calling instantiated Colorful object. This value can be anything from 0 to 255.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: 246
console.log(myColor.blue);

(readonly) complementary

Get the HEX values for a color that is complementary to the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: #daf69d
console.log(myColor.analogous);

(readonly) green

Get the red component of the color representing the calling instantiated Colorful object. This value can be anything from 0 to 255.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: 159
console.log(myColor.green);

hex :string

Get or set the HEX string for the color representing the calling instantiated Colorful object.

Source:
Type:
  • string

(readonly) hsl

Get the HSL array for the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ 259, 83, 79 ]
console.log(myColor.hsl);

(readonly) hslString

Get the HSL string for the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: hsl(259deg, 83%, 79%)
console.log(myColor.hslString);

(readonly) hsv

Get the HSV array for the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ 259, 36, 96 ]
console.log(myColor.hsv);

(readonly) hsvString

Get the HSV string for the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: hsv(259deg, 36%, 96%)
console.log(myColor.hsvString);

(readonly) hue

Get the given color's hue. This value can be any integer between 0 and 359.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: 259
console.log(myColor.hue);

(readonly) inverse

Get the HEX values for a color that is inverse of the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: #446009
console.log(myColor.analogous);

(readonly) lightness

Get the HSL lightness of the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: 79
console.log(myColor.lightness);

(readonly) luminance

Get the luminance of the color representing the calling instantiated Colorful object. Remember that getLuminance() is a static method. You can use the luminance getter to get the luminance of the color instantiating the Colorful object because this getter passing the HEX value of that color to getLuminance().

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: 0.4201489058782789
console.log(myColor.luminance);

(readonly) monochromatic

Get the HEX values for five new colors that are monochromatic with respect to the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#262133", "#453b5c", "#5c4e7a", "#8c74be", "#b7a8d6" ]
console.log(myColor.analogous);

(readonly) rectangle

Get the HEX values for two new colors that form a rectangle with the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#f69dda", "#daf69d", "#9df6b9" ]
console.log(myColor.square);

(readonly) red

Get the red component of the color representing the calling instantiated Colorful object. This value can be anything from 0 to 255.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: 187
console.log(myColor.red);

(readonly) rgb

Get the RGB array for the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ 187, 159, 246 ]
console.log(myColor.rgb);

(readonly) rgbString

Get the RGB string for the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: rgb(187, 159, 246)
console.log(myColor.rgbString);

(readonly) saturation

Get the HSL saturation of the color representing the calling instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: 83
console.log(myColor.saturation);

(readonly) splitComplementary

Get the HEX values for two new colors that are split complementary of the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#f6e69d", "#adf69d" ]
console.log(myColor.analogous);

(readonly) square

Get the HEX values for two new colors that form a square with the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#f69dad", "#daf69d", "#9df6e6" ]
console.log(myColor.square);

(readonly) triad

Get the HEX values for two new colors that form a triad with the color representing the instantiated Colorful object.

Source:
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#f6b99d", "#9df6b9" ]
console.log(myColor.triad);

(static, readonly) aHex

Get a random color as a HEX string.

Source:
Example
// Outputs: #ac83f2
console.log(Colorful.aHex);

(static, readonly) aPastel

Get a random Pastel color as a HEX string.

Source:
Example
// Outputs: #ec8eb1
console.log(Colorful.aPastel);

(static, readonly) bluish

Get a random HEX color with bluish shade.

Source:
Example
// Outputs: #49a1f8
console.log(Colorful.bluish);

(static, readonly) greenish

Get a random HEX color with greenish shade.

Source:
Example
// Outputs: #05b820
console.log(Colorful.greenish);

(static, readonly) reddish

Get a random HEX color with reddish shade.

Source:
Example
// Outputs: #d05643
console.log(Colorful.reddish);

Methods

adjustBrightness(percent) → {string}

This method will give you the HEX string that represents the new brightness adjusted color.

It won't change the original color object. It just gives you a HEX string that you can use to create a new color object if needed.

Source:
Parameters:
Name Type Description
percent number

The percentage amount by which to brighten or darken the color.
Throws:

Will throw an error when the passed percent is not a numerical value.

Returns:
Type:
string
  • The long form HEX code for the color with adjusted brightness.
Example
// Outputs: #ffb84d
console.log(new Colorful('#ff9900').adjustBrightness(30));

adjustSaturation(percent) → {string}

This method will give you the HEX string that represents the new saturation adjusted color.

It won't change the original color object. It just gives you a HEX string that you can use to create a new color object if needed.

Source:
Parameters:
Name Type Description
percent number

The percentage amount by which to saturate or desaturate the color.
Returns:
Type:
string
  • The long form HEX code for the color with adjusted saturation.
Example
// Outputs: #5687b8
console.log(new Colorful('#6688aa').adjustSaturation(40));

getAnalogousColors() → {array}

This method will give you the HEX representation for two new colors that are analogous to the color representing the instantiated Colorful object.

Source:
Returns:
Type:
array
  • Each array element contains the HEX representation for one of the analogous colors.
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#e69df6", "#9dadf6" ]
console.log(myColor.getAnalogousColors());

getComplementaryColor() → {number}

This method will give you the HEX representation for a new color that is complementary to the color representing the instantiated Colorful object.

Source:
Returns:
Type:
number
  • The HEX representation of the complementary color.
Example
// Outputs:  #aa8764
console.log(new Colorful('#6688aa').getComplementaryColor());

getContrast(hex) → {number}

This method will give you its contrast with the color represented by the HEX string you provided.

Source:
Parameters:
Name Type Description
hex string

The HEX representation of the color with which you want to calculate the contrast.
Returns:
Type:
number
  • The contrast between the two colors.
Example
// Outputs: 5.67
console.log(new Colorful('#6688aa').getContrast('#000'));

getContrastingColor(hex) → {number}

This method will give you the HEX representation for a new color that has at least the provided amount of contrast with the color in the instantiated Colorful object.

Source:
Parameters:
Name Type Description
hex string

The HEX representation of the color with which you want to calculate the contrast.
Returns:
Type:
number
  • The contrast between the two colors.
Example
// Outputs: #380208
console.log(new Colorful('#6688aa').getContrastingColor(4.5));

getInverseColor() → {number}

This method will give you the HEX representation for a new color that is inverse of the color representing the instantiated Colorful object.

Source:
Returns:
Type:
number
  • The HEX representation of the inverse color.
Example
// Outputs:  #997755
console.log(new Colorful('#6688aa').getInverseColor());

getMonochromaticColors() → {number}

This method will give you the HEX representation for five new colors that have the same hue as the color representing the instantiated Colorful object.

Source:
Returns:
Type:
number
  • The HEX representation of the inverse color.
Example
// Outputs:  #997755
console.log(new Colorful('#6688aa').getInverseColor());

getRectangleColors() → {array}

This method will give you the HEX representation for three new colors. The hue of these four colors (three new colors and the color representing the instantiated Colorful object) is 90deg apart.

Source:
Returns:
Type:
array
  • Each array element contains the HEX representation for one of the rectangle colors.
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#f69dda", "#daf69d", "#9df6b9" ]
console.log(myColor.getRectangleColors());

getSplitComplementaryColors() → {array}

This method will give you the HEX representation for two new colors that are split complementary of the color representing the instantiated Colorful object.

Source:
Returns:
Type:
array
  • Each array element contains the HEX representation for one of the split complementary colors.

getSquareColors() → {array}

This method will give you the HEX representation for three new colors. The hue of these four colors (three new colors and the color representing the instantiated Colorful object) is 90deg apart.

Source:
Returns:
Type:
array
  • Each array element contains the HEX representation for one of the square colors.
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#f69dad", "#daf69d", "#9df6e6" ]
console.log(myColor.getSquareColors());

getTriadColors() → {array}

This method will give you the HEX representation for two new colors. The hue of these three colors (two new colors and the color representing the instantiated Colorful object) is 120deg apart.

Source:
Returns:
Type:
array
  • Each array element contains the HEX representation for one of the triad colors.
Example
let myColor = new Colorful('#BB9FF6');

// Outputs: [ "#f6b99d", "#9df6b9" ]
console.log(myColor.getTriadColors());

isDark()

This method returns false when a color's luminance is less than 0.5.

Source:

isLight()

This method returns true when a color's luminance is more than or equal to 0.5.

Source:

rotateHue(degrees) → {string}

This method will give you the HEX string that represents the new hue adjusted color.

This method does not change the original color object. It just gives you a HEX string that you can use to create a new color object if needed.

Source:
Parameters:
Name Type Description
degrees number

The degrees by which to rotate the color's hue.
Returns:
Type:
string
  • The long form HEX code for the color with rotated hue.
Example
// Outputs: #aa647c
console.log(new Colorful('#6688aa').rotateHue(130));

(static) getBlackAccessibleColor() → {string}

This method generates a random HEX color that is AAA accessible when paired with black.

Source:
Returns:
Type:
string
  • The HEX representation of the color with which you want to calculate the contrast.
Example
// Outputs: #16cfd3
console.log(Colorful.getBlackAccessibleColor());

(static) getLuminance(color) → {number}

Calling this method will give you the luminance of given color.

Source:
Parameters:
Name Type Description
color string

The HEX value of the color.
Returns:
Type:
number

The return value represents the luminance of the color.

Example
// Outputs: 0.28927047102101044
console.log(Colorful.getLuminance('#B879DA'));

(static) getRandomHexColor() → {string}

This method will give you the HEX representation of a random color.

Source:
Returns:
Type:
string

A random color in HEX format.

Example
let color = Colorful.getRandomHexColor()

(static) getRandomPastelColor() → {string}

This method will give you the HEX representation of a random pastel color.

Source:
Returns:
Type:
string

A random pastel color in HEX format.

Example
let color = Colorful.getRandomPastelColor()

(static) getRandomPreferredColor(prefopt) → {string}

This methods gives you the HEX representation of a random color that was generated based on your preferences. The color will be completely random if you don't have any preferences.

Source:
Parameters:
Name Type Attributes Description
pref string | object <optional>

This argument specifies your preferences for the generated color.
Returns:
Type:
string

The HEX representation of the random color.

Example
let color = Colorful.getRandomPreferredColor()

(static) getWhiteAccessibleColor() → {string}

This method generates a random HEX color that is AAA accessible when paired with white.

Source:
Returns:
Type:
string
  • The HEX representation of the color with which you want to calculate the contrast.
Example
// Outputs: #275832
console.log(Colorful.getWhiteAccessibleColor());

(static) hexToRgb(hex) → {array}

This method takes a HEX color as input and returns an array that contains the red, green, and blue components of the input HEX color.

Source:
Parameters:
Name Type Description
hex string

The hex notation of the color you want to convert to rgb() format.
Returns:
Type:
array
  • The first, second, and third element in the array are the red, green, and blue components of the color.

(static) hslToHsv(hsl) → {array}

This method converts an HSL color value into corresponding HSV color value.

Source:
Parameters:
Name Type Description
hsl array

The first, second, and third element in the array are the hue, saturation, and lightness of the color.
Returns:
Type:
array
  • The first, second, and third element are the hue, saturation, and value of the color.

(static) hslToRgb(hsl) → {array}

Source:
Parameters:
Name Type Description
hsl array

The first, second, and third element in the array are the hue, saturation, and lightness of the color.
Returns:
Type:
array
  • The first, second, and third element in the array are the red, green, and blue components of the color.

(static) hsvToRgb(hsv) → {array}

Source:
Parameters:
Name Type Description
hsv array

The first, second, and third element are the hue, saturation, and value of the color.
Returns:
Type:
array
  • The first, second, and third element in the array are the red, green, and blue components of the color.

(static) rgbStringToHex(rgbString) → {string}

This method converts a valid RGB string into a HEX string.

Source:
Parameters:
Name Type Description
rgbString string

The RGB string you want to convert to a HEX color value.
Returns:
Type:
string
  • The long form HEX code for the color.

(static) rgbToHex(rgb) → {string}

Source:
Parameters:
Name Type Description
rgb array

The first, second, and third element in the array are the red, green, and blue components of the color.
Returns:
Type:
string
  • The long form HEX code for the color.

(static) rgbToHsl(rgb) → {array}

This method converts an RGB color value into corresponding HSL color value.

Source:
Parameters:
Name Type Description
rgb array

The first, second, and third element in the array are the red, green, and blue components of the color.
Returns:
Type:
array
  • The first, second, and third element are the hue, saturation, and lightness of the color.

(static) sanitizeHex(hex) → {string}

Make sure that any valid input HEX value (long or short) is returned in long form.

It throws errors in three situations:

  1. The input string doesn't begin with '#'.
  2. The input string has characters that aren't valid hexadecimal.
  3. The number of HEX characters in the input string is neither 3 nor 6.
Source:
Parameters:
Name Type Description
hex string

The HEX value this method will sanitize.
Returns:
Type:
string

When valid input is provided, the method returns a 7-character HEX value including the # at the start.