Color - Luminance

Relative

For the sRGB colorspace, the relative luminance of a color is defined as ¹⁾

<MATH> L = 0.2126 * R + 0.7152 * G + 0.0722 * B </MATH> where:

• the value R/G/B are calculated with this formula (same formula for all pigment, replace R by G or G)

<MATH> \text{ if } RsRGB <= 0.03928 \\ \text{then } R = \frac{RsRGB}{12.92} \\ \text{ else } R = (\frac{RsRGB+0.055}{1.055}) ^ {2.4} </MATH>

• and

<MATH> RsRGB = R8bit/255 </MATH>

The ^ character is the exponentiation operator.

Javascript

Below, you can see an implementation in Javascript.

function luminance(r, g, b) {
  let [R, G, B] = [r, g, b].map(function (pigment) {
    pigmentRatio = pigment/255;
    return pigmentRatio <= 0.03928 ? pigmentRatio / 12.92 : Math.pow( (pigmentRatio + 0.055) / 1.055, 2.4 );
  });
  return R * 0.2126 + G * 0.7152 + B * 0.0722;
}

• The luminance of white is 1

console.log(`Luminance of white is: ${luminance(255,255,255)}`);

• The luminance of black is 0

console.log(`Luminance of black is: ${luminance(0,0,0)}`);

• The luminance of gray

console.log(`Luminance of gray is: ${luminance(127.5,127.5,127.5).toFixed(2)}`);

• The luminance of Yellow (R+G) is

console.log(`Luminance of yellow is: ${luminance(255,255,0).toFixed(2)}`);

• The luminance of a web color is:

let color = "#7611F7"
let r = parseInt(color.substr(1,2),16);
let g = parseInt(color.substr(3,2),16);
let b = parseInt(color.substr(5,2),16);
console.log(`Luminance of ${color} is: ${luminance(r,g,b).toFixed(2)}`);