Experiments: In Color

I’ve written about this previously, but worth repeating. CSS can be dynamically created using a PHP application, as long as the content type is set to CSS:

<?php
// declare the output of the file as CSS
header('Content-type: text/css');
?>

The style sheet can then be used directly or imported into another:

@import "photographs.php";

I use this feature to randomly assign a background image for my header and also to access the color of select pixels in the image in order to colorize the theme based on image. I based the points on the photographer’s “rule of thirds”, which puts the focus on the photo along an imaginary line, either along the top or bottom horizontal third, or the left or right horizontal third. I also pick a pixel directly in the middle of the image. I could test all pixels and find the most common colors used, but the amount of processing is prohibitive. I’ve haven’t seen this algorithm fail when it comes to creating a compatible color set, yet.

fishie.jpeg (JPEG Image, 818x195 pixels)

I use the built-in graphical GD functions in PHP to pick the color points, as well as find the size of my background image, and adjust the header accordingly. I could also have used IMagick, the PHP-based wrapper for ImageMagick, but GD is almost universally available on web hosts, while IMagick is not.


// create a working image
$im = imagecreatefromjpeg($imgname);

// get image height and width
$height = imagesy($im);
$width = imagesx($im);

// sample five points in the image, based on rule of thirds and center
$rgb = array();

$topx = round($height / 3);
$bottomx = round(($height / 3) * 2);
$lefty = round($width / 3);
$righty = round(($width / 4) * 2);
$centerx = round($height / 2);
$centery = round($width / 2);

$rgb[1] = imagecolorat($im, $topx,$lefty);
$rgb[2] = imagecolorat($im, $topx, $righty);
$rgb[3] = imagecolorat($im, $bottomx, $lefty);
$rgb[4] = imagecolorat($im, $bottomx, $righty);
$rgb[5] = imagecolorat($im, $centerx, $centery);

// extract each value for r, g, b
$r = array();
$g = array();
$b = array();

$ct = 0; $val = 5000;
// process points
for ($i = 1; $i <= 5; $i++) {
   $r[$i] = ($rgb[$i] >> 16) & 0xFF;
   $g[$i] = ($rgb[$i] >> 8) & 0xFF;
   $b[$i] = $rgb[$i] & 0xFF;

   // find darkest color
   $tmp = $r[$i] + $g[$i] + $b[$i];
   if ($tmp < $val) {
       $val = $tmp;
       $ct = $i;
   }

}

   printf(".color1 { fill: rgb($r[1],$g[1],$b[1]); stroke: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".color2 { fill: rgb($r[2],$g[2],$b[2]); stroke: rgb($r[3],$g[3],$b[3]); }\n");
   printf(".color3 { fill: rgb($r[3],$g[3],$b[3]); stroke: rgb($r[2],$g[2],$b[2]); }\n");
   printf(".color4 { fill: rgb($r[4],$g[4],$b[4]); stroke: rgb($r[1],$g[1],$b[1]); }\n");
   printf(".color5 { fill: rgb($r[5],$g[5],$b[5]); }\n");

   printf("stop.begin { stop-color: rgb($r[1],$g[1],$b[1]); }\n");
   printf("stop.middle   { stop-color: rgb($r[5],$g[5],$b[5]); }\n");
   printf("stop.end { stop-color: rgb($r[4],$g[4],$b[4]); }\n");
   printf(".nameExpanded, .nameCollapsed { background-color: rgb($r[4],$g[4],$b[4]); } \n");
   printf(".column-post h2, .column-post h2 a, .firstpost,
                .firstpost a { color: rgb($r[$ct],$g[$ct],$b[$ct]); } \n");

To ensure that the title and title bars contrast strongly enough to be viewable, I test the selected colors for the ‘darkest’, ie the less saturated of colors. Adding up the RGB separate values does the trick: a value of RGB(0,0,0) totals to 0, while one for RGB(255,255,255) totals to 765. Everything else falls in between.

Again, the reason for doing this type of adjustment is not only to add an interesting, and changing element, to the site interface, but also to demonstrate what can be done with both images and CSS. Neither is static, and none of the modifications requires scripting on the client, and many of the modifications aren’t impacted by browser type.

For more details on the processing, access the viewable copy of the PHP program.

This entry was posted in Technology and tagged , , . Bookmark the permalink.

4 Responses to Experiments: In Color

  1. I could test all pixels and find the most common colors used, but the amount of processing is prohibitive.

    Surely, this information can be cached? No need to calculate it more than once per photo.

    I’ve haven’t seen this algorithm fail when it comes to creating a compatible color set, yet.

    None of the color combinations are failures, but some seem a bit bland and uninspired, compared to what is available from the photo. Compare to http://www.mezzoblue.com/about/mezzoblue/ (where the colors are hand-picked) or http://blog.dabbledb.com/2007/04/white–or-green.html (where a color scheme is generated from an uploaded logo) and you can see why I think there is some room for improvement.

    Adding up the RGB separate values does the trick: a value of RGB(0,0,0) totals to 0, while one for RGB(255,255,255) totals to 765. Everything else falls in between.

    This works reasonably well as a first approximation for any photo that has sufficient contrast in the chosen areas. However, you might consider tweaking this a bit to make sure it also works well in edge-cases and weight the channels to account for the eye’s different sensitivity to the three colors by reducing the weight of the blue channel a bit, and multiplying the channels (instead of adding them) before sorting.

  2. Shelley says:

    Thank you Michael.

  3. Sam Ruby says:

    Why Programmers suck at Picking Colors. Summary: this problem is both more complex than it appears at first, and there are known algorithms that can be applied.

  4. Shelley says:

    Thank you Sam.