Generating a Website Color Scheme from an Image

• Colour Scheme Generator

Introduction

The next time you’re trying to put together a color scheme for a web site, take a look at your digital photos. If you find one you like, it’s simple to find the most common colors in the image using DotImage and a little code.

The algorithm for finding the most common colors in a photo is simple, and I’ll go through the steps and show you the code.

Step 1: Convert the Image to Use an 8-bit Palette

Digital photos from your camera are stored as 24-bit color. This means that each pixel uses 24 bits to represent a color: 8 bits each for red, green and blue. The problem with trying to find a color scheme is that there are way too many colors in the image. The algorithm to convert it to an 8-bit palette must find a set of 256 colors that most accurately represents the original. This means that colors will be clustered based on how similar they are to each other. Luckily, you don’t need to know this algorithm, because here’s the code using DotImage:

private AtalaImage ConvertTo8BitPaletteImage(AtalaImage image)
{
    AtalaImage img8bpp = image;
    if (image.PixelFormat != PixelFormat.Pixel8bppIndexed)
    {
        img8bpp = image.GetChangedPixelFormat(PixelFormat.Pixel8bppIndexed);
    }
    return img8bpp;
}

Step 2: Count Up How Many Pixels of Each Color You Have

Now that we’ve narrowed it down to just the 256 most common colors, we can now see how many pixels of each color we have. This frequency count is called a histogram, and it’s also simple to create:

private int[] GetColorFrequency(AtalaImage img)
{
    Histogram h = new Histogram(img);
    return h.GetChannelHistogram(0);
}

In a 24-bit color image, a channel represents each of the constituent colors (red, green and blue). However, in an 8-bit palette image, there is only one channel, and the number stored in it is the index into the palette. The int[] that is returned by this function is a 256-element array where each element at an index represents the number of pixels with the color associated with that index in the palette. For example, if the 0th element of the Palette is white, then the 0th element of the channel histogram is the number of white pixels.

Step 3: Sort the Colors in the Palette by Frequency

This is mostly handled by .NET’s Array.Sort(). We just need a Color array with the colors and an array of integers that represents the sort order. The frequency array we created in step two is the sort order we want, so we just need to make an array of colors from the palette. Here’s the code:

private Color[] SortColorsByFrequency(AtalaImage image, int[] colorFrequency)
{
    // make an array of Color object from the entries
    // in the palette
    Palette p = image.Palette; 
    Color[] colors = new Color[p.Colors];
    for (int i = 0; i < p.Colors; ++i)
    {
        colors[i] = p.GetEntry(i);
    }

    // sort the array of colors based on frequency
    Array.Sort(colorFrequency, colors);

    return colors;
}

Step 4: Define a Distance Functions for Colors

Even this array of colors will have many colors that are near each other. To get a list of colors that are different enough, we need functions that can tell us if two colors are different (based on a tolerance) and if a color is not within tolerance of a list of colors. Here’s the code:

private bool WithinTolerance(Color c1, Color c2, double tolerance)
{
    double maxDistance = 255 * 255 * 3;
    int toleranceDistance = (int)(tolerance * maxDistance);

    int distance = (int)Math.Pow((double)(c1.R - c2.R), 2);
    distance += (int)Math.Pow((double)(c1.G - c2.G), 2);
    distance += (int)Math.Pow((double)(c1.B - c2.B), 2);

    return (bool)(distance <= toleranceDistance);
}

The function, WithinTolerance, takes two colors and a tolerance. The tolerance is a real number from 0 (meaning it has to be an exact match) to 1.0, which means 100% tolerance and all colors match each other. By experimenting, I saw that .01 (or 1%) was a good value to use. I defined the difference between two colors as the sum of the squares of the differences in red, green and blue.

Here’s a function that returns true if color is not within tolerance of any color in a list.

private bool ColorIsDifferent(Color color, List<Color> colorList)
{
    foreach (Color c in colorList)
    {
        if (WithinTolerance(c, color, .01)) {
            return false;
        }
    }
    return true;
}

Step 5: Loop through All of Our Colors and Pick Out the Top Ones

private List<Color> GetTopUniqueColors(Color[] colors, int maxColors)
{
    List<Color> uniqueColors = new List<Color>();

    for (int i = 0; i < colors.Length && uniqueColors.Count < maxColors; ++i)
    {
        // read the colors from the end of the array
        // since they are sorted in increasing order of frequency
        Color color = colors[colors.Length - 1 - i];
        if (ColorIsDifferent(color, uniqueColors))
        {
            uniqueColors.Add(color);
        }            
    }

    return uniqueColors;
}

The return value of this function is the list of the top colors in the image.

I have put together a web site that uses this algorithm to generate a color scheme from an image you can upload. You can reach it here:

• Colour Scheme Generator

The full code for the website is available there as well.