How to calculate luminance in HSL

Question

Just checked this website http://www.workwithcolor.com/hsl-color-schemer-01.htm and I am curious how to get those numbers in Lum(luminance)? I can not find a proper formula online to get those results. Thanks

Red in RGB is (255,0,0), by the formula luminance of red color is (0+255)/510 = 0.5 = 50% but that website says that the Lum of red is 54%. And blue and green all have 50% as Luminance by this formula. So the results do not match. That's why I am curious about their result. — Lucas Hu, Feb 04 '19 at 16:35
Ah, on another computer I can see that site. There is a difference between the lightness in HSL and "luma", as shown in the Wikipedia article [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV#Lightness). Looking at the JavaScript on the site you're looking at, they use lum = 0.2126R + 0.7152G + 0.0722B, corresponding to sRGB. — Andrew Morton, Feb 04 '19 at 18:47
yes, I saw that equation is used in a function in the script, but can't find what calls this function. but thanks! — Lucas Hu, Feb 04 '19 at 21:42
In that case I do not understand what your question is. Are you asking where that function is called in the code on that page? — Andrew Morton, Feb 06 '19 at 20:53

PillFall · Answer 1 · 2023-04-02T06:30:39.380

A way to get the values they show is transforming the colour from sRGB to CIE-XYZ and then from CIE-XYZ to L*a*b* (or CIELAB)

In CIELAB, L* is described as perceptual lightness, that's the value the page shows as Luminance.

You can calculate this value quickly with the following equations, remember that the RGB values must need to be normalized (values from 0 to 1):

Equations

Here is a comparison between this algorithm (L*) and the one in the page (Lum.) using the colours on the color luminance explanation.

1 Answers1