# Color - Luminance

Luminance is a photometric measure that is placed on a scale:

• The ratio of luminance between two colors is known as the contrast.
• Luminance is also known/mixed with the brightness but brightness is not a measure but a perception.

## Example of value

Colors Luminance
Black 0
White 1
Gray 0.21
Yellow 0.92
Green 0.15
Red 0.21
Blue 0.07

With this values, you can see that on a black background, yellow is more readable than blue but less than gray.

## Calculation

### Relative

For the sRGB colorspace, the relative luminance of a color is defined as 1)

$$L = 0.2126 * R + 0.7152 * G + 0.0722 * B$$ where:

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

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

• and

$$RsRGB = R8bit/255$$

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)});

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)});