Generating a color palette from a image in php


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

Creating a palette

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.

Download Source
Downloads : 3541 / File size : 18.9 kB

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 code

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.

8 Responses

1

honlapkészítés

June 20th, 2011 at 8:56 pm

Thank you! Very interesting article!

2

Sameer Borate Blog: Erstellen einer Farbpalette von einem Bild in php | PHP Boutique

June 21st, 2011 at 4:52 pm

[...] Borate hat eine einfache Methode zur Erstellung einer Farbpalette geschrieben aus einem gegebenen Bild mit nur PHP und GD. In der früheren Post , sahen wir, wie wir einen [...]

3

Orod

June 21st, 2011 at 8:58 pm

nice and impresive job really, but can anyone give me an practical example for this code?

4

janisto

June 22nd, 2011 at 3:17 am

Practical example: http://cssline.com/

5

abcphp.com

June 23rd, 2011 at 10:05 am

Generating a color palette from a image in php…

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 t…

6

Lisa

July 22nd, 2011 at 3:56 am

Really good job. Great Practical example by janisto. Thanks

7

ppt backgrounds

November 26th, 2012 at 4:38 pm

How do I get the color name of the image? :/

8

rahulbot

February 28th, 2013 at 11:05 am

FYI: I made some tweaks to your code and posted a version here: https://github.com/rahulbot/PHP-Image-to-Color-Palette

Your thoughts