Navigation:   TowerBells Home  => Unrelated Essays  => Web colors through HTML

Web colors through HTML

These Webpages are created and maintained with BBEdit, a superb text and HTML editor for those who want to see and control every detail of their work.  In contexts where one may specify a color (e.g., for the background of a page), a visual color picker is available to help.  Exploring how that color picker is arranged helped me to understand how HTML controls the colors that Webpage visitors will see.

BBEdit Color Picker

The color picker used by BBEdit 6 (available on my Mac 9600 under MacOS 8.1) is shown above in an image captured from the screen.  It consists of 6 blocks arranged left to right, each composed of 6 rows and 6 columns of color cells.  Each color cell corresponds to a 6-digit hexadecimal code recognized by HTML, shown at lower left of the color chart for whichever cell has been selected with the cursor.

All of the cells in a block have the same first two hexadecimal digits; left to right, they are 00,33,66,99,CC,FF.

All of the cells in a row, continuous across blocks, have the same middle two digits; bottom to top, they are 00,33,66,99,CC,FF.

All of the cells in a column have the same last two digits; left to right within each block, they are 00,33,66,99,CC,FF.

The BBEdit Color Picker gives access to all possible combinations (6 x 6 x 6) of the six code values listed in the previous three paragraphs.  While they are logically organized in terms of code values, they are not so well organized in terms of visual effect.  Pure green is at the top left corner of the first block, pure black is at the bottom left corner of that block, and pure blue is at the bottom right corner of that block; the remaining corner of that block is aqua.  Pure red is at the bottome left corner of the last block, and pure white is at the top right corner of the same block; the remaining corners of that block are yellow and magenta.  All other cells in all blocks are gradations between these eight pure or near-pure colors.

If you can think three-dimensionally, consider the arrangement of cells if the six blocks were stacked on top of one another, in order, to form a cube.  The eight principal colors would be at the corners of the cube; white and black would be at diagonally opposite corners, and the cells in a straight line between them would be the four shades of gray.  The three corners nearest the black corner would be the three primary colors (red, green, blue); the three corners nearest the white corner would be the three secondary colors (yellow, magenta, aqua).  See the first table below.

HTML color codes

Color codes can be used in several places within HTML.  The tables below use background colors to demonstrate how the various code values translate into visible colors on a computer screen.

In the following table, the background color of each cell was set using the HTML code shown, and the resulting visible color is named there.  These are the eight corners of the color cube described above.

Code: #FFFFFF
Color: White
Code: #000000
Color: Black
At left:  Code: #000000
Color: Black
Code: #FF0000
Color: Red
Code: #00FF00
Color: Green
Code: #0000FF
Color: Blue
Code: #00FFFF
Color: Aqua
Code: #FF00FF
Color: Magenta
Code: #FFFF00
Color: Yellow
Each color has maximum saturation.

Because colors are additive, reducing the amount of a color tends towards black, not towards white:

Code: #FF0000
Color: Red
Code: #00FF00
Color: Green
Code: #0000FF
Color: Blue
Code: #CC0000 Code: #00CC00 Code: #0000CC
Code: #990000 Code: #009900 Code: #000099
Code: #660000 Code: #006600 Code: #000066
Code: #330000 Code: #003300 Code: #000033
The next row would be black in all cells (code #000000).

To get the lighter shades of a primary color, it is necessary to add the other two colors in equal amounts:

Code: #FF0000
Color: Red
Code: #00FF00
Color: Green
Code: #0000FF
Color: Blue
Code: #FF3333 Code: #33FF33 Code: #3333FF
Code: #FF6666 Code: #66FF66 Code: #6666FF
Code: #FF9999 Code: #99FF99 Code: #9999FF
Code: #FFCCCC Code: #CCFFCC Code: #CCCCFF
The next row would be white in all cells (code #FFFFFF).

To get the lighter shades of a secondary color, it is necessary to add the third color.

Code: #00FFFF
Color: Aqua
Code: #FF00FF
Color: Magenta
Code: #FFFF00
Color: Yellow
Code: #33FFFF Code: #FF33FF Code: #FFFF33
Code: #66FFFF Code: #FF66FF Code: #FFFF66
Code: #99FFFF Code: #FF99FF Code: #FFFF99
Code: #CCFFFF Code: #FFCCFF Code: #FFFFCC
The next row would be white in all cells (code #FFFFFF).

For more information, see the English Wikipedia article on Web colors.


This page was created on 2015/02/15 and last revised on 2015/05/04.

Please send comments or questions about this page to the Webmaster/owner.
Use similar links on other pages to send specific comments or questions about those pages.