6

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/

Henry
  • 32,689
  • 19
  • 120
  • 221
  • Here's what [wikipedia](http://en.wikipedia.org/wiki/Luminance_(relative)) says about relative luminance. – mbeckish Oct 30 '13 at 20:16
  • Found this JS library that does Luminance() http://tech.pusherhq.com/libraries/color based on the W3C css color definition. – Henry Oct 30 '13 at 20:44
  • I like the results shown in your link. They don't appear to use any of the usual suspects for the conversion. – Mark Ransom Oct 30 '13 at 23:07

3 Answers3

6

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%

Community
  • 1
  • 1
Jerry
  • 4,258
  • 3
  • 31
  • 58
  • Thx Jerry, I think you're right, but luminance % in the workwithcolor link I posted in the question seems to be doing a different thing. So while you're right, I think I asked the question wrong. Thanks! – Henry Oct 30 '13 at 18:16
  • Somehow workwithcolor's formula would return Lum 54% for red, 89% for light pink, and 100% for white. The relative luminance formula can only return either 21% for red & 100% for white, or 54% for red & 255% for white. – Henry Oct 30 '13 at 19:49
3

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.

mathsRuinedme
  • 123
  • 7
0

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

Equations

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.

PillFall
  • 39
  • 8