As a web-designer you have probably seen the tables of web-safe colors a million times on different sites. They are all over the web, and a google search for the term “web-safe color chart” yields about 2.5 million results. But how are they actually made ?

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:

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

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

‘ . PHP_EOL;
for($b=0;$b<6;$b++)
{
$color = $steps[$r] . $steps[$b] . $steps[$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.