Skip to content

tylerguy/color-utils

Repository files navigation

Color-Utils

Description

Provides several utilities for color manipulation

Installation

Create a .npmrc file at the root of your project, adding the following on a new line

registry=https://npm.pkg.github.com/

You can then add this as a dependency using:

npm install @tylerguy/color-utils

Functions

hexToRgb(hex)Array.<number>

Converts a hex color to an RGB array

rgbToHex(rgb)string

Converts an RGB array to a hex color

lightenColor(color, percent)Array.<number>

Lightens a color by a given percentage

darkenColor(color, percent)Array.<number>

Darkens a color by a given percentage

rgbToHsl(color)Array.<number>

Converts an RGB color to HSL

hslToRgb(hsl)Array.<number>

Converts an HSL color to RGB

getComplimentaryColor(color)Array.<number>

Returns the complimentary color of a given color

hexToRgb(hex) ⇒ Array.<number>

Converts a hex color to an RGB array

Kind: global function Returns: Array.<number> - The RGB array Throws:

  • Error If the input is not a valid hex color
Param Type Description
hex string The hex color to convert

Example

hexToRgb('#ff0000'); // [255, 0, 0] (red)

rgbToHex(rgb) ⇒ string

Converts an RGB array to a hex color

Kind: global function Returns: string - The hex color

Param Type Description
rgb Array.<number> The RGB array to convert

Example

rgbToHex([255, 0, 0]); // '#ff0000' (red)

lightenColor(color, percent) ⇒ Array.<number>

Lightens a color by a given percentage

Kind: global function Returns: Array.<number> - The lightened RGB array Throws:

  • Error If the percentage is not between 0 and 100
Param Type Description
color Array.<number> The RGB array to lighten
percent number The percentage to lighten the color by

Example

lightenColor([255, 0, 0], 50); // [255, 128, 128] (light red)

darkenColor(color, percent) ⇒ Array.<number>

Darkens a color by a given percentage

Kind: global function Returns: Array.<number> - The darkened RGB array Throws:

  • Error If the percentage is not between 0 and 100
Param Type Description
color Array.<number> The RGB array to darken
percent number The percentage to darken the color by

Example

darkenColor([255, 0, 0], 50); // [128, 0, 0] (dark red)

rgbToHsl(color) ⇒ Array.<number>

Converts an RGB color to HSL

Kind: global function Returns: Array.<number> - The HSL array

Param Type Description
color Array.<number> The RGB array to convert

Example

rgbToHsl([255, 0, 0]); // [0, 100, 50] (red)

hslToRgb(hsl) ⇒ Array.<number>

Converts an HSL color to RGB

Kind: global function Returns: Array.<number> - The RGB array

Param Type Description
hsl Array.<number> The HSL array to convert

Example

hslToRgb([0, 100, 50]); // [255, 0, 0] (red)

getComplimentaryColor(color) ⇒ Array.<number>

Returns the complimentary color of a given color

Kind: global function Returns: Array.<number> - The complimentary RGB array

Param Type Description
color Array.<number> The RGB array to get the complimentary color of

Example

getComplimentaryColor([255, 0, 0]); // [0, 255, 255] (cyan)

License

This project is licensed under the MIT License