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

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%

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.