Hack23.Build a Color Selector | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 23. Build a Color Selector

Use HSB and DHTML to create a PHP color picker.

People like to be able to pick the colors of their site, or the colors that are applied to their data in a web application. This hack demonstrates a DHTML color picker that allows people to select a color from a grid of HSB color values.

Figure 3-18. A simple geometric shape created with the graphics library

3.14.1. The Code

Example 3-18 is the code for index.php.

Example 3-18. Handling conversion between HSB and RGB values

 <?php function hsb( $h, $s, $v ) {   $r = $g = $b = 0;   if ( $s == 0 )   {     $r = $g = $b = $v;   }   else   { $h = $h / 60; $i = floor( $h ); $f = $h - $i; $p = $v * ( 1 - $s ); $q = $v * ( 1 - $s * $f ); $t = $v * ( 1 - $s * ( 1 - $f ) ); switch( $i ) {       case 0: $r = $v; $g = $t; $b = $p; break;   case 1: $r = $q; $g = $v; $b = $p; break;   case 2: $r = $p; $g = $v; $b = $t; break;   case 3: $r = $p; $g = $q; $b = $v; break;   case 4: $r = $t; $g = $p; $b = $v; break;   default: $r = $v; $g = $p; $b = $q; break; }   }   return array( $r, $g, $b ); } function hsb2hex( $h, $s, $b ) {  list( $r, $g, $b ) = hsb( $h, $s, $b ); return sprintf( "#%02x%02x%02x", $r, $g, $b ); } ?> <html> <head> <script language="Javascript"> function mover( id ) {   var obj = document.getElementById( id );   obj.style.borderColor = "black";  } function mout( id ) {   var obj = document.getElementById( id );   obj.style.borderColor = "white"; } function selectColor( color ) {   document.getElementById( "color" ).value = color; } function hover( color ) {   document.getElementById( "hoverColor" ).innerHTML = color; } </script> <style type="text/css"> body { font-family: arial, verdana, sans-serif; } #color { font-family: courier; } #hoverColor { font-family: courier; } </style> </head> <body> Color: <input  type="text" size="8" /> <table cellspacing="10" cellpadding="0"><tr><td> <table cellspacing="0" cellpadding="0"> <?php $id = 1; for( $h = 0; $h < 360; $h += 18 ) { ?> <tr> <?php for( $b = 255; $b >= 0; $b -= 10 ) { $color = hsb2hex( $h, $b / 255, $b );  ?> <td> <div  style="height:10px; width:10px; border:1px solid white; background:<?php echo( $color ); ?>;" onmouseover="mover('cp<?php echo( $id ); ?>');hover('<?php echo( $color ); ?>');" onmouseout="mout('cp<?php echo( $id ); ?>')" onclick="selectColor('<?php echo( $color ); ?>');"></div> </td> <?php $id += 1; } ?> </tr> <?php } ?> </table> </td><td valign="top"> <div ></div> </td></tr></table> </body> </html>

The big trick here is the HSB( ) function, which converts into RGB a color value that is specified in the hue, saturation, and brightness (HSB) color space. I found this recipe on the Web and did the trivial conversion to PHP from C. The hsb2hex( ) call just wraps the HSB conversion and formats the output RGB value in the #RRGGBB format.

3.14.2. Running the Hack

Upload the index.php file to the site and navigate to it in your web browser. The web browser should look like Figure 3-19.

Just roll around the grid with your mouse, and the value on the right will show the RGB value of the color under the mouse. Clicking on a grid item will put the RGB value of the color into the Color text box at the top of the page.

You can integrate this into your web application by wrapping the color <input> tag in a web form.

Figure 3-19. The DHTML color picker