# How to make a color palette from an image ordered by frequence

**URL:** <https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850>\
**Category:** Coding Questions\
**Created:** [October 25, 2018, 2:06am UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850 "2018-10-25T02:06:12Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![BulVvyvXsWDYZl8J](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@BulVvyvXsWDYZl8J](https://discourse.processing.org/u/BulVvyvXsWDYZl8J)\
**Post date:** [October 25, 2018, 2:06am UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/1 "2018-10-25T02:06:12Z")

</div>

My goal is to get an array that’ll show in order the most used colours in an image. The catch is that the colours should be perceptually different.

I have working code that does the first part — get all the colours in order of occurrence — but many of the colours are too similar (darker of lighter parts of other common colours.

I’m thinking that [image quantization](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849) might be a way to achieve that. First have the image colours reduced, and then grab them, but I’m not sure if that’s the best approach.

Essentially, I want to get a colour palette from an image. I’d prefer if the resulting colours are really in the image (some methods average the colours). A [median cut](https://en.wikipedia.org/wiki/Median_cut) approach might be appropriate.

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [October 25, 2018, 2:29am UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/2 "2018-10-25T02:29:32Z")

</div>

First off you should share the code that you are using to collect the first bit of data. That way we can help develop it. Then it might be a good idea to pick up a pen and some paper and try to brainstorm a little. How could you do this manually? If you had a list of all the colors with all the variations, how would you sort them in order to get a good overview? Could you visualize it? How would you move on from there?

Then, when you have an idea of what you want to do or how you want to do it, you will probably have to break the problem down into smaller tasks.

And if you have any questions or have problems solving the tasks we are here to help you.

---

<div class="post-metadata">

**Author:** ![BulVvyvXsWDYZl8J](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@BulVvyvXsWDYZl8J](https://discourse.processing.org/u/BulVvyvXsWDYZl8J)\
**Post date:** [October 25, 2018, 2:53am UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/3 "2018-10-25T02:53:26Z")

</div>

To clarify, I’m not a programming beginner (though Java is definitely not my cup of tea). I’m looking for a good general solution I can reuse, not help cooking up a personal inefficient one.

I’ve been reading for hours on methods to achieve this, which is how I came to Image Quantization, LAB, Median cut, K-means, etc. This is a (more than) solved problem and any semi-decent image editing application can achieve this via a GUI. As such, I find it hard to believe no one has a ready-made approach they like and stick to. I’d be more than happy to help improve one of those, but I’m not interested in reinventing the wheel, especially when it comes to mathematical problems. Any solution I can come up with will be inferior to an established mathematical algorithm.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 30, 2018, 6:02pm UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/4 "2018-10-30T18:02:17Z")

</div>

> [@BulVvyvXsWDYZl8J](#):
>
> Essentially, I want to get a colour palette from an image. I’d prefer if the resulting colours are really in the image (some methods average the colours)

Can you describe what kind of content you are working with? Is it photographic, illustrative, CGI, some mix?

Supposing your system encountered an image that was random color static

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3ac8db076f4e6b9b2c3b0f02622759d72f085b8c.jpeg)

…what would be a desirable outcome? Do you have particular palette sizes in mind (3, 5, 10, 20?) and would you want to bias towards more “noticeable” versions of a color, e.g. full saturation?

---

<div class="post-metadata">

**Author:** ![BulVvyvXsWDYZl8J](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@BulVvyvXsWDYZl8J](https://discourse.processing.org/u/BulVvyvXsWDYZl8J)\
**Post date:** [October 30, 2018, 6:58pm UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/5 "2018-10-30T18:58:04Z")

</div>

> [@jeremydouglass](#):
>
> Can you describe what kind of content you are working with? Is it photographic, illustrative, CGI, some mix?

Doesn’t matter. It should work with any image (i.e. collection of pixels).

> [@jeremydouglass](#):
>
> Supposing your system encountered an image that was random color static (…) what would be a desirable outcome?

Essentially, like I mention in the top post, I could already get this to work by first applying [color quantization](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849) to an image and then extracting the most common colours (by checking every pixel).

For that particular image, if I apply color reduction (quantization) with `imagemagick` to 6 colours, I get:

![](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e67c28fe07fc43f244bdbefa5bbf2907042b2409.png)

Which, as a palette, translates to `#CAC4CB, #363B33, #739893, #A74646, #BB54B7, #44AB46`

> [@jeremydouglass](#):
>
> Do you have particular palette sizes in mind (3, 5, 10, 20?)

It should be customisable.

> [@jeremydouglass](#):
>
> and would you want to bias towards more “noticeable” versions of a color, e.g. full saturation?

I’m not sure. Probably not.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 30, 2018, 7:09pm UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/6 "2018-10-30T19:09:05Z")

</div>

I remember an OLD Processing implementation of the neuquant algorithm for neural network color quantization. If what you want is “maximally flexible” (any input, any number of bins, etc) more than “performant” you could check out its results and see if you like them. Will probably need to be updated to Processing 3 – that example was 14 years ago.

- [http://incubator.quasimondo.com/processing/neuquant.pde](http://incubator.quasimondo.com/processing/neuquant.pde)
- [https://processing.org/discourse/alpha/board\_Programs\_action\_display\_num\_1082699358.html](https://processing.org/discourse/alpha/board_Programs_action_display_num_1082699358.html)

Another option might be to use an external invocation of imagemagick convert, if it is doing what you like. That is the approach taken by e.g. this Kotlin demo code on color quantization:

- [https://rosettacode.org/wiki/Color\_quantization#Kotlin](https://rosettacode.org/wiki/Color_quantization#Kotlin)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 30, 2018, 7:20pm UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/7 "2018-10-30T19:20:39Z")

</div>

You might also be interested in these old (2012?) Processing sketches based on k-means:

> **[Picture Statistics](http://www.mathiasbernhard.ch/picture-statistics/)**
>
> Working with images and their statistical representation, I came across a site (link broken) describing the use of k-means clustering and histograms to visualise main colors and their distribution …

  

> **[Interactive Color Clusters](http://www.mathiasbernhard.ch/displayimage/)**
>
> This applet shows the processing.js implementation of the kmeans-colordisc tool presented previously. //   run | next | less | more run : start distribution of cluster centers and draw disc di…

---

<div class="post-metadata">

**Author:** ![BulVvyvXsWDYZl8J](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@BulVvyvXsWDYZl8J](https://discourse.processing.org/u/BulVvyvXsWDYZl8J)\
**Post date:** [October 30, 2018, 7:32pm UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/8 "2018-10-30T19:32:01Z")

</div>

> [@jeremydouglass](#):
>
> Another option might be to use an external invocation of imagemagick convert

That’s what I’m currently doing, via `exec()`. I do find it weird that there’s no ready-made Processing function/library for it, though.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 30, 2018, 7:53pm UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/9 "2018-10-30T19:53:45Z")

</div>

> [@BulVvyvXsWDYZl8J](#):
>
> I do find it weird that there’s no ready-made Processing function/library for it, though.

The more common thing I’ve seen is palette _generator_ libraries (no cluster analysis) like ColorHarmony and ColorScheme

- [CAGE Web Design | ColorHarmony - Processing Library - CAGE Web Design](http://cagewebdev.com/colorharmony-processing-library/)
- [ColorScheme - a processing library](http://josephtaylor.github.io/ColorScheme/)

The closest I’ve seen in library form is the ColorBlindness library, which isn’t for arbitrary analysis – it is a color translator – but it might have some clustering algorithms under the hood.

> **[ColorBlindess: Processing Library](https://ixora.io/projects/colorblindness/)**
>
> Colorblindness simulation library for Processing

It is also possible that you could access kmeans or median cut through a more general purpose image processing library – perhaps check out the apis for opencv or boofcv.

…and here is a java implementation of median cut that I used to use with ImageJ:

[https://imagej.nih.gov/ij/source/ij/process/MedianCut.java](https://imagej.nih.gov/ij/source/ij/process/MedianCut.java)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [October 30, 2018, 10:20pm UTC](https://discourse.processing.org/t/how-to-make-a-color-palette-from-an-image-ordered-by-frequence/4850/10 "2018-10-30T22:20:42Z")

</div>

I’ve done something similar in the past by using k-means to cluster the colors. Some posts that you might find interesting:

> [@Comic Book Colors](https://discourse.processing.org/t/comic-book-colors/1824):
>
> I recently put together a visualization that takes the first 100 pages of various comic books and shows the colors used by them. For example here is Saga: [image] And here is Pretty Deadly: [image] It’s really interesting to compare how different artists use colors, and how colors plays a role in the stories told by comic books. I used a combination of Processing and P5.js to put the visualization together. [Here](http://happycoding.io/gallery/comic-book-colors/about.html) is a discussion on the process, and [here](http://happycoding.io/gallery/comic-book-colors/code.html) is the code I used.

> [@Movie Color Visualization](https://discourse.processing.org/t/movie-color-visualization/2285):
>
> Inspired by my [comic book colors](https://discourse.processing.org/t/comic-book-colors/1824) project, I just put together a few visualizations of the colors used by various movies: So far I’ve played around with two different visualizations. The first one shows a movie as a [timeline](http://happycoding.io/gallery/movie-colors/timelines) of the colors used in each frame. For example here is Finding Nemo: The other visualization creates a [multiple exposure](http://happycoding.io/gallery/movie-colors/multiple-exposures) by combining every frame of a movie into a single image. Here’s Finding Nemo again: [Finding Nemo multiple exposure] A…