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.
- 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.
- 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.