# Trying to color an image using a palette

**URL:** <https://discourse.processing.org/t/trying-to-color-an-image-using-a-palette/17572>\
**Category:** Coding Questions\
**Created:** [February 5, 2020, 10:50pm UTC](https://discourse.processing.org/t/trying-to-color-an-image-using-a-palette/17572 "2020-02-05T22:50:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pacoruiz](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@pacoruiz](https://discourse.processing.org/u/pacoruiz)\
**Post date:** [February 5, 2020, 10:50pm UTC](https://discourse.processing.org/t/trying-to-color-an-image-using-a-palette/17572/1 "2020-02-05T22:50:39Z")

</div>

Hi.  
Im trying to make an sketch that takes an image and an array of five colors and change all pixels and substitute them for the color of the array that have hue and saturation more closer to that point, letting the brightness the same. I´ve used the image of a link that is suposed to already have theese five colors and almos only them. [https://yazmin.hoasenda.com/25-paletas-de-colores-de-verano-esta-coleccion-de-combinaciones-de-colores-y-paletas-de-colores-son/](https://yazmin.hoasenda.com/25-paletas-de-colores-de-verano-esta-coleccion-de-combinaciones-de-colores-y-paletas-de-colores-son/) But the result should be almost the same than the original and is not. I cant see the problem. The code is this:

```auto
PImage img;
float[] paletah = {217,239,23,34,44};
float[] paletas = {216,225,240,240,237};
void setup(){
 //CARGA IMAGEN
   img = loadImage("imagen.jpg");
   colorMode(HSB, 255);
  noLoop();
  size(2000,2000);
}
void draw(){
  
  int ancho = img.width;
  int alto = img.height;
  PImage newimg = createImage(ancho, alto, HSB);
  newimg.loadPixels();
  for(int i=0;i<ancho;i++){
    for(int j=0;j<alto;j++){
      color c =img.get(i,j);
      float h = hue(c);
      float s = saturation(c);
      float l=brightness(c);
      float cercano = 500000000;
      for (int k =0;k<paletah.length;k++){
        if(pow(paletah[k]-h,2)+pow(paletas[k]-s,2)<cercano){
          cercano=pow(paletah[k]-h,2)+pow(paletas[k]-s,2);
          float nuevoh=paletah[k];
          float nuevos=paletas[k];
          color nuevoc=color(nuevoh,nuevos,l);
          newimg.pixels[j*ancho+i]=nuevoc;
        }
      }      
    }
  }
  newimg.updatePixels();  
  image(newimg, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![BennyHacker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bennyhacker/32/2969_2.png) [@BennyHacker](https://discourse.processing.org/u/BennyHacker)\
**Post date:** [February 6, 2020, 2:44am UTC](https://discourse.processing.org/t/trying-to-color-an-image-using-a-palette/17572/2 "2020-02-06T02:44:43Z")

</div>

You need to cycle through each pixel in your image and compare it to every color in your palette. For each pixel you can create an array that stores the differences between the colors, which each array element corresponding to a different color. After testing, the color with the lowest difference should be the color you set the pixel to.

[https://processing.org/reference/set\_.html](https://processing.org/reference/set_.html)

---

<div class="post-metadata">

**Author:** ![pacoruiz](https://avatars.discourse-cdn.com/v4/letter/p/8c91f0/32.png) [@pacoruiz](https://discourse.processing.org/u/pacoruiz)\
**Post date:** [February 6, 2020, 10:12am UTC](https://discourse.processing.org/t/trying-to-color-an-image-using-a-palette/17572/3 "2020-02-06T10:12:50Z")

</div>

This is what I do. For each pixel, I track the palette array and select the one with the minimum diference. I dont need to create a new array with the diferences because I only have to know the minumum in each case