Module: color
Table of contents
Functions
Functions
getContrast
▸ getContrast(background, foreground): Object
Calculates the contrast ratio between two colors according to WCAG guidelines. It also determines if the contrast ratio meets AA or AAA levels for accessibility.
Parameters
| Name | Type | Description |
|---|---|---|
background | any | The background color as a hex string. |
foreground | any | The foreground color as a hex string. |
Returns
Object
An object containing the contrast ratio and boolean values indicating if the contrast meets AA and AAA levels.
| Name | Type |
|---|---|
aa | boolean |
aaa | boolean |
contrast | number |
Example
getContrast("#ffffff", "#000000");
// Returns { contrast: 21, aa: true, aaa: true }Defined in
color.js:116
getContrastColor
▸ getContrastColor(hexColor): "black" | "white"
Determines the best contrast color (black or white) for a given hex color. The decision is based on the luminance of the provided hex color.
Parameters
| Name | Type | Description |
|---|---|---|
hexColor | any | The hex color code as a string (e.g., "#ffffff" or "#000"). |
Returns
"black" | "white"
A string indicating the contrast color, either "black" or "white".
Example
getContrastColor("#ffffff"); // Returns "black"
getContrastColor("#000000"); // Returns "white"Defined in
color.js:12
getRelativeLuminance
▸ getRelativeLuminance(rgb): number
Calculates the relative luminance of an RGB color, which is a measure of the intensity of the light that a color produces. It is used in calculating contrast ratios and adheres to the WCAG 2.1 guidelines.
Parameters
| Name | Type | Description |
|---|---|---|
rgb | any | An array containing the red, green, and blue components of the color, each ranging from 0 to 255. |
Returns
number
The relative luminance, a number between 0 (darkest) and 1 (lightest).
Example
getRelativeLuminance([255, 255, 255]); // Returns 1
getRelativeLuminance([0, 0, 0]); // Returns 0Defined in
color.js:29
hexToRGB
▸ hexToRGB(hex): number[]
Converts a hex color code to its RGB components.
Parameters
| Name | Type | Description |
|---|---|---|
hex | any | The hex color code as a string (e.g., "#ffffff"). |
Returns
number[]
An array of three numbers representing the RGB components of the color.
Throws
If the provided string is not a valid hex color code.
Example
hexToRGB("#ffffff"); // Returns [255, 255, 255]
hexToRGB("#000"); // Returns [0, 0, 0]Defined in
color.js:45
mixColors
▸ mixColors(color1, color2, percentage): string
Mixes two colors in a given proportion.
Parameters
| Name | Type | Description |
|---|---|---|
color1 | any | The first color as a hex string. |
color2 | any | The second color as a hex string. |
percentage | any | The proportion of the second color in the mix, ranging from 0 to 1. |
Returns
string
The resulting color as a hex string.
Example
mixColors("#ffffff", "#000000", 0.5); // Returns "#808080" (a shade of gray)Defined in
color.js:94
rgbToHex
▸ rgbToHex(r, g, b): string
Converts RGB components to a hex color code.
Parameters
| Name | Type | Description |
|---|---|---|
r | any | The red component of the color, ranging from 0 to 255. |
g | any | The green component of the color, ranging from 0 to 255. |
b | any | The blue component of the color, ranging from 0 to 255. |
Returns
string
The hex color code as a string (e.g., "#ffffff").
Throws
If any of the RGB values are outside the 0 to 255 range.
Example
rgbToHex(255, 255, 255); // Returns "#ffffff"
rgbToHex(0, 0, 0); // Returns "#000000"Defined in
color.js:71