Skip to content

colors

luminance

The `luminance` function calculates the relative luminance of a HEX color according to the WCAG definition. This value represents the perceived brightness of the color, normalized between 0 (black) and 1 (white).

1 min read147 words

Function Signature

js

luminance(hex: string): number

Parameters

hex (string): A HEX color string (e.g., #ff6600).

Return Value

A number between 0 and 1 representing the relative luminance of the color.

js

luminance("#000000");
// 0

luminance("#ffffff");
// 1

luminance("#ff6600");
// ~0.37

Examples

js

// Bright blue
console.log(luminance("#00aaff"));
// ~0.51

// Dark gray
console.log(luminance("#333333"));
// ~0.02

Implementation Details

Converts the HEX color into RGB values using hexToRgb.
Each channel is converted to linear space using the srgbToLinear function.
The formula applies WCAG 2.0 weights: 0.2126 * R + 0.7152 * G + 0.0722 * B.
This corresponds to the human eye’s sensitivity to green, red, and blue light.

Usage Notes

Luminance is a key component for accessibility contrast ratio calculations.
Output is normalized: 0 for pure black, 1 for pure white.
Useful in UI design to ensure sufficient contrast between text and backgrounds.

Previous

randomColor

Next

contrastRatio