Color Utils

Some utility objects and functions that ease color processing:

// parse color (either RGB, HSL or CieXYZ)
const clr = Colors.parse("hsla(240, .3, .75, 1)");

// hold the color values in rgba or hex format
const rgb = Colors.rgb(clr);
// hold the color values in hsla format
const hsl = Colors.hsl(clr);
// hold the color values in cieXYZ format
const xyz = Colors.cieXYZ(clr);

// compute color relative luminance
const luminance = Colors.luminance(rgb);
// compute color contrast between two colors (output range [1, 21])
const contrast = Colors.contrastRatio(clr1, clr2);

Sample Application

Studying colors luminance (WCAG-compliant) versus HSL saturation and luminosity:

In the above interactive chart:
See how color luminance changes by modifying HSL colors in their luminosity and saturation.
Usually, a good threshold for dark vs light color discrimination is a 0.2 luminance (light above and dark below), but different hues (0° → 360° along the x-axis) produce different output, given the same saturation and luminosity.

TODO:

• Lagrangian interpolation (luminosity)

• Lagrangian interpolation (saturation)

• 3D WebGPU with mesh x: 0-360° (H) y: 0-1 (S) z: 0-1 (L)