Hexadecimal Numbers and Using RGB Colors for HTML

Hexadecimal Numbers and HTML RGB Colors

In HTML, hexadecimal numbers can be used to specify what are known as "RGB Values" - a powerful way to choose colors in HTML. This short tutorial will first cover hexadecimal numbering, and then their use to specify color in an HTML tag's "color" attribute.

1. Hexadecimal Numbering. Hexadecimal, more commonly called "hex", is a base-16 numbering system. In HTML, no larger than a 2-digit hex number is used, so this tutorial will not cover any more than a 2-digit hex number. Here is a short breakdown of the hex numbering system:
   • Rather than 10 digits, hex uses 16 digits. 0-9 and A-F. 0-9 retain their values, while A=10, B=11 ... E=14, F=15.
   • Instead of a 10's place and a 1's place, like in the decimal numbering system, a 2 digit hex number has a 16's place and a 1's place.
   • For example, the hexadecimal number 12 has a decimal value of 18. This is determined by taking the value in the 16's place, and multiplying by 16, then adding the value in the 1's place.
   • Another example, the hex number A5 equals a decimal 165. (10 * 16) + (5 * 1) = 165. We multiply 10 by 16 because A holds the value of 10, in the 16's place.
   • The highest value a 2 digit hex number can have is 255. 00 in hexadecimal is 0 in decimal, while FF in hexadecimal is (15 * 16) + (15 * 1) = 255.
   • Including 0, the maximum number of values in a 2 digit hex number is 256. We'll use this in our next step, RGB values to color HTML.
2. RGB Colors in HTML. We can use hexadecimal digits to define a color very specifically.
   • In an HTML tag that uses "color" as an attribute, besides using the name of a color as an attribute, we can use an "RGB" value.
   • "RGB" stands for Red, Green, Blue, and we can use 2 digit hexadecimal numbers to define how much of each color we want.
   • The format an HTML color attribute would use for an rgb value is: color="#xxxxxx". The first 2 x's are red, the second green, the last 2 blue.

     

   • As you can see from the image above, different colors can be created by specifying the amount of each of the primary colors of light included (red, green, and blue).
   • This can be used in the <font> tag, among others, to specify the color of the text wrapped in the tag.
   • When we multiply 256*256*256, we see that there is a total of 16,777,216 different color possibilities using hex values to define colors.