Html-Color codes
Html – color codes
Let’s first take a look at the 16 generic color values we referred to before moving toward the other, more complex HTML coloring systems of numeric and hexadecimal values.
HTML String Color Codes:
Black | Gray | Silver | White | ||||
Yellow | Lime | Aqua | Fuchsia | ||||
Red | Green | Blue | Purple | ||||
Maroon | Olive | Navy | Teal |
Any of the aforementioned string values including “teal”, “black”, or “gray” can be passed as a color value to the HTML bgcolor characteristic.
HTML Bgcolor Code Values:
1 |
bgcolor="purple" |
Html – colors: numeric (rgb) values
As there are still many internet browsers that do not support numeric color values we do not offer that you utilize RGB for safe web design. However, these values may pop up sometimes, and comprehending how they work considers as a good notion.
Colors displayed on a computer monitor or any digital device is produced via various amounts of red, green, and blue light. A computer monitor is capable of showing millions of various colors based on the quality of the computer monitor through combining together various amounts of each color of light. This notion is exactly what HTML numeric (RGB) values use. They indicate the amount of each of the various colors of light to blend together (red, green, and blue light).
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 shows, in a numeric color value. A numeric color value is fundamentally a comma-separated list of values ranging from 0 (none of that color) to 255 (fully that color) that are understood and then combined together by the web browser and finally passed to the computer monitor for display.
Red, Green, and Blue Values:
bgcolor=”rgb(255,0,0)” | Red |
bgcolor=”rgb(0,255,0)” | Green |
bgcolor=”rgb(0,0,255)” | Blue |
bgcolor=”rgb(0,0,0)” | Black |
bgcolor=”rgb(255,255,255)” | White |
bgcolor=”rgb(120,120,120)” | Grey |
bgcolor=”rgb(240,40,120)” | Pink |
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.
HTML Color: Hexadecimal Code:
1 2 |
<!-- Hexadecimal Color Value --> bgcolor="#004488" |
A hexadecimal is a 6-digit numeric representation of a color, included of three various parts (the red, the green, and the blue). The first two digits (00) show a red value, the next two (44) are a green value, and the last (88) are the blue value. The ultimate color shade blended these three groups of values.
Hexadecimal Formula: 2 digits at a time:
1 |
([first_digit]* 16) + ([second_digit]) = primary color value |
Let’s utilize this formula to an example and see how it performs!
HTML Color: Hexadecimal Example Code:
1 |
bgcolor="#004488" |
We now know that this six digit value is really 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 – depicts the Red value.
- 44 – depicts the Green value.
- 88 – depicts the Blue value.
Hexadecimal Formula: Calculated:
1 2 3 4 5 6 |
<!-- 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 |
We now have a value that shows the rgb(0,68,144) values we’ve seen before throufg applying this formula to each value pair.
But now for the curve ball. As hexadecimal values are confined to six single digits, you may considered that the value #999999 is the largest hexadecimal value that is possible. This is not the case. The hexadecimal system utilizes letters (A-F) to depict values greater than nine. But why? This is an excellent question.
It’s apparently easiest to understand by working through the calculation of our supposed maximum hexadecimal value #999999.
Hexadecimal Formula: #999999 Calculated:
1 2 3 4 5 6 |
<!-- 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 |
According to the calculations above, we are observing a maximum value of rgb(153,153,153). This does not agree with numeric values that have a maximum value of rgb(255,255,255) and it extremely restrict what would be the attainable color spectrum. So, letters are spread out to show numbers and this is what makes it possible to stretch the color wheel threshold to the max.
The table below determines how each letter (A-F) matches to the hexadecimal numeric corresponding.
Hexadecimal Color Values:
Decimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Hexadecimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Through observing the next few calculations, you should be able to see that, via using letters, we are able to stretch the color wheel giving HTML developers a wide selection of color alternatives for web page designers.
HTML Color: Hexadecimal Example Code:
1 |
bgcolor="#AA93FF" |
Hexadecimal Formula: Calculated:
1 2 3 4 5 6 |
<!-- 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 |
HTML Color: Hexadecimal Example #2:
1 |
bgcolor="#CC7005" |
Hexadecimal Formula: Example #2 Calculated:
1 2 3 4 5 6 |
<!-- 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 |