More than once I’ve been surprised to learn that a coworker has no idea how to read RGB values. If you work in html or CSS or [insert your favorite UI technology here], you should have a basic understanding of the RGB color model.

Red Green Blue or RRGGBB

Colors are often written using six hexadecimal values, preceded by a pound or hash sign, where the first two represent red, the middle two represent green, and the last two represent blue. So, the color “#12F547” means that there is a red value of “12”, a green value of “F5”, and a blue value of “47”. The lower the value, the less of that color that goes into the final resulting color.

White and Black

The range of possible values for just one portion of the color is “00” to “FF”. If all three of the colors are 0, then the final color is black. So, “#000000” is equal to black. Conversely, if all three of the colors are as high as possible, the resulting color is white. So, “#FFFFFF” is white.

Shades of Gray

You make shades of gray by setting the R and the G and the B values to the same Hexadecimal number. So, “#707070” is a middle of the road gray color, because the red portion, as well as the green, and the blue portions are all “70” which is roughly half way between “00” and “FF”. Likewise, “#C2C2C2” is a fairly light gray, because each portion carries the value “C2”, which is pretty close to “FF”, or white. Also, “#272727” is a very dark gray, because each portion carries the value “27”, which is close to “00”, or black.

#FFFFFF 
#EEEEEE 
#DDDDDD 
#CCCCCC 
#BBBBBB 
#AAAAAA 
#999999 
#888888 
#777777 
#666666 
#555555 
#444444 
#333333 
#222222 
#111111 
#000000 

Just Red

If we wanted just a red value, we would raise the red portion of the color, and lower the green and blue portions. So, “#FF0000” is fully red. If we wanted a darker red, we would reduce the red value. So, “#770000” results in a darker red.

#FF0000 
#EE0000 
#DD0000 
#CC0000 
#BB0000 
#AA0000 
#990000 
#880000 
#770000 
#660000 
#550000 
#440000 
#330000 
#220000 
#110000 
#000000 

Mixing Colors

By mixing different values of red, green, and blue, we can find other colors. Some simple ones are Red + Green = Yellow, Red + Blue = Magenta, and Green + Blue = Cyan.

#FFFF00 
#FF00FF 
#00FFFF 

RGBA or ARGB

In some technologies, like Microsoft’s WPF, you can specify an alpha value to control the transparency of the color. A value of “FF” is fully on, so it is fully opaque, whereas a value of “00” is fully off, or transparent. Depending on the technology, the alpha value might come at the beginning of the color, or at the end. In WPF, it comes at the beginning, so a value of “#FF006400” is equal to a fully opaque dark green color.

rgb(255,255,255)

Some technologies, like CSS, allow you to specify colors using a format of rgb(x,y,z) where x, y, and z are all numbers from 0 to 255 and x represents the red value, y represents the green value, and z represents the blue value. In case you are not familiar with hexadecimal, the decimal value 255 is equal to the hexadecimal value “FF”, so rgb(255,0,255) is equal to #FF00FF.

Conclusion

Now, when reviewing code, you should immediately be able to recognize that #00FF00 and rgb(0,255,0) both represent green colors. You should also be able to tell that #009A00 is a darker green than #00FF00.