# How do I convert RGB to HSB/HSL

Get help using Construct 2

### » Fri Aug 25, 2017 5:03 pm

Hi, I'm using the plugin color picker from textbox http://c2rexplugins.weebly.com/rex_textbox_color.html
It provides the color in hex or RGB using the expressions, but I need the HSB/HSL value to use with the effect "Adjust HSB/HSL".

How can I do it?
Thanks
B
41
S
11
G
2
Posts: 73
Reputation: 3,012

### » Fri Aug 25, 2017 6:19 pm

You can do it via javascript:

function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;

if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}

return [h, s, l];
}

You should also check: http://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/
Howdy, I'm HenryPK! I love helping people and making games... Hope we can be friends. (Actually developing Blue in Bitwin Entertainment: https://gamejolt.com/games/blue/321184)
B
11
S
3
G
1
Posts: 68
Reputation: 1,374

### » Fri Aug 25, 2017 8:17 pm

I would add to what HenryPK says.

https://www.dropbox.com/s/pqvzx2ygxd3ve ... .capx?dl=0

This is not gonna work with the effect "Adjust HSB/HSL".
Why? Because of that little word 'adjust'.
It takes the HSL of the sprite and rotates that colour, adjusts that lightness and saturation.
In other words, the outcome is relative to the existing color of the sprite (unless that is what you want)

But there are two other effects that work well and without conversion.
B
33
S
18
G
29
Posts: 2,493
Reputation: 21,450

### » Fri Aug 25, 2017 10:57 pm

@99Instances2Go @HenryPK First, Thanks so much for your replies.
I knew the others effect, they work well, but as I see on this tutorial: https://youtu.be/MPXxOFEkbfs?t=2m19s with Adjust HSB you can modify more than one color of a sprite, so like the example, a car with shadow.
With SetColor you modify the sprite to a full color, without differences.
With ReplaceColor you only can modify one color of the sprite and the final result isn't as perfect as Adjust HSB looks.
B
41
S
11
G
2
Posts: 73
Reputation: 3,012

### » Sat Aug 26, 2017 3:45 am

Adjust HSL takes in count the existing color and adjust it to another.

For example, you want to leave a Sprite blue.
If the sprite is white, it will be a perfect blue.
But if the sprite is red, the colours will blend, and the sprite becomes purple,

The same for Saturation and Luminosity.

(Like the TINT effect that exists on C2)
Howdy, I'm HenryPK! I love helping people and making games... Hope we can be friends. (Actually developing Blue in Bitwin Entertainment: https://gamejolt.com/games/blue/321184)
B
11
S
3
G
1
Posts: 68
Reputation: 1,374

### » Sat Aug 26, 2017 9:30 am

Here you go,
https://www.dropbox.com/s/aln1k3lsv0p92 ... .capx?dl=0

Finally understand those numbers in the HSL effect.
B
33
S
18
G
29
Posts: 2,493
Reputation: 21,450

### » Sat Aug 26, 2017 10:58 am

99Instances2Go wrote:Here you go,
https://www.dropbox.com/s/aln1k3lsv0p92 ... .capx?dl=0

Finally understand those numbers in the HSL effect.

Yes! Now works perfect, but I can't see what changes you made in the new Capx, just the Luminosity of the Sprite to 0
B
41
S
11
G
2
Posts: 73
Reputation: 3,012

### » Sat Aug 26, 2017 3:37 pm

You got all that math to translate RGB to HSL. Should be understandable with the links that HenryPK gave.

The Hue that the effect takes as value is in the range 0-100.
The calculated (and standard) H is in the range is in the range 0-360
Normalised this means ...
Value to bring into the effect for Hue = (H / 360) * 100

The Saturation that the effect takes as value in in the range 0-100
That is also the range for the calculate S, so no prob here.
Value to bring into the effect for Saturation = S

The Luminosity that the effect takes is in the range 0-200.
Calculated L is the range 0-100.
But the plugin wants to 'adjust'. So, if there is already a value 50 present, it needs to be able to adjust (relative) that to zero.
This means that the plugins value effectively has a range 0-100, but (absolute) is using an offset of 50.
Or.
Luminosity value to bring in the effect = L + 50

All that makes the values that you feed to the plugin absolute, although its working is relative. But only if you start with a sprite that is pure red. Pure red = zero degrees in the colour wheel, has 100% saturation, and a luminosity of 50.
B
33
S
18
G
29
Posts: 2,493
Reputation: 21,450

### » Sat Aug 26, 2017 3:56 pm

I see, thanks so much to both! This was awesome
B
41
S
11
G
2
Posts: 73
Reputation: 3,012