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.


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 : 4304 / File size : 19.1 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:

$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.

        [f0f0f0] => 3598
        [e0e0e0] => 1803
        [f0f0e0] => 326
        [e0e0c0] => 141
        [c0c0c0] => 110
        [404040] => 67

The complete example code is shown below.

/* 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);
<style type="text/css">
/* Change the width and height of the palette squares */
td { width: 25px; height: 25px; }
<table border="1">
$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;

The above example is included in the download.

10 thoughts on “Generating a color palette from a image in php

  1. Pingback:
  2. I have a very simple image consisting of a number of colored boxes bordered in black. It is actually a beading chart. Using Photoshop there are 4 colors used including the black for the borders. Once again using Photoshop (magic wand) I know the colors. I use this image for $image_to_read in your sample test. The result gives 6 colors and only one corresponds to the colors from Photoshop…. black. I am a little confused by this because I was hoping to use this method to create information for another program.

    Can you explain why I am seeing this difference? I used both gif and png.


    TTFN… Andrea

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>