Color - Luminance

Monet Femme Ombrelle 1886 Logo

About

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.

Online calculation

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)

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





Discover More
Monet Femme Ombrelle 1886 Logo
Color

A color is: a light wave in a range called the visual spectrum (that our eye see) the absence of light or mixed (achromatic colors (white, black, gray) in computer a data type that denotes a color....
Hslsphere
Color - (Lightness|Value|Tone) (White, Gray, Black scale)

Lightness, also known as value or tone, is a property (coordinate) placed on a linear scale where: White is the highest possible value (the lightest) Black is the lowest value (the darkest) Gray...
Monet Femme Ombrelle 1886 Logo
Color - Brightness (amount of gray, minimal maximal luminance)

Brightness is: a subjective attribute of light a perception lightness It cannot be measured objectively (but can be scaled, e.g. in %). The perception: is not linear to luminance, relies...
Monet Femme Ombrelle 1886 Logo
Color Difference / Distance

How to calculate the color differences and/or a distance between two colors ?
Color Picker Contrast Ratio Chorme Devtool
Contrast (Light vs Dark Color Ratio)

contrast is a luminance ratio showing the difference between the most lighter color and the most darker color of an object. Generally, the contrast is calculated between two objects contigu. readable *...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective



Share this page:
Follow us:
Task Runner