# Get HSB-mode saturation of a color constructed in RGB

**URL:** <https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674>\
**Category:** Coding Questions\
**Created:** [November 22, 2021, 9:32pm UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674 "2021-11-22T21:32:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![modusponens](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/modusponens/32/13888_2.png) [@modusponens](https://discourse.processing.org/u/modusponens)\
**Post date:** [November 22, 2021, 9:32pm UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674/1 "2021-11-22T21:32:50Z")

</div>

If I set `colorMode(RGB)` and create a color `c`, then get `saturation(c)`, it always gives me the HSL-mode saturation number, which is different from the HSB-mode number. I can’t think of any way to get the HSB-mode saturation of an RGB color. I know the algorithm to do it, so I could write my own function, but if someone doesn’t know that, it doesn’t seem possible. Is there no function that can convert a color from any mode to any other mode?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 22, 2021, 10:02pm UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674/2 "2021-11-22T22:02:33Z")

</div>

If you want a different color model than HSB then you’ll need to implement it yourself. [Here’s an old guide](https://web.archive.org/web/20170321223122/http://codeitdown.com/hsl-hsb-hsv-color/) on the difference between HSL and HSB.

Also, here is a snippet I adapted from a StackOverflow answer for use in [one of my sketches](https://openprocessing.org/sketch/1353109/embed/?plusEmbedHash=NTc2Yjg0MDJlMzNkMzVkM2QxYzEzNDlmNGU0OTA0ZjFlYzBlOWNiMjhiNjY3N2JmYzc0MDU0NDlmMjk4ZGZkZGYxNzg1NGVhNDkwZjQ1YmNkOWM4ZTVlNWM0MjM5Mjg5YjIxOWUxODQzMTk0NDYzOGU3OWZhOTk5MzlkZWNhNDF3RWsyMVJLWG1lQU81dFp3RVphUnUzWnlRUGlGeTh3SHpudTkvVzVCeWFGRCtuL3orVjZoMTlveVBrVm8vMXB0L3dHNzdkOG5rdzlJTFlMM0Faa3k3QT09&plusEmbedTitle=true):

```javascript
// The built in p5.js RGB -> lightness function leaves something to be desired.
// Credit: https://stackoverflow.com/a/13558570/229247

// sRGB luminance(Y) values
const rY = 0.212655;
const gY = 0.715158;
const bY = 0.072187;

// Inverse of sRGB "gamma" function. (approx 2.2)
function inv_gam_sRGB(ic) {
    const c = ic/255.0;
    if ( c <= 0.04045 ) {
        return c/12.92;
    } else { 
        return pow(((c+0.055)/(1.055)),2.4);
    }
}

// sRGB "gamma" function (approx 2.2)
function gam_sRGB(v) {
    if(v<=0.0031308) {
      v *= 12.92;
    } else {
      v = 1.055*pow(v,1.0/2.4)-0.055;
    }
    return int(v*255+0.5);
}

// GRAY VALUE ("brightness")
function gray(c) {
    return gam_sRGB(
            rY*inv_gam_sRGB(red(c)) +
            gY*inv_gam_sRGB(green(c)) +
            bY*inv_gam_sRGB(blue(c))
    );
}

```

---

<div class="post-metadata">

**Author:** ![modusponens](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/modusponens/32/13888_2.png) [@modusponens](https://discourse.processing.org/u/modusponens)\
**Post date:** [November 23, 2021, 12:01am UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674/3 "2021-11-23T00:01:37Z")

</div>

> If you want a different color model than HSB then you’ll need to implement it yourself.

I’m not saying I want a different HSB, I’m just saying I want a way to get HSB’s S from a color that was constructed in RGB. The problem is that `saturation()` returns HSL’s S unless the color was made in HSB, but if I have a color that was made in RGB, I can’t convert it.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 23, 2021, 11:06pm UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674/4 "2021-11-23T23:06:05Z")

</div>

Hello,

A related topic:

> [@Get() returns RGB values while the colorMode is set to HSB](https://discourse.processing.org/t/get-returns-rgb-values-while-the-colormode-is-set-to-hsb/22827):
>
> I’ve swicthed to p5.js from Procesisng.js today (I’ll miss that dude) and already encountered a problem. get() returns an RGB value but my canvas is set to HSB mode. As far as I remember that wasn’t happening when I was working with Processing.js; it used to return according to the colorMode of the sketch. Is there a way to convert it?

`:)`

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 24, 2021, 9:02am UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674/5 "2021-11-24T09:02:20Z")

</div>

> [@modusponens](#):
>
> I know the algorithm to do it, so I could write my own function, but if someone doesn’t know that, it doesn’t seem possible. Is there no function that can convert a color from any mode to any other mode?

I may have misread what you were looking for. Answer: No there is no such function. You have to write your own function.

---

<div class="post-metadata">

**Author:** ![awelles](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/awelles/32/15214_2.png) [@awelles](https://discourse.processing.org/u/awelles)\
**Post date:** [December 10, 2021, 5:34am UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674/6 "2021-12-10T05:34:06Z")

</div>

Hi @modusponens,

This seems to work:

Setup:

```auto
colorMode(RGB);
c = color( 'rgb(20,110,40)' ); // or similar so you have a color with mode = "rgb"

```

Hacky gets:

```auto
colorMode(HSB);
saturation( color( c.toString() ) ); // returns 81.81818181818183

colorMode(HSL);
saturation( color( c.toString() ) ); // returns 69.23076923076924

```

Hacky 2:

```auto
colorMode(RGB);
c = color( 'rgb(20,110,40)' );

c.mode = HSL;
saturation(c); // 69.23076923076924

c.mode = RGB; // lets just put that back where we found it

```

Method 2 involves mutating the color back and forth. bad idea? I dunno

---

<div class="post-metadata">

**Author:** ![modusponens](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/modusponens/32/13888_2.png) [@modusponens](https://discourse.processing.org/u/modusponens)\
**Post date:** [December 10, 2021, 6:59pm UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674/7 "2021-12-10T18:59:33Z")

</div>

> Method 2 involves mutating the color back and forth. bad idea? I dunno

Hmm, I didn’t even know you could do that! This might actually be a good idea, depending on what I was trying to do, which, to be honest, I have now forgotten.