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 )
Here are some sites I looked at while trying to figure out exactly what was going on in those functions. Color Conversion Algorithms Useful Color Equations
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.
