| Everyone who wants to introduce color in their e-mail or signature and webpages soon comes to learn that there are two ways to do so: either by naming a color or by specifying a HEX CODE. Easy enough to go to a link such as the one just given, look at the colors and choose to use one specification or the other. To understand, though, how the HEX codes for colors are differently distinguished is helpful, for the actual full range of colors that can be represented by HEX codes is not realizable nor practical. |
| Colors in HTML may be given by a six digit HEX code of the form ######.
Each pair of digits, ##, may be said to represent gradations in the three primary colors red, green, and blue (RGB). Choosing a pair of digits for each of these primary colors in a HEX code can be viewed as "mixing" RGB gradations to give another particular color. Non-dithering colors are colors that do not change from what was originally intended upon being viewed from different browsers. These practical HEX codes consist of only 3 pairs of digits for each of the primary colors: |
| 00 | 33 | 66 | 99 | cc | ff |
| This is very convenient, at least for organizational purposes, since it means that any 2 pairs of HEX codes can have all possible arrangements given by a table: |
| 00 | 33 | 66 | 99 | cc | ff | |
| 00 | 0000 | 0033 | 0066 | 0099 | 00cc | 00ff |
| 33 | 3300 | 3333 | 3366 | 3399 | 33cc | 33ff |
| 66 | 6600 | 6633 | 6666 | 6699 | 66cc | 66ff |
| 99 | 9900 | 9933 | 9966 | 9999 | 99cc | 99ff |
| cc | cc00 | cc33 | cc66 | cc99 | cccc | ccff |
| ff | ff00 | ff33 | ff66 | ff99 | ffcc | ffff |
| This is a 6x6 table, so there are 36 cells in this table. To introduce the 3rd set, place the HEX pair of digits, 00, before the 2 HEX pairs in each cell and there is obtained a table for all colors whose HEX code begins with 00. Do the same for 33, 66, and so on and there is obtained 6 tables of HEX codes for all 216 non-dithering colors. These are given below: |
| 00 | 33 | 66 | 99 | cc | ff | |
| 00 | 000000 | 000033 | 000066 | 000099 | 0000cc | 0000ff |
| 33 | 003300 | 003333 | 003366 | 003399 | 0033cc | 0033ff |
| 66 | 006600 | 006633 | 006666 | 006699 | 0066cc | 0066ff |
| 99 | 009900 | 009933 | 009966 | 009999 | 0099cc | 0099ff |
| cc | 00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff |
| ff | 00ff00 | 00ff33 | 00ff66 | 00ff99 | 00ffcc | 00ffff |
| 00 | 33 | 66 | 99 | cc | ff | |
| 00 | 330000 | 330033 | 330066 | 330099 | 3300cc | 3300ff |
| 33 | 333300 | 333333 | 333366 | 333399 | 3333cc | 3333ff |
| 66 | 336600 | 336633 | 336666 | 336699 | 3366cc | 3366ff |
| 99 | 339900 | 339933 | 339966 | 339999 | 3399cc | 3399ff |
| cc | 33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff |
| ff | 33ff00 | 33ff33 | 33ff66 | 33ff99 | 33ffcc | 33ffff |
| 00 | 33 | 66 | 99 | cc | ff | |
| 00 | 660000 | 660033 | 660066 | 660099 | 6600cc | 6600ff |
| 33 | 663300 | 663333 | 663366 | 663399 | 6633cc | 6633ff |
| 66 | 666600 | 666633 | 666666 | 666699 | 6666cc | 6666ff |
| 99 | 669900 | 669933 | 669966 | 669999 | 6699cc | 6699ff |
| cc | 66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff |
| ff | 66ff00 | 66ff33 | 66ff66 | 66ff99 | 66ffcc | 66ffff |
| 00 | 33 | 66 | 99 | cc | ff | |
| 00 | 990000 | 990033 | 990066 | 990099 | 9900cc | 9900ff |
| 33 | 993300 | 993333 | 993366 | 993399 | 9933cc | 9933ff |
| 66 | 996600 | 996633 | 996666 | 996699 | 9966cc | 9966ff |
| 99 | 999900 | 999933 | 999966 | 999999 | 9999cc | 9999ff |
| cc | 99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff |
| ff | 99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff |
| 00 | 33 | 66 | 99 | cc | ff | |
| 00 | cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff |
| 33 | cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff |
| 66 | cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff |
| 99 | cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff |
| cc | cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff |
| ff | ccff00 | ccff33 | ccff66 | ccff99 | ccffcc | ccffff |
| 00 | 33 | 66 | 99 | cc | ff | |
| 00 | ff0000 | ff0033 | ff0066 | ff0099 | ff00cc | ff00ff |
| 33 | ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff |
| 66 | ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff |
| 99 | ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff |
| cc | ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff |
| ff | ffff00 | ffff33 | ffff66 | ffff99 | ffffcc | ffffff |
| These 6 color tables represent slices made through a color cube. If one was able to view this as if the cube was transparent the entire kaleidascope of non-dithering colors would be seen on the faces and throughout the cube. It is instructive and informative to now view each pair of HEX codes for a color as representing a particular value for R, G and B, as in the RGB representation of colors. Here the 256 possible shades of R, G, and B are each assigned a number from 0 to 255. Using the color cube values, though, only 6 shades of R, G, and B are considered. How these are to be used is readily illustrated by generating the shades of gray between white, ffffff, and black, 000000. It will be noted that equal values of R, G and B must pertain. There is thus obtained: |
| Grays |
| 333333 |
| 666666 |
| 999999 |
| cccccc |
| ffffff |
| If all 16 HEX codes were used in this way there would be a steady progression of shadings going from black to white. The darker primary color shades for RGB are obtained by "blacking-out",i.e,setting as 00, the other primary colors. The lighter shades are gained by "whiting-out", i.e.setting as ff, the chosen primary and combining the other two. |
|
|
|
|
|
|
| Here too use of all 16 HEX codes would lead to a progression of the primary colors going from their darkest to their lightest shade. This progression is plainly seen using other sets of HEX codes, as shown below. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Any two primary colors can be "mixed" or combined in just as consistant a progression by "blacking-out", i.e., setting as 00, the third. And as before, the lighter shades are gained by "whiting-out", setting as ff, the primary colors that are combined. Again, all 16 HEX codes could have been used for this illustration. |
|
|
|
|
|
|
| Even at this early stage it is evident that the color cube describes not so much color, there being only 6 differing colors, but shades of these colors. It is also plain that all 16 of the HEX code pairs can be used for them and their shadings. The choice of only 6 pairs of HEX codes is no more and no less than an expedient. There is nothing "magical" to the non-dithering nature of these 6 pairs, all 16 pairs meet the same criteria. They designate the intensity for the R, G and B color beams of a TV or monitor. Dithering will take place if these beams are out of balance, a common occurence. Otherwise they are non-dithering. Continuing the "mixing" of color pairs provides alternative shade groupings. Less than 6 HEX codes are used when an abrupt color change takes place, designating a cross-over to another color domain. |
|
|
|
| This section may be difficult for some as it does entail a mathematical construct. Continue if desired, but otherwise return to the more general information. |
A BIT is a switch that can be either 0 or 1, i.e., it has 2 different settings. Many systems use BYTEs consisting of 4 bits. So 4 bits can represent 2 x 2 x 2 x 2 or 16 different bytes. Control & Character Equivalents With 2 bytes independent of one another 16 x 16 different things can be represented, e.g., keyboard characters, typewriter operations such as space or return, or cursor/screen commands such as cursor home or scroll. Making a checkerboard-like table 16 items across (a row, r) and 16 items down (a column, c), each "thing" can be identified by rc, its HEX CODE according to which row and which column it may be in. Labeling the 16 items across and down by 0 to 1 AND a to f gives hex codes as are usually seen, e.g., 76, 0d, or ea. These are often used as a type of machine language. Numbering the cells in a sequential manner gives an ASCII sequence table which identifies all characters and typewriter operations possible on a typewriter keyboard, including those characters obtained using special keys like "cmd" and "alt". Additional symbols and characters are to be found in an extended ASCII table or a table for ctrl or alt sequences. All of these have HTML codes known as HTML-equivalents. Consider the Red, Green, Blue (RGB) representation of color. Each of these is given a number from 0 to 255 going from when the color "looks" blackest to when it "looks" whitest. Mixing RGB gives any visible color desired, just as with a color TV set. So there are actually 256x256x256 (some millions) of possible colors and shadings of color. Why the number 256? It has to do with bits (on-off switches) and bytes (collections of these). For a set of 4 bits there are 16 ways of having on-off for them. With 2 sets of 4 there are 16x16 ways (bytes), i.e., 256 ways. All possibilities can be represented as a table with rows and columns labeled: 0 1 2 3 4 5 6 7 8 9 a b c d e f There are 16 of these, so it is termed a HEXadecimal representation. To identify any one cell just give the HEXadecimal value corresponding to the row and column it is in, e.g., 4f, a5, 88, or bb. The RGB system just labels the cells sequentially for R, G, and, B, i.e., 1 for 00 , 2 for 02, going to 256 for ff. The 216 base colors often referred to applies ONLY to those RGB HEX codes for which the HEX representation is every 3rd one and the same, i.e., 00, 33, 66, 99, cc and ff. That is only 6 pairs. Three tables of hex codes for are needed for RGB, so taking only these HEX representation, to specify a color three PAIRS of hexadecimal values are needed; for example 00 cc aa, which is what is usually done in HTML. All possible combinations of ONLY these HEX code colors can be made by creating a table of, say, G and B combinations for which the rows and columns would be labeled: 00 33 66 99 cc ff There are here 6x6 or 36 such cells. Putting the 1st HEX value for R in every cell of this, then the 2d, and so on gives 6x36 or 216 possible colors. In a 3-D (x,y,z-axis) representation this would be a cube, so it is called the 216 color-cube. It is also a selection of "non-dithering" colors, i.e., the color selected will show up the same independent of the type of browser and will not be viewed a different color than intended. This is the basis for Beth's background color chart. These can also be specified by a name rather than a hexcode. What about the other colors?? These are the ones most often found named. Their hex code PAIRS for RGB are the same,e.g., 2f 66 3d. Even if this explanation is not entirely understood by the viewer perhaps an idea has been gained of why things with most computers are just 16s or multiples thereof, e.g., 16 or 32 bit processors or 256 base HEX character equivalents. |