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

Kerato

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. – Kerato

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. Looking at the JavaScript on the site you're looking at, they use lum = 0.2126R + 0.7152G + 0.0722B, corresponding to sRGB. – Feathered

yes, I saw that equation is used in a function in the script, but can't find what calls this function. but thanks! – Kerato

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? – Feathered

Answer 1

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):

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

Color	L* [%]	Lum. [%]
#FF0000	53.232881...	54 (53.77)
#FF8000	67.050096...	65 (65.06)
#FFFF00	97.138246...	94 (93.63)
#80FF00	89.910015...	83 (82.96)
#00FF00	87.737033...	80 (79.52)
#00FF80	88.485146...	82 (81.63)
#00FFFF	91.116521...	87 (87.44)
#0080FF	54.718662...	57 (57.36)
#0000FF	32.302586...	44 (43.95)
#8000FF	40.911243...	52 (51.51)
#FF00FF	60.319933...	70 (70.28)
#FF0080	54.884906...	60 (59.59)

Oram