How to determine luminance %?

Question

According to http://www.workwithcolor.com/color-luminance-2233.htm, RED (#FF0000) has Luminance: 54%. and light pink (#FF8080) has Luminance: 89%. Our designers like it but how is it determined? Try here: http://www.workwithcolor.com/hsl-color-schemer-01.htm

I tried using relative luminance formula published by W3C and although the range is [0,1], red is 0.21 and white is 1.00.

I'm thinking, maybe what workwithcolor does is first covert the color into grayscale, and read the luminance of the gray. I tried it but it still doesn't give the same result.

I've tried so far : http://jsfiddle.net/HytZQ/

Answer 1

These questions are similar, so I post the same answer on both.

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)

For #FF8080 I get %68.209498... (Page shows %69 (%68.60)), but you stated that the value is %89, I assume this is a typo.

Answer 2

Luminance, Luminosity and Brightness are not the same thing. HSL color model would be great to understand that where one of the component is L (luminosity).

Luminance is not something that you should care about as per your requirement. please read the discussion in the link:

http://www.cambridgeincolour.com/forums/thread23366.htm

RED (#FF0000) has the luminosity as 50% at 100% saturation, but the software programs that we use adjust the values slightly to consider the perceptive factors.

What you need is to start with pure colors. A pure colors are the colors in HSL color space which have luminosity as 50% and saturation as 100% and changing the value of hue gives you the pure colors. There are a total of 6*60 pure colors available via HSL/RGB color spaces. i.e. if you sum the colors generated using the combinations below you will get 360 pure colors.

R=255*(x/60), G=0, B=255; where x changes from 0 to 60 R=255*(x/60), G=255, B=0; where x changes from 0 to 60

R=255, G=255*(x/60), B=0; where x changes from 0 to 60 R=0, G=255*(x/60), B=255; where x changes from 0 to 60

R=255, G=0, B=255*(x/60); where x changes from 0 to 60 R=0, G=255, B=255*(x/60); where x changes from 0 to 60

rest all the colors we see are manipulation of saturation and luminosity.

Now, To get the gray scale images:

1 - You can use the brightness formula as suggested by Jerry (there are some other formulae for better performance). 2 - You can change the saturation to 0% in HSL color space which is exactly http://www.workwithcolor.com/hsl-color-schemer-01.htm does.

Answer 3

Check the formula here: Formula to determine brightness of RGB color

Luminance (standard, objective): (0.2126*R) + (0.7152*G) + (0.0722*B)

Put R=255, and G=B=0, you'll get 54

Edit: For relative luminance, divide by the maximum (255) you get 21%

For white, you get 100%