In the previous post we saw how we can generate a screenshot from a url. In this post we will see how we can create a color palette of the screenshot (or any other image for that matter) using PHP and GD. This can be useful if you need to quickly get the color scheme of a website or a image. Below are a few example images and their palettes generated using the program.
Images: Flickr
The palette script requires the GD library to be installed on your system. These days the GD library is installed on most PHP systems; but if it is disabled you need to enable it in your php.ini. Make sure that the following line is set in your php.ini.
extension=php_gd2.dll |
Next download the palette class from below, which includes a test picture and a test php script. The original palette class from which the examples are created can be found at github, but the below download includes all the necessary files to create a palette.
The php script creates a palette of the most common colors found in the image. Try using various grid sizes to see how the palette looks. Hovering on each color cell will display the corresponding color value.
The skeleton of the example code is shown below:
<?php include_once("colors.inc.php"); $image_to_read = "tomato.jpg"; $pal = new GetMostCommonColors();$pal->image = $image_to_read;$colors = $pal->Get_Color();?> |
The $colors variable now holds an array of colors, the most common colors being at the top. We can now iterate through the array and display the colors using various methods. In the example code included in the download, I’ve used a html table to display the palette.
Array ( [f0f0f0] => 3598 [e0e0e0] => 1803 [f0f0e0] => 326 [e0e0c0] => 141 [c0c0c0] => 110 [404040] => 67 . . |
The complete example code is shown below.
<?php include_once("colors.inc.php"); /* The image from which the palette will be generated */$image_to_read = "tomato.jpg"; /* Make sure that this number is a perfect square - 9,16,25,36 etc; this will enable you to create a square palette grid. The following for example will create a 5x5 grid. */ $colors_to_show = 25; $pal = new GetMostCommonColors();$pal->image = $image_to_read;$colors = $pal->Get_Color();$colors_key = array_keys($colors); ?><html><head><style type="text/css">/* Change the width and height of the palette squares */td { width: 25px; height: 25px; }</style></head><body> <table border="1"> <?php $inc = sqrt($colors_to_show); for ($i = 0; $i < $colors_to_show; $i += $inc) { $out = "<tr>"; for($j=0;$j<$inc;$j++) { $out .= "<td title=\"#".$colors_key[$i + $j]."\" bgcolor=\"".$colors_key[$i + $j]."\"></td>"; } $out .= "</tr>"; echo $out;}?></table></body></html> |
The above example is included in the download.
This site is a digital habitat of Sameer Borate, a freelance web developer working in PHP, MySQL and WordPress. I also provide web scraping services, website design and development and integration of various Open Source API's. Contact me at metapix[at]gmail.com for any new project requirements and price quotes.
