The Internet is a colorful world. There are nearly 16 million colors available at the disposal of a web designer. This large number of choices available can end up confusing a novice designer. Often one may end up not giving much thought to choosing the right color codes and html color codes. Furthermore, one might only choose the colors based on a personal choice.
However, choosing the right web color codes is a science as well as an art. Scientifically and technically speaking, one can choose the right html color codes with mathematical precision, provided one knows the science behind the codes. Likewise, one also needs to be artistic in this choice, since failure to choose the right hues can result in a page that is gaudy, hard on the eyes and difficult to read.
Understanding the html colors codes and web safe colors
The fact that there are more than 16 million color codes to choose from is actually derived from the 256 possible settings of the three primary colors Red, Green and Blue (commonly known as RGB). These are the three main colors from which other colors can be derived. The figure of 16.7 million is arrived at by the mathematical cubing of 256 (256x256x256).
Let us now discuss what web safe colors are. Web safe or browser safe color codes are the 216 colors which appear solid, non dithered and consistent on any monitor. To understand the term “dithering” set your computer’s monitor to display only 256 or 16 colors. Now you will notice a ‘specking’ display when you surf the Net using this setting. This is known as dithering.
The term web-safe or browser safe color is derived from the time when computers only displayed a maximum of 256 colors. Of these 256, 40 colors were reserved for Windows and Mac systems. Thus, only 216 colors were left that could be displayed without dithering. In order to be web safe, a color must have very specific amounts and combinations of RGB colors, mainly 0%, 20%, 40%, 60%, 80% or 100% or 0, 51, 102, 153, 204, 255. Thus, a web-safe shade of Red color can have 100% Red with 20% each of green and blue (and not 94% Red along with 26% Green and 14% blue). The latter combination will produce dithering on some systems.
HTML color codes
Hexadecimal code is the base-16 numbering system used by computers. This hexadecimal color code can also used to represent the Web safe color percentages described above. Thus, to specify a particular color code in hex code, you need to always mix red, green and blue (always in this order) by referring to the HTML color code charts table. In the chart, each code is broken into 3 sets of 2 digits each. rr, gg and bb are the two digit pairs controlling the three primary hues. Each of rr, gg and bb can have values none (00) to maximum (ff).
Thus, 100% red is denoted by ff since it is the base 10 system and also because the hexadecimal numerals are 0-9 and a – f. Thus, an example of a browser or web safe Red will be #ff3333.
Some commonly used color codes from the 16.7 million possible combinations include:
- ffffff – Total white (maximum red, maximum green and maximum blue)
- 000000 – Black (no red, no green and no blue)
- ff0000 – Red (Total Red with no green and no blue)
- 00ff00 – Green (Total green with no red and no blue)
- 0000ff – Blue (total Blue with no green and red)
Where and why should you use web safe color codes?
Now that we have seen in brief what web safe color codes are made of, let us study where we must use them.
If your website design has a solid background ensure that it is made of a web safe color code. This will guarantee uniform display on all systems and computer platforms. Even on older computer systems, the background will be displayed in a non-dithered and ‘clean’ manner. In case of web graphics having invisible background, or even with images or text images having invisible background colors, you must ensure using the browser safe color codes. Web safe colors must also be used for HTML generated text and GIF images to ensure correct color mapping and non-breaking up on color challenged monitors.
The right HTML color codes and web safe color codes ensure that your web design is intended for audiences that may be having antiquated computer systems.
If you loved this post, tell me about it and add a little more color to my life.