How to Convert Between RGB Values and Hexadecimal Color Codes

In HTML and CSS, a color can be encoded with three RGB values or a hexadecimal number. For example, to make a section of text appear VIOLET, you can use either of these two CSS commands:

color:rgb(136,34,216);     or

color:#8822d8;

In the RGB scheme, the three numbers in parentheses represent the amounts of red, green, and blue, respectively. Each number can range from 0 (lowest) to 255 (highest). Red, green, blue are the three primary colors of light; by varying their amounts, you can generate 256³ = 16,777,216 different colors. (The primary colors of light should not be confused with the three primary colors of pigment, which are red, yellow, and blue.)

To represent colors with hexadecimal numbers, you assign a 6-digit base-16 number to each color. The base-16 number system uses the digits 0 through 9 and the letters A through F (which can be either lowercase or capital). The first two hexadecimal digits give the amount of red, the middle two digits give the amount of green, and the last two digits give the amount of blue.

In hexadecimal, the lowest 2-digit number is 00 and the highest is FF (or ff), which equals 255 in base-10. Just as in the RGB system, there are 256 possibilities for each base color, for a total of 256³ = 16,777,216 different hues.

How to Convert RGB to Hex

To convert an RGB triple to a single hex value, you need to convert each of the three base-10 numbers to a base-16 number, then concatenate the three hex values.

For instance, the RGB CSS code for olive green is

color:rgb(153, 174, 17);

When you convert then numbers 153, 174, and 17 to hex values, you get 99, AE, and 11, respectively. Therefore, the equivalent CSS hex code is

color:#99AE11;     or     color:#99ae11;

How to Convert Hex to RGB

To convert a 6-digit hex code to an RGB triple, first break up the hexadecimal number into three 2-digit numbers. Convert each of these base-16 numbers to their base-10 equivalents.

For example, the hexadecimal CSS code for orange is

color:#EF7700;     or     color:#ef7700;

When you convert EF, 77, and 00 into base-10, you get 239, 119, and 0, respectively. Therefore, the RBG code is

color:rgb(239,119,0);

© Had2Know 2010