# Change Saturation of an Image

**URL:** <https://discourse.processing.org/t/change-saturation-of-an-image/20075>\
**Category:** Coding Questions\
**Created:** [April 23, 2020, 3:41pm UTC](https://discourse.processing.org/t/change-saturation-of-an-image/20075 "2020-04-23T15:41:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![benprice](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@benprice](https://discourse.processing.org/u/benprice)\
**Post date:** [April 23, 2020, 3:41pm UTC](https://discourse.processing.org/t/change-saturation-of-an-image/20075/1 "2020-04-23T15:41:34Z")

</div>

Hi,  
I’m trying to figure out how to change the saturation of an image, I can change its brightness, hue, invert it, but just can’t wrap my head around changing saturation (in the hope that i can put it on a slider, and have it with a load of other effects, to create a basic image processor)  
Could someone give me a nudge in the right direction?

My current idea is this:

```auto
img.loadPixels();
  imgCopy.loadPixels();
  

  for (int i = 0; i <= img.width * img.height - 1; i=i+1) {
      s = 20;
    r = red(img.pixels[i]); 
    g = green(img.pixels[i]);
    b = blue(img.pixels[i]);
    
   
    if (r > g && r > b){
    r += s;
    g -= s;
    b -= s;
    }
   if (g > b && g > r){
    r -= s;
    g += s;
    b -= s;
    }
  if (b > r && b > g){
    r -= s;
    g -= s;
    b += s;
    }
    

    
    imgCopy.pixels[i] = color(r, g, b);
    
  }
  
  img.updatePixels();
  imgCopy.updatePixels();
}

```

Thanks for the help.

---

<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:** [April 23, 2020, 4:50pm UTC](https://discourse.processing.org/t/change-saturation-of-an-image/20075/2 "2020-04-23T16:50:14Z")

</div>

Thanks for the question! Please format forum code with three ``` above and below, or highlight your code and use the `</>` button in the editor toolbar. Get rid of those little \< and \> before and after.

---

<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:** [April 23, 2020, 4:52pm UTC](https://discourse.processing.org/t/change-saturation-of-an-image/20075/3 "2020-04-23T16:52:39Z")

</div>

Your color data will always be stored internally as ARGB. However, if you want to display saturation, you can use `saturation(c)` on any color.

[https://processing.org/reference/saturation\_.html](https://processing.org/reference/saturation_.html)

If you want to create or change colors in terms of saturation, use `colorMode(HSB)`.

[https://processing.org/reference/colorMode\_.html](https://processing.org/reference/colorMode_.html)

---

<div class="post-metadata">

**Author:** ![benprice](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@benprice](https://discourse.processing.org/u/benprice)\
**Post date:** [April 23, 2020, 5:25pm UTC](https://discourse.processing.org/t/change-saturation-of-an-image/20075/4 "2020-04-23T17:25:49Z")

</div>

Hi Jeremy,

Thank you for the reply, sorry I missed understood and thought the little \< \> before and after was the right thing.

Thanks that’s really helpful