# How to apply color quantization to an image

**URL:** https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849
**Category:** Coding Questions
**Created:** [October 25, 2018, 2:01am UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849 "2018-10-25T02:01:44Z")
**Posts on this page:** 20
**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:01am UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/1 "2018-10-25T02:01:44Z")

</div>

Is there a simple way (preferably a function) to apply [color quantization](https://en.wikipedia.org/wiki/Color_quantization) to an image? Specifically I’d like to pick a `PImage` and an `int` of colours, and it’d reduce the number of colours to that `int`, trying to keep it as close as possible to the original.

For reference, imagemagick can do it easily (I’d link to it, but discourse isn’t letting me): `magick input.png +dither -colors 6 output.png` outputs an image with 6 colours. Not _shades_, but _colours_. The `+dither` is actually not doing dithering but banding, which is closer to what I want.

---

<div class="post-metadata">

### Author: ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [October 25, 2018, 6:25am UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/2 "2018-10-25T06:25:53Z")

</div>

I think posterize is more or less what you want:

> POSTERIZE  
> Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.

See [filter() / Reference / Processing.org](https://processing.org/reference/filter_.html)

---

<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, 12:38pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/3 "2018-10-25T12:38:10Z")

</div>

> [@hamoid](#):
>
> I think posterize is more or less what you want

It’s not. Posterize doesn’t allow for exact control over the number of colours the image will end up with.

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [October 25, 2018, 12:44pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/4 "2018-10-25T12:44:53Z")

</div>

You have that library: [https://github.com/milchreis/processing-imageprocessing](https://github.com/milchreis/processing-imageprocessing)

---

<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, 12:50pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/5 "2018-10-25T12:50:49Z")

</div>

The quantization supported by that library is essentially the same as posterize. It doesn’t allow reducing the image to a specified number of colours.

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [October 25, 2018, 12:59pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/6 "2018-10-25T12:59:55Z")

</div>

[http://www.java2s.com/Code/Java/2D-Graphics-GUI/Anefficientcolorquantizationalgorithm.htm](http://www.java2s.com/Code/Java/2D-Graphics-GUI/Anefficientcolorquantizationalgorithm.htm)

---

<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, 1:13pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/7 "2018-10-25T13:13:59Z")

</div>

Could I please get a bit of guidance on how to apply that in processing? Adding that code gives a ton of errors in the IDE (related to `static` and `colour`). Even if I fix those, it’s unclear how to apply the code to a PImage.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 25, 2018, 1:20pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/8 "2018-10-25T13:20:09Z")

</div>

Paste that code into a file named “Quantize.java”, and place it into the same folder as your “.pde” file(s). 😇

---

<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, 1:28pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/9 "2018-10-25T13:28:21Z")

</div>

Yes, that’s how far I got before. But it doesn’t work right off the bat (as I mentioned, it complains about `static` and later `color`, because it tries to assign it to an `int`). Even if I fix those (removing all `static` and renaming `color` to `colour`), which I’m not sure is the correct way, I still have no idea how to apply it to a `PImage`.

---

<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 26, 2018, 11:11pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/10 "2018-10-26T23:11:26Z")

</div>

I’d also take a tutorial that explains how to take generic Java code and make it Processing-compatible.

---

<div class="post-metadata">

### Author: ![n1ckfg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/n1ckfg/32/119_2.png) [@n1ckfg](https://discourse.processing.org/u/n1ckfg)
#### Post date: [October 30, 2018, 1:54pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/11 "2018-10-30T13:54:17Z")

</div>

> <https://gist.github.com/n1ckfg/74db832518d37cffbb944268b4a37c62>

---

<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, 3:07pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/12 "2018-10-30T15:07:28Z")

</div>

How does one use that? I’ve tried

```auto
PImage myImage = new Palette(6, "/path/to/image").img;
image(myImage, 0, 0, 600, 600);

```

and all I get is a gradient of colours.

Why does the class `Col` exist? It doesn’t seem to be doing anything useful. Same with the `addColor` function.

---

<div class="post-metadata">

### Author: ![n1ckfg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/n1ckfg/32/119_2.png) [@n1ckfg](https://discourse.processing.org/u/n1ckfg)
#### Post date: [October 30, 2018, 3:32pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/13 "2018-10-30T15:32:47Z")

</div>

Basically the technique is to measure the distance between RGB colors as if they were points in space.

In this example you first create a palette by measuring the distance between each color and black (0,0,0). Then you can evaluate any new colors by returning the palette color they’re closest to.

The Col class is used for making that calculation–it contains a color and a distance measurement. You could do the same with an array of colors and an array of floats, but I find this approach easier.

---

<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:39pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/14 "2018-10-30T18:39:12Z")

</div>

That explains what the code does (though I still don’t get why have an extra class for `Col` instead of keeping everything in the same one), but not how to use it.

So are you saying your code doesn’t actually spit out the new image with reduced colours?

---

<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:31pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/15 "2018-10-30T19:31:49Z")

</div>

> [@BulVvyvXsWDYZl8J](#):
>
> So are you saying your code doesn’t actually spit out the new image with reduced colours?

Hmm. Just eyeballing it, it looks like `Palette.img` is a PImage (line 19), and it is populated from the `Pallete.colors` array by the `Palette.createImage()` method. When you call Palette.sample(), it writes values into `colors[]`, then calls `createImage()` which copies them into `img`. You can now access that image. If you want, you could modify createImage() – and sample() – to return it, rather than void.

---

<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:38pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/16 "2018-10-30T19:38:56Z")

</div>

> [@BulVvyvXsWDYZl8J](#):
>
> PImage myImage = new Palette(6, “/path/to/image”)

That’s what I tried, but all I get is a gradient.

---

<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:48pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/17 "2018-10-30T19:48:05Z")

</div>

> [@jeremydouglass](#):
>
> the new image with reduced colours?

Ah, I thought you wanted the new reduced colors, in a PImage. You want the old image, but now with colors reduced, yes?

---

<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, 9:48pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/18 "2018-10-30T21:48:07Z")

</div>

> [@jeremydouglass](#):
>
> You want the old image, but now with colors reduced, yes?

Yes.

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

---

<div class="post-metadata">

### Author: ![n1ckfg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/n1ckfg/32/119_2.png) [@n1ckfg](https://discourse.processing.org/u/n1ckfg)
#### Post date: [October 30, 2018, 10:22pm UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/19 "2018-10-30T22:22:42Z")

</div>

addColor() is for if you want to build a palette with manually selected colors vs. sampling a source image. Probably not relevant to your project.

---

<div class="post-metadata">

### Author: ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)
#### Post date: [October 31, 2018, 10:41am UTC](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849/20 "2018-10-31T10:41:33Z")

</div>

One approach would be to use ToxicLibs: [https://github.com/postspectacular/toxiclibs/blob/master/examples/color/ImageColors/ImageColors.pde](https://github.com/postspectacular/toxiclibs/blob/master/examples/color/ImageColors/ImageColors.pde)

The tricky part is that to calculate the histogram it uses a float tolerance value, and it’s not known in advance how many colors you will get. If performance is not so important, you could run `Histogram.newFromARGBArray` multiple times, tweaking the tolerance until you get the number of colors you want.

In C++ I’ve used [https://github.com/exoticorn/exoquant](https://github.com/exoticorn/exoquant) You could port that to Java. It allows you to specify the exact number of colors.

One more approach is to avoid reinventing the wheel and call a command line program like imagemagick (if that is allowed by your project’s constraints).

[Next page](https://discourse.processing.org/t/how-to-apply-color-quantization-to-an-image/4849.md?page=2)
