I was working on a website today, and I stumbled into a problem of needing to compute the brightness of a color, so that if it is a background color, I know whether to show white text or black text. My first thought was to simply add up the RGB components of the color and use that value. It turns out that is completely wrong, since pure green looks much brighter than pure blue:
Obviously, you'd want to have white text against the blue background, but black text against the green background.
Now given, there is no way any sane person would use those specific colors as background colors. But the problem still applies to many other, more muted (read: useful), colors. So how do you find the apparent brightness of a color? It turns out to be much more difficult than I thought.
I knew that in Photoshop you can convert your picture from the RGB color space to the Lab color space. Lab colors are described by two color components a and b, and a Lightness component. A good way to convert your photo to black and white is to convert it to Lab, and then get rid of the a and b channels, leaving just the Lightness channel.
So I needed some way to convert from RGB to Lab. Must be easy, right? No. it turns out that there is no absolute conversion between RGB and Lab, because of the nature of the design of the colorspaces. But you can do it if you use the intermediate CIE 1931 (also known as XYZ) color space, if you pick a reference white point to do the conversion. This means that you can get different XYZ colors for the same RGB color depending on what you decide "white" is.
Here is a color conversion calculator. Enter your colors in any color space, pick a reference point, and it will give you the color in many color spaces.
They also give the algorithms used to do the conversion on their site. Below is the algorithm to convert from RGB to XYZ:
var_R = ( R / 255 ) // scales var_R to between 0 and 1 var_G = ( G / 255 ) var_B = ( B / 255 ) if ( var_R > 0.04045 ) var_R = ( ( var_R + 0.055 ) / 1.055 ) ^ 2.4 else var_R = var_R / 12.92 if ( var_G > 0.04045 ) var_G = ( ( var_G + 0.055 ) / 1.055 ) ^ 2.4 else var_G = var_G / 12.92 if ( var_B > 0.04045 ) var_B = ( ( var_B + 0.055 ) / 1.055 ) ^ 2.4 else var_B = var_B / 12.92 var_R = var_R x 100 var_G = var_G x 100 var_B = var_B x 100 //Observer. = 2 degrees, Illuminant = D65 X = var_R x 0.4124 + var_G x 0.3576 + var_B x 0.1805 Y = var_R x 0.2126 + var_G x 0.7152 + var_B x 0.0722 Z = var_R x 0.0193 + var_G x 0.1192 + var_B x 0.9505
The conversion from XYZ to Lab is more straightforward and doesn't require vector math.
var_X = X / ref_X //ref_X = 95.047 Observer= 2 degrees, Illuminant= D65 var_Y = Y / ref_Y //ref_Y = 100.000 var_Z = Z / ref_Z //ref_Z = 108.883 if ( var_X > 0.008856 ) var_X = var_X ^ ( 1/3 ) else var_X = ( 7.787 x var_X ) + ( 16 / 116 ) if ( var_Y > 0.008856 ) var_Y = var_Y ^ ( 1/3 ) else var_Y = ( 7.787 x var_Y ) + ( 16 / 116 ) if ( var_Z > 0.008856 ) var_Z = var_Z ^ ( 1/3 ) else var_Z = ( 7.787 x var_Z ) + ( 16 / 116 ) L = ( 116 x var_Y ) - 16 a = 500 x ( var_X - var_Y ) b = 200 x ( var_Y - var_Z )
I wrote these two functions in PHP, and after running the output of one on the other, I was able to get the brightness value for the colors.
Here is the result of my programming. A web palette of 216 colors in a table, with their brightness values in each cell. The numbers are colored light if the background is dark, and dark if the background is light.