A2Z Computer Works logo.

A Very Short Explanation of Web Color



    This little explanation is going to delve into Hexadecimal (Hex) numbering for color in HTML coding - just enough to give you an idea of what you could do. There are lots of very deep references on color if you care to study it in depth.

    Hexadecimal numbers are similar to decimal. Similar only in the idea that it is a numbering system. It is based on 16 instead of 10. The "numbers" are 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - C - D - E - F    - sixteen of them. Referenced here to RGB color values ( Red Green Blue ) indicating how much of each color is used to create the final color. Using a scale of 0 to 255 for each R G & B color from Black at 0 to White at 255 we can create all the colors most people will ever need. But many are not displayed by all web browsers,  or systems set to 256 colors,  or 256 color monitors.

    So, a so-called "Web-Safe" palette was created. It is made up of 216 cross-browser "compatible" colors that we can insert into our HTML code to create an area of color without graphics. There are never-ending discussions about which colors are truly visible across all browsers and platforms - but I am going to limit this to the 216 colors. Several variations of this palette are available from the index page for you to see.

    Each color is mixed in approximately 20% increments for what some call a 6x6x6 table = 216 colors. In Hex the six-digit
RGB numbers chosen to be used for this example always have three pairs of numbers. These are  always  00 - 33 - 66 - 99 - cc - ff. This equals the amount of each of the R G &l B color in the mix from 0% - 00, to 20% - 33, 40% - 66, 60% - 99, 80% - cc, and 100% - ff. Here are a few examples. Hold your cursor over the color to see the R G B code - code is written without the spaces.   Ex:  "#000000"


RED
 33 00 00  66 00 00  99 00 00  CC 00 00  FF 00 00
RED
GREEN
 00 33 00  00 66 00  00 99 00  00 CC 00  00 FF 00
GREEN
BLUE
 00 00 33  00 00 66  00 00 99  00 00 CC  00 00 FF
BLUE

20%
color
40%
color
60%
color
80%
color
100%
color



    Now let's go on to a couple of mixed color palettes - still keeping it simple by mixing only two of each.


RED-BLUE
 33 00 33  66 00 66  99 00 99  CC 00 CC  FF 00 FF
RED-BLUE
GREEN-BLUE
 00 33 33  00 66 66  00 99 99  00 CC CC  00 FF FF
GREEN-BLUE
RED-GREEN
 33 66 00  66 66 00  99 99 00  CC CC 00  FF FF 00
RED-GREEN

20%
color
40%
color
60%
color
80%
color
100%
color



    I want to show you the range of a color - again still limited. This time to all the "pairs" of colors. This makes 16 shades of color for each of the R G B primary colors. But you may or may not be able to see them. This is just a demonstration of color changes of about 6% for each block which are not all in the "web-safe" chart.


RED
   11 00 00  22 00 00  33 00 00  44 00 00  55 00 00  66 00 00  77 00 00  88 00 00  99 00 00  AA 00 00  BB 00 00  CC 00 00  DD 00 00  EE 00 00  FF 00 00
RED
GREEN
   00 11 00  00 22 00  00 33 00  00 44 00  00 55 00  00 66 00  00 77 00  00 88 00  00 99 00  00 AA 00  00 BB 00 00 CC 00  00 DD 00  00 EE 00  00 FF 00
GREEN
BLUE
   00 00 11   00 00 22   00 00 33   00 00 44   00 00 55   00 00 66   00 00 77   00 00 88   00 00 99   00 00 AA   00 00 BB   00 00 CC   00 00 DD   00 00 EE   00 00 FF
BLUE


    I want to show you the range of a color - again still limited. This time to only black and white. Black and White and all the in between shades are made of the same three pairs for R G & B but are in equal amounts at each of the six "web-safe" shades or the complete sixteen shades shown here.


Web Safe B&W
 00 00 00  33 33 33  66 66 66  99 99 99  CC CC CC  FF FF FF
Web Safe B&W

0%
white
20%
white
40%
white
60%
white
80%
white
100%
white



NOTE:  The following B&W example can be used as a simple contrast tool. Make sure you can see all gray changes for approximate contrast setting for your monitor.


Black to White
@ 6% change
   00 00 00  11 11 11  22 22 22  33 33 33  44 44 44  55 55 55  66 66 66  77 77 77  88 88 88  99 99 99  AA AA AA  BB BB BB  CC CC CC  DD DD DD  EE EE EE  FF FF FF
Black to White
@ 6% change


    One day I got real ambitious and made several large grids using one or two R G B colors to show all the gradations available when matching values for each color are used. You may not see many of these shades if you are using a 256 color monitor or system setting - as nearly all the shades fall outside the 216 Web-Safe colors. Grays always have the same codes in each of the R G B positions - an equal amount of each color to create a neutral gray shade.

    Imagine how many colors are possible when you begin to mix all the available Hex color codes.You can view the grids from the Web Help index page. And remember to look through the other color grids here on the site.

    Don't forget to look through the Named Colors charts for another set of sometimes viewable colors.



Copyright © 2010  •  Barry A. Kintner  •  A2Z Computer Works  •  Phoenix, Arizona