HTML - Color Codes

Let's first review the 16 generic color values we mentioned previously before diving into the other, more complicated HTML coloring systems of numeric and hexadecimal values.

HTML String Color Codes:

Any of the string values listed above such as "teal", "black", or "gray" can be passed as a color value to the HTML bgcolor attribute.

bgcolor="purple"

HTML - Colors: Numeric (RGB) Values

We do not recommend that you use RGB for safe web design because there are still a handful of internet browsers that do not support numeric color values. However, these values may pop up from time to time, and it is a good idea to have an understanding of how they work.

Colors shown on a computer monitor or any digital device are constructed using various amounts of red, green, and blue light. By blending together different amounts of each color of light, a computer monitor is able to display millions of different colors depending on the quality of the computer monitor. This concept is precisely what HTML numeric (RGB) values use. They specify the amount of each of the different colors of light to blend together (red, green, and blue light).

In a numeric color value the RGB stands for Red, Green, Blue (as in light) and the format for a RGB value is rgb(RED, GREEN, BLUE), just like the name implies. A numeric color value is essentially a comma-separated list of values ranging from 0 (none of that color) to 255 (fully that color) that are interpreted and then mixed together by the web browser and ultimately passed to the computer monitor for display.

Red, Green, and Blue Values:

HTML Coloring System - Hexadecimal

The hexadecimal system is complex and difficult to understand at first. Rest assured that the system becomes much, MUCH easier with practice, and as a blossoming web developer, it is critical that you understand hexadecimals to be capable of using them in your own websites. They are far more reliable, and are more widely compatible with web browsers, and are currently the web standard for coloring HTML elements.

<!-- Hexadecimal Color Value -->
bgcolor="#004488"

A hexadecimal is a 6-digit numeric representation of a color, comprised of three different components (the red, the green, and the blue). The first two digits (00) represent a red value, the next two (44) are a green value, and the last (88) are the blue value. These three sets of values combined form the final color shade.

([first_digit]* 16) + ([second_digit]) =  primary color value

Let's apply this formula to an example and see how it works!

bgcolor="#004488" 

We now know that this six digit value is actually three separate values working together to create a single shade. Let's separate each value and perform some calculations based on the formula we have listed above.

• 00 - represents the Red value.
• 44 - represents the Green value.
• 88 - represents the Blue value.

<!-- Red Value 00 -->
(0 * 16) + (0) = 0 red value
<!-- Green Value 44 -->
(4 * 16) + (4) = 68 green value
<!-- Blue Value 88 -->
(8* 16) + (8) = 144 blue value

By applying this formula to each value pair, we now have a value that resembles the rgb(0,68,144) values we've seen before.

But now for the curve ball. Since hexadecimal values are limited to six single digits, you may assume that the value #999999 is the largest hexadecimal value that is possible. This is not the case. The hexadecimal system uses letters (A-F) to represent values greater than nine. But why? This is an excellent question.

It's probably easiest to understand by working through the calculation of our supposed maximum hexadecimal value #999999.

<!-- Red Value 99 -->
(9 * 16) + (9) = 153 red value
<!-- Green Value 99 -->
(9 * 16) + (9) = 153 green value
<!-- Blue Value FF -->
(9 * 16) + (9) = 153 blue value

Based on the calculations above, we are seeing a maximum value of rgb(153,153,153). This does not coincide with numeric values that have a maximum value of rgb(255,255,255) and it greatly limits what would be the available color spectrum. Therefore, letters are deployed to represent numbers and this is what makes it possible to extend the color wheel threshold to the max.

The table below identifies how each letter (A-F) corresponds to the hexadecimal numeric equivalent.

Hexadecimal Color Values:

Taking a look at the next few calculations, you should be able to see that, by using letters, we are able to extend the color wheel giving HTML developers a greater selection of color options for web page designers.

bgcolor="#AA93FF" 

<!-- Red Value AA -->
(10 * 16) + (10) = 170 red value
<!-- Green Value 93 -->
(9 * 16) + (3) = 147 green value
<!-- Blue Value FF -->
(15 * 16) + (15) = 255 blue value

bgcolor="#CC7005"

<!-- Red Value CC -->
(12 * 16) + (12) = 204 red value
<!-- Green Value 70 -->
(7 * 16) + (0) = 112 green value
<!-- Blue Value 05 -->
(0 * 16) + (5) = 5 blue value

• Go Back
• Continue

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!