How do I convert RGB to HSB/HSL

0 favourites
  • 9 posts
From the Asset Store
HSV RGB Color Picker and Converter for Construct 3
  • Hi, I'm using the plugin color picker from textbox

    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?


  • 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


    var d = max - min;

    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);


    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:

  • I would add to what HenryPK says. ... .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.

  • 99Instances2Go HenryPK First, Thanks so much for your replies.

    I knew the others effect, they work well, but as I see on this tutorial: 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.

  • 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)

  • Here you go, ... .capx?dl=0

    Finally understand those numbers in the HSL effect.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Here you go, ... .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

  • 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.


    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.

  • I see, thanks so much to both! This was awesome

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)