PHP Color Replacement

I’ve received a few emails asking how I do the color replacement for the Remind web clip icon. It’s implemented two ways, the preview is performed client-side, but the web clip itself must be composed server-side. Both start with a single white image with transparency where the color will appear.

The preview is pretty simple. You can view source on the Remind form page and check the updateSample() function. It just takes the value of the color input, filters out any non-hexadecimal characters, and sets the background-color of the icon.

The web clip is almost as simple. The color is passed to a PHP script that creates a new image the same size as the icon, floods it with the color, then “stamps” it with the original icon.png. This is what icon.php looks like:

<?php

// validates $_REQUEST['color'],
// defaults to 00ccff if invalid,
// and defines hex2rgb()
include('color.php');

list($r,$g,$b) = hex2rgb($color);

$src = imagecreatefrompng('icon.png');
$w = imagesx($src);
$h = imagesy($src);
$dst = imagecreatetruecolor($w, $h);
$fill = imagecolorallocate($dst, $r, $g, $b);
imagefill($dst, 0, 0, $fill);
imagecopy($dst, $src, 0, 0, 0, 0, $w, $h);

header('Content-type:image/png');
imagepng($dst);
imagedestroy($src);
imagedestroy($dst);

(color.php uses $_REQUEST because my form handler receives the color value in the $_POST data but icon.php receives it via a query string so it shows up in $_GET. $_REQUEST just contains the contents of both.)

And you can request a colored icon like so:

icon.php?color=ff0000

icon.php?color=00ff00

icon.php?color=0000ff

That’s all there is to it.