Provides several utilities for color manipulation
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
- 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
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)
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)
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)
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)
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)
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)
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)
This project is licensed under the MIT License