Jump to content
Search Community

Hex to HSL color conversion

ElliotGeno test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have an SVG that has a ton of paths in it with various colors.


I'd like to loop through all the paths and apply a brightness adjustment on the fill color.


If I could convert the Hex to HSL, then I could tween the brightness separately. Obviously I can write a function to handle this, but it poses the question, is there something already available via TweenMax to do this?


Side note, it would be really cool if there was something like this for colors:



Behind the scenes, Greensock would break the current color into HSL. Tween the lightness. then recombine it back.

Link to comment
Share on other sites

Hey Elliot,


The Color Props Plugin could Tween the luminosity of an HSL property of a JS object, but as you mention it returns RGB or RGBA values.

var myObj = {a'hsl(105,50%,80%)'};

TweenLite.to(myObj, 2, {colorProps{a:"hsl(105,50%,50%)"}});

You could add a setter/getter to the obj in order to get the values but I don't know if there's some sort of reference in GSAP or the ColorProps plugin to get the data in HSL format, like the _gsTransform object.


The CSS Plugin does in fact tweens HSL color in the same fashion:

TweenLite.to("#myElement", 1, {backgroundColor:'hsl(105,50%,50%)'});

But as you mentioned, GSAP uses RGB/RGBA colors, so you'll ultimately will have to parse the color and extract the luminosity value.


Hope that helps a bit,

Happy Tweening!!

  • Like 4
Link to comment
Share on other sites

Here's an interesting thread about interpolating colors. 




And here's the demo from that thread, which shows how to use getters/setters Rodrigo was talking about. Normally, I would wrap the element in a class like that, but I was trying to do a side-by-side comparison.


See the Pen xGVVaN by osublake (@osublake) on CodePen


If you need help working with colors, I would recommend checking out xcolor. It's a jQuery plugin, but I have never actually used it like that before. I just borrow snippets of the code from time to time. There's basically a color function for every possible scenario.







  • Like 4
Link to comment
Share on other sites

Looks like the CSS spec only supports transitioning via (RGB) red, green, and blue components, so it always converts the given color space to RGB:



  • color: interpolated via red, green, blue and alpha components (treating each as a number, see below). The interpolation is done between premultiplied colors (that is, colors for which the red, green, and blue components specified have been multiplied by the alpha).

From what i have seen in my own tests .. is that the browser like Rodrigo stated above will always end up with a RGB value. Even in the computed value. The only time i have seen the computed inherited remains as the HSL value is when i set the property through my style sheet and use a CSS transition, but still the final computed ends up as an RGB value, but the original inherited value of the color on the element through the style sheet is the HSL value. The end value in the browser is always RGB.



background-color rgb(97,​ 255,​ 0)
@element.style hsl(97,​ 100%,​ 50%)


In my own tests i have noticed that color transitions seem to be smoother (with easing) using RGB color space versus HSL color space. Even though HSL is easier to remember and code with. HSL color interpolates between lighter and darker color wavelengths inconsistently, before getting to the actual color destination. Whereas RGB seems more consistent and easier on my eyes, when interpolating between lighter and darker colors.


Interestingly enough there is a project that gives an alternative to using HSL to something that is more pleasing to our human eyes.


Using the CIELUV color space, HUSL:




But that is just my two cents, or one :)

  • Like 4
Link to comment
Share on other sites

Sorry, I guess I should have been more clear... I don't really need to tween the HSL color per say.  I actually am get the RGB color switching to HSL bumping up or down the brightness then tweening to that color I ended up rolling my own version of Hex to RGB to HSL and then adjust the lightness then tween to that color.


Here is what I ended up with:

var rgb=getRGB(element.getAttribute("fill"));
var hsl=getHSL(rgb);
var targetLightness=Math.max(Math.min(hsl.lightness+(i%2==0?amount:-amount),100),0);

function getRGB(hex) {
hex = typeof hex == 'string' || hex instanceof String ? parseInt(hex.replace(/^#/, ''), 16) : hex;
return {red:(hex >> 16) & 0xFF, green:(hex >> 8) & 0xFF, blue:hex & 0xFF};
function getHSL(rgb) {
    var r = rgb.red;
    var g = rgb.green;
    var b = rgb.blue;
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, , min = Math.min(r, g, ;
    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 -  / 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 {hue:h * 360, saturation:s * 100, lightness:l * 100};
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...