Question

I’m trying to create a swatch every color, which I’ll later have to match to the pixels of an image to create a mosaic.

As of now, it doesn’t display anything. I’m not sure if I’m running the loop correctly. It’s taking every number for $r$g$b then incrementing it and changing it to a hex format to be read and displayed.

Code is here:

$r = 000;
$g = 000;
$b = 000;

for($r = 000; $r <= 155; $r++) {
    for($r = 000; $r <= 155; $r++) {
        for($r = 000; $r <= 155; $r++) {

        echo '<span style="width: 5px; height: 5px; background-color-color:#'.dechex($r).dechex($g).dechex($b).'">.</span>';


        }

    }

}

Thanks in advance!

Answer 1

Several issues here:

• I see three loops which are all setting $r, which should probably be $r, $g, and $b.
• You probably want to increase each of the variables by more than 1 at each step. As written (once the r/g/b fix is done), the script you’ve got will generate about 273 MB of HTML output, which will yield a page about 100 feet tall (on screen, assuming 72 dpi).
• The maximum value for a color is 255, not 155 (unless you don’t like bright colors).
• The CSS selector you’re looking for is simply background-color, not background-color-color.

• You need to pad the hex colors with zeroes when they’re under 16 (10 hex). Easiest way to do this is:

  $color = sprintf("#%02x%02x%02x", $r, $g, $b);
  echo "... background-color:$color ...";