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


Herramientas destacadas

BoardlyLinksyChromoHub de Código

ReadyTools

CarrerasContactoHerramientas
Precios7 días gratis
GuíasDocsBlogUpdatesLaraVault

Seleccionar idioma

Establecer tema

© 2026 ReadyTools. Todos los derechos reservados.