An easy version

On the website codecharts i made a while ago to learn a bit of php, i implemented the web-safe color chart using only 10 lines of php code. It is surprisingly easy.

Here is how it is done:

<table width="100%" margin="0" padding="0" cellspacing="0"
  style="border:solid black 1px;">

<?php
$steps = array("00", "33", "66", "99", "CC", "FF");

for($x=0;$x<6;$x++)
{
  for($y=0;$y<6;$y++)
  {
    echo '<tr>' . PHP_EOL;
    for($z=0;$z<6;$z++)
    {
      $color = $steps[$x] . $steps[$z] . $steps[$y];
      echo '<td style="line-height:10px;background:#' . $color . ';" title="#'
                . $color . '">&nbsp;</td>' . PHP_EOL;
    }
    echo '</tr>' . PHP_EOL;
  }
}
?>

</table>

It is implemented as a table. The table has a start and end tag, but the actual table rows and columns are generated with three nested php loops, that build the colors one b one using the array of possible hex-values for each color.

How does it look ?

The actual color chart generated by the above code looks like this:

for($r=0;$r<6;$r++)
{
for($g=0;$g<6;$g++)
{
echo '

‘ . PHP_EOL;
}
echo ‘

‘ . PHP_EOL;
}
}
?>

Clever use of title tags in every cell of the table means that you can hover the mouse over the color and get the value of the color.

Color adds a lot of information to your documents. It is rare to see a webpage with only black text on white background. Luckily you have 16.7 million colors in HTML to spice up your pages. You can specify these colors in two ways. You can either use one of the 16 named colors (see below), or you can specify the color using its hexadecimal code.
The hexadecimal codes have the format “#RRGGBB”, which define exactly how much of the primary colors red, green and blue you want. An example is #990099, which mixes a bit of red and blue to define a purple’ish color.

Standard HTML colors

The HTML 4.01 specification defines 16 named colors. Although many browsers understand a lot more names, these are the only ones actually in the standard, so any other color-names should be used with caution.

HTML color chart

The complete table of the 216 web-safe colors is presented below. Hover your mouse over each color to see the rgb-value, and use it to gain a feel for how the different mixes of rgb colors make different colors (it has never been very intuitive for me that a mix of red and green makes yellow for example).

for($r=0;$r<6;$r++)
{
for($g=0;$g<6;$g++)
{
echo '

‘ . PHP_EOL;
}
echo ‘

‘ . PHP_EOL;
}
}
?>

The origin of the web-safe colors is years ago when we didn’t have as many colors in our displays as we do today. Back then we were limited to using only 216 colors. In these colors the values of red, green and blue could only be either 00, 33, 66, 99, CC or FF. Today most browsers display 24-bit graphics, so it is not so much of a problem anymore.