13,198,322 members (76,158 online)
Add your own
alternative version

#### Stats

24K views
32 bookmarked
Posted 17 Sep 2008

# Generating a Website Color Scheme from an Image

, 17 Sep 2008
How can a color scheme be extracted from an image? The problem with determining a color scheme is that there are too many colors in the image, yet the algorithm to convert the image must find a set of colors that most accurately represents the original. Atalasoft provides the code right here.

## Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

## 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:

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

## License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

## About the Author

 Atalasoft, Inc. United States
Lou Franco is the Director of Engineering at Atalasoft, provider of the leading .NET Imaging SDK (DotImage) and the Document Viewer for SharePoint (Vizit).

http://atalasoft.com/products/dotimage
http://vizitsp.com

 Pro

## Comments and Discussions

 First Prev Next
 Download files Rekhash20-Mar-13 1:43 Rekhash 20-Mar-13 1:43
 link download ClaudioMichelizza22-Feb-11 0:53 ClaudioMichelizza 22-Feb-11 0:53
 Hi Nitin Sawant20-Oct-08 3:12 Nitin Sawant 20-Oct-08 3:12
 Good article dotnetgreen24-Sep-08 2:52 dotnetgreen 24-Sep-08 2:52
 Re: Good article Lou Franco24-Sep-08 3:22 Lou Franco 24-Sep-08 3:22
 Nice, but I suggest Octree Quantization Dan C.17-Sep-08 9:09 Dan C. 17-Sep-08 9:09
 Re: Nice, but I suggest Octree Quantization Lou Franco17-Sep-08 9:19 Lou Franco 17-Sep-08 9:19
 Thanks -- have you put up an online version? I think the idea of finding complementary/monochromatic -- etc is a really good one. One of the downsides is that I just give you the colors from the image, not doing any post-processing to make it a standardized color scheme -- it's a good starting point though. I really wanted the article to be short and easy to understand -- I'm glad that you posted a way to take it further for those that are so inclined -- thanks.
 Re: Nice, but I suggest Octree Quantization Dan C.23-Sep-08 6:23 Dan C. 23-Sep-08 6:23
 Very Cool merlin98117-Sep-08 7:44 merlin981 17-Sep-08 7:44
 Last Visit: 31-Dec-99 18:00     Last Update: 21-Oct-17 10:15 Refresh 1

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171020.1 | Last Updated 17 Sep 2008
Article Copyright 2008 by Lou Franco
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid