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 2018/04/20.

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.

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