Computing : Web Design  
Menu          Contact
     Color Chart  -  Half-Colors     
                
  If you are designing a web-page and can't find the color(s) you want in the archaic web-safe palette, but would prefer not to stray too far from those heritage colors, for fear of losing cross-platform consistency, the safest answer could be to choose your colors from the many 'half-colors' that are available.  These are colors in which one, two or all three of their constituent RGB values is exactly halfway between those of the nearest web-safe color.  Below is a novel Color Chart© that displays a total of 1,331 such colors by their 6-character hexadecimal codes.   To find the hex value of the specimen color marked 'X' in the first panel of the chart below, read off the four figures at the side, on the same row (i.e. E6FF), then read off the two figures from the top row of the same column (i.e. B3).  Combine them together to give #E6FFB3 and that is the hexadecimal value of that particular half-color.  This chart includes all 216 web-safe colors, plus all 1,115 of the additional half-colors.  There are some detailed notes on using the chart further down the page.  
         
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#FFFF                                                                             
#FFE6                      
#FFCC                       
#FFB3                      
#FF99                      
#FF80                      
#FF66                      
#FF4D                      
#FF33                      
#FF1A                      
#FF00                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#FFFF                                                                             
#E6FF       X              
#CCFF                       
#B3FF                      
#99FF                      
#80FF                      
#66FF                      
#4DFF                      
#33FF                      
#1AFF                      
#00FF                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#E6E6                                                                             
#E6CC                       
#E6B3                      
#E699                      
#E680                      
#E666                      
#E64D                      
#E633                      
#E61A                      
#E600                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#E6E6                                                                             
#CCE6                      
#B3E6                      
#99E6                      
#80E6                      
#66E6                      
#4DE6                      
#33E6                      
#1AE6                      
#00E6                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#CCCC                                                                             
#CCB3                      
#CC99                      
#CC80                      
#CC66                      
#CC4D                      
#CC33                      
#CC1A                      
#CC00                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#CCCC                                                                             
#B3CC                      
#99CC                      
#80CC                      
#66CC                      
#4DCC                      
#33CC                      
#1ACC                      
#00CC                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#B3B3                                                                             
#B399                      
#B380                      
#B366                      
#B34D                      
#B333                      
#B31A                      
#B300                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#B3B3                                                                             
#99B3                      
#80B3                      
#66B3                      
#4DB3                      
#33B3                      
#1AB3                      
#00B3                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#9999                                                                             
#9980                      
#9966                      
#994D                      
#9933                      
#991A                      
#9900                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#9999                                                                             
#8099                      
#6699                      
#4D99                      
#3399                      
#1A99                      
#0099                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#8080                                                                             
#8066                      
#804D                      
#8033                      
#801A                      
#8000                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#8080                                                                             
#6680                      
#4D80                      
#3380                      
#1A80                      
#0080                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#6666                                                                             
#664D                      
#6633                      
#661A                      
#6600                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#6666                                                                             
#4D66                      
#3366                      
#1A66                      
#0066                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#4D4D                                                                             
#4D33                      
#4D1A                      
#4D00                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#4D4D                                                                             
#334D                      
#1A4D                      
#004D                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#3333                                                                             
#331A                      
#3300                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#3333                                                                             
#1A33                      
#0033                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#1A1A                                                                             
#1A00                      
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#1A1A                                                                             
#001A                      

#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#0000                                                                             
   
#CCCC  FF E6 CC B3 99 80 66 4D 33 1A 00
#0000                                                                             
 
 
Using The Chart - To find the 6-digit hexadecimal value of any color in the chart, read off the four digits to the left of the color, followed by the two digits above the color.  For example, in the bottom (single-row) block above, the middle color has the digits #0000 to the left and 80 to the top which, when combined, give the value, for that particular color, of #000080 (navy blue).  Repeat the same simple process to read off the value of any other color in any of the blocks.  To use navy as, say, the background color of a table cell, the full line of HTML code could look something like:-
<td class=white bgcolor=#000080>This cell has white text on a navy background</td>.
 This cell has white text on a navy background 
 
About the Chart 
You will have noticed that the chart is built up of a number of pairs of blocks side-by-side.  You may also have noticed that the top line of actual colors in each such side-by-side pair of blocks is identical.  This is because adjacent blocks always start from the same common denominator.  Variations in their hexadecimal values start in the second lines down in each pair of blocks.
You may also have realised that each pair of blocks is smaller than the pair above (by one line each time).  This occurs as the different permutations of hexadecimal values are progressively used up.  Ultimately, the final two blocks at the bottom of the chart are left with only one line in each, lines which also happen to be identical to one another because they are the top and, therefore, common lines for that pair of blocks.
If you look at the chart thoroughly, you will see that whole rafts of colors, despite having unique hexadecimal values, appear virtually indistinguishable from one another.  This occurs because the entire chart, by its very nature, falls within the limiting values of the Red Green Blue (RGB) color system.  The more values that are included in such a chart, the closer many of those colors will become to one another.  Consequently, whilst the chart makes for a nice colourful page, it is possibly more pretty than purposeful!
 
About hexadecimal notation
Hexadecimal representation of colors has been the norm from the time of Netscape Navigator 1 but the variety of colors then available was subject to the quality of computer systems at that time, especially the limited number of colors that monitors could display.  In fact, it was not really until version 4 browsers, and corresponding improvements in monitors, video cards etc., that web page designers finally had the freedom to use almost any hexadecimal color they cared to.
'Hexadecimal' means 6 + 10, and is signifying a color-numbering system to a base of 16 (like the number of ounces to a pound), as opposed to a base of 10 (like the number of millimetres in a centimetre), or a base of 12 (like the number of inches in a foot).  All computers work in binary, or base 2 which, apparently, is closely related to base 16.
The 16 digits, counting the zero, in the hexadecimal color system are 0 1 2 3 4 5 6 7 8 9 A B C D E F (where A = 10, B = 11, F=15).  These sixteen digits are capable of being permed into over 16 million different six-digit color combinations, ranging from #000000 (the darkest) through all the colors of the spectrum until #FFFFFF (the lightest).  It ingeniously enables every single color to be denoted by a specific-number of digits (i.e. 6).  This is very computer-friendly, as opposed to the variable number of digits in a color's RGB notation (from 3 to 9) or letters in a color's name (from 3 to thirteen, or more, and then only if it has one). 
 
Web-Safe Palette
Web-safe colors are the 216 colors which can be formed by their components being taken from a mere six of the vast number of possible pairings of hexadecimal values, namely  FF  CC  99  66  33 and 00.  An actual example would be FF+00+00, written as #FF0000, which is red.  The preceding # symbol can be sounded as either 'hash' or as 'number' - the latter being an americanism from their "#1" instead of everybody else's "No. 1").  The total number of possible combinations of those six key pairings is 216.  And that, therefore, is the basic number of colors in the web-safe palette.
 
Named Colors
Support for American names for colors was introduced with Netscape Navigator 2, followed by Internet Explorer 3.  130 different colors have names, though there are 132 names because two of the colors have two permissible names, namely magenta or fuchsia, and aqua or cyan.  The use of names, as opposed to numbers, never really caught on with serious HTML coders, even less so the other permitted alternative of using RGB notation.
Of the 132 supported names, only 9 are in the 216-color web-safe palette, namely black, white, red, blue, magenta, aqua, cyan, lime and yellow.  These nine, plus another seven, making sixteen in all, are all embodied somewhere within the half-color palette above.  The other seven are gray, green, maroon, navy, olive, purple and teal.  The other 114 named colors all have obscure hexadecimal codes apart from just one, namely #C0C0C0, a.k.a. silver.
It is advisable to only use hexadecimal values, not names, when coding web pages, because there is no guarantee that names, especially the really obscure names, will be properly supported in the fringe browsers that a small number of people like to use.
If you do ever use the names of colors, instead of numbers, be terribly careful to spell the names correctly.  If you get even one letter wrong, browsers will substitute a color - which may not be anything like the color you had in mind!
 
Half-Colors
These are colors whose 6-figure hex values are derived from the following scale of pairs... FF  E6  CC  B3  99  80  66  4D  33  1A  00. An example would be 80+00+80, written as #800080, which is the traditional purple color for visited hyperlinks. The full half-color scale is a mix of the web-safe pairs (i.e. FF CC 99 66 33 00), and the pairs that are halfway between (i.e. E6 B3 80 4D 1A). The theory is that the half-colors provide a wider choice to designers than just the web-safe palette, and might be better supported on older computer systems than might some of the more random hexadecimal combinations.
 
Cross-platform compatibility
The need for web-page designers to adhere to web-safe colors has diminished significantly in recent years, almost to the point of being irrelevant.  In fact, any internet user with a computer and monitor that were acquired new since 1998 should be able to see a range of colors vastly in excess of the traditional 216 web-safe colors.  A good general rule for designers might, therefore, be to i) choose colors from the web-safe palette and/or the extended list of named colors (but by number) all the time if possible, ii) choose additional colors from the half-color palette above on occasions that a wider choice is needed, or iii) use any hexadecimal value you like if you are unconcerned about how your pages may appear on the screens of any strange persons still hanging onto pre-Windows 98 computer systems or browsers.
 
Flat screen TFT /  LCD Monitors
Finally, always try to remember that the many modern-day viewers who are now using  flat screen monitors, including laptops, will see your colors much brighter, hence lighter, than the true colors you can see yourself if you are designing on a conventional (true-color) CRT monitor.  For example, pastel shades, which always look terrific on a CRT monitor, may appear as bland white or near white on a TFT monitor.  Or a subtle gold may appear as a garish yellow.  And so on.  Therefore, if you use any very pale shades on your page, be sure to view them on a flat screen to make sure the definition is acceptable.  To minimise problems, always try to surround each pastel area with contrasting darker colors.  Where pastel shades are at the edges of a page, the contrast on the outer sides will be provided by the dark edges of a viewer's browser.  Do not risk one pastel shade next to white, nor next to another pastel, otherwise, on many flat screens, they will virtually merge into a single area of white, or off-white, respectively.
Conversely, if you are designing on a flat screen, be sure to view the end result on a CRT monitor as well - to ensure the pages will not be appearing darker than you would like to the many viewers using that type of monitor.  Do not ignore this advice whilever CRT monitors remain in common or fairly common use.  For example, #A3B0C0 is a flat, pale-blue color that would make a pleasant background behind black or navy text.  But, on a CRT monitor, it is not even blue, more of a slate-grey, and would look crap as a background behind any text.  So, take nothing for granted in your choice of colors, especially the obscure hex combinations - always check the results on both LCD and CRT screens and try to find a happy medium.
 
 
 
Menu          Grays          Top          Contact
 
First posted 20.4.04    Last amended 17.11.07 (dmy)    Copyright (C) 2004-2008 PM Designs    All Rights Reserved