Color conversion to HSL/HSB

[polarber]

Creating an RGB color and then using it´s hue, sat, and lightning for a new color should create a color close to the orginal RGB one. Like this:

function setup() { createCanvas(300, 200); colorMode(RGB); var col = color(247,192,31); console.log(red(col), green(col), blue(col)); fill(col); rect(100,100,100,100); var h = hue(col); var s = saturation(col); var l = lightness(col); var b = brightness(col); colorMode(HSL); var col2 = color(h,s,l); fill(col2); rect(200,100,100,100); console.log(red(col2), green(col2), blue(col2)); }

but I get a different one:
247 192 31
224.22448979591837 180.8231292517007 53.775510204081606

Using HSB produce a similar result. Seems that their is an issue with the color conversion routine in P5. When I use the routines from tinyColor.js I get the same RGB color. I tried to debug to see the difference but then I got lost in P5 color handling. I was using: /*! p5.js v0.5.4 October 01, 2016 */ .Time for a real color class in P6 :-)

[ecridge]

Hue and brightness/lightness are being transformed correctly; the issue is with the saturation.

Your colour has HSB saturation of 87% and HSL saturation of 93%.

In RGB mode, saturation() is supposed to return the HSL saturation, so s would be 0.93. When you plug s back into color(), the expected behaviour is that col2 should exactly match col if you have colorMode(HSL), but it won’t match if you have colorMode(HSB).

What’s actually happening is that saturation() is returning 0.73 (which is wrong), so col2 doesn’t match col in either case.

I’ll have a look into why saturation() is returning the wrong value, but in any case it is worth being aware that HSB saturation and HSL saturation are not the same thing.

See also #1620, #1517.