Hexadecimal Conversions

---

When specifying colors in the computer world, we often break colors down to combinations of Red, Green and Blue. While other color schemes are also used (such as CMYK -- Cyan, Magenta, Yellow and blacK), the RGB scheme is the one most used in Web development.

Each individual element of an RGB (red-green-blue) color combination can be represented by a number. In graphic design, each element can be represented by a Base-10 (decimal) value between 0 and 255. Consider the following table:

As you can see from the table, each color is represented by an array of three values. Each value can be between zero and 255. When specifying a color using Base-10, it common to use the expression RR, GG, BB. For instance, the color Yellow can be represented by 255, 255, 0 (where the RED value is 255, the GREEN value is 255, and the BLUE value is 0).

In the graphic design, it is common to specify RGB color combinations using Base-10 numbers and Base-10 can also be used to specify Web colors. However, it is much more common to specify Web colors using a Base-16 (hexadecimal) numbering system.

Hexadecimal color representations are also R-G-B combinations. Using hexadecimal, each element of an RGB combination can take a value between 00 and FF. Huh? FF? I thought we were talking about numbers? Well, we are. However, remember that hexadecimal is a Base-16 numbering system. In a decimal numbering system, numbers start repeating after the 10^th digit, or 9 (0,1,2,3,4,5,6,7,8,9, 10,11, ...). In a hexadecimal numbering system, numbers repeat after the 16^th digit, or 0F (00,01,02,03,04,05,06,07,08,09,0A,0B,0C,0D,0E,0F, 10,11, ...). Notice each digit in hexadecimal is represented by two characters. Let's take a look at the color table from before, but this time using hexadecimal values:

When specifying colors using a hexadecimal numbering scheme, we use the expressiong RRGGBB. For example the color Yellow is expressed FFFF00. Usually, the hexadecimal expression will be preceded by the pound symbol -- #FFFF00.

As many of us have already done some work in graphic design, we may have favorite colors that we would like to use in Web pages. To do this, we need to convert colors specified in decimal values to hexadecimal values. We must first remember that the hexadecimal numbering system is Base-16 and the decimal numbering system is Base-10. Let's first take a look at hexadecimal equivalents of decimal numbers:

Okay, so now we have an equivalent chart for the decimal values zero through fifteen. But what about converting decimal values greater than fifteen? To convert the decimal value to hexadecimal, we need to divide the decimal value by sixteen. We refer to the equivalency chart and then convert both the quotient and the remainder. Then we concatonate ("string together") the two numbers.

Let's take a look at an example. Suppose we were given the Base-10 RGB expression for the color firebrick, which is 178, 34, 34. How should we convert this expression to a hexadecimal expression?

1. Our first step is to split the expression into its RGB components. Doing so, we find that the RED component is 178, the GREEN component is 34, and the BLUE component is 34.
2. In the second step, we divide the value of each component by sixteen. It is important that we do NOT carry the quotient past the decimal point -- a remainder is crucial for conversion. The results of dividing each component by sixteen are as follows: RED - 178/16=11 r2; GREEN - 34/16=2 r2; BLUE - 34/16=2 r2.
3. The third steps tells us to look for the hexadecimal equivalents of the quotient and the remainder:
   
   • The RED value was divided out to 11 with a remainder of 2. The equivalent of 11 in hexadecimal is 0B. We can drop the zero in front of the B. The equivalent of 2 in hexadecimal is 02. Again, we can drop the zero in front of the two.
   • The GREEN value was divided out to 2 with a remainder of two. In both cases the hexadecimal equivalent is 02. In both cases, we can drop the zero in front.
   • The BLUE value divided out is the same as the GREEN value. Like the GREEN value, the hexadecimal equivalent is 02 for both the quotient and the remainder. We can also drop the initial zero.
4. In the fourth step, we concatonate ("string together") the hexadecimal-converted values for the quotient and remainder for each color component. We concatonate the two numbers in using the followingpattern: Red Quotient-Red Remainder-Green Quotient-Green Remainder- Blue Quotient-Blue Remainder. From step #3, we know that the converted RED values are B for quotient and 2 for the remainder. For GREEN, the quotient is 2 and the remainder is 2. BLUE has the same exact values as GREEN, 2 for the quotient, 2 for the remainder. Thus, using the pattern described earlier, we now know our hexadecimal number is #B22222.

The following table summarizes the conversion process:

Let's try another conversion. This time let's try the Base-10 RGB combination 98, 13, 255, which is a color a little darker than Royal Blue:

Try a few conversions on your own. Click the answer link for each color at the bottom of each table for answers: