Jump to content
Search Community

Color Utils

ElliotGeno test
Moderator Tag

Go to solution Solved by GreenSock,

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 see you  automatically switch strings to RGBa... Is there some sort of Color Utils we can tap into so we don't have to roll our own.

 

For instance, converting hex to RGB component colors. RGB components to HSL, HSL to RGB, RGB to hex is something I typically do to rotate the hue of a color. But rather than including additional code to handle that, I was curious if they were already built in and exposed for us to use.

Link to comment
Share on other sites

Hi ElliotGeno :)

 

I cant understand that what you mean about converting color components to rotate the hue !!! 

 

but maybe this link be useful , pls check this out :

 

http://rapidtables.com/convert/color/index.htm

 

and you can do something like this to rotate the hue :

var color = {h:0, s:50, l:50};
TweenMax.to(color, 20, {h:360 , onUpdate:changeColor});
function changeColor() {
element.style.backgroundColor = "hsl(" + color.h + "," + color.s + "%," + color.l + "%)";
}

Link to comment
Share on other sites

Would it just be parsing the strings? How are you storing that data currently? Seems like you convert everything to RGBa at least when it's done. But I was wondering if the associated RGB components are stored in a separate object to tween.

 

 

Basically the most common color functionalities I use is the following:

Breaking hex color string into component Red Green and Blue values represented 0-255. (Starting in either form: #FF0000 or 0xFF0000);

Recombining component colors via bitwise shifts to get decimal value of RGB colors.

Parsing decimal value of RGB to hex string. (Probably not necessary since this is easy with toString(16); )

Converting RGBa and opacity component colors to HSLa components. (0-360, 0-100, 0-100, 0-1)

toString() method for converting HSL a string I can apply.

 

Obviously these are all things I can do, but would rather not duplicate efforts if a library is already doing it.

Link to comment
Share on other sites

@Diaco.AW

 

These are the kinds of color conversions I am talking about...

 

Strings vs Decimal values

"#FF0000" (Pure red) can also be written as 0xFF0000. Logging the value of 0xFF0000 reveals its decimal value.

console.log(0xFF0000);// logs 16711680

Extracting component RGB values

Using bitwise math, you can break a decimal value into three component colors.

function getComponentColors(color){
   var red = (color >> 16) & 0xFF;
   var green = (color >> 8) & 0xFF;
   var blue = color % 0xFF;
return [red, green, blue];
}
getComponentColors(0xFF0000); //returns [255,0,0];

Converting RGB component values to HSL component values

function RGBtoHSL(r, g, {
    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
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
           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 [h, s, l];
}
RGBtoHSL(255,0,0);// returns [0,1,.5]; (saturation and lightness need to be multiplied by 100 for HSL() strings.

Converting HSL components to RGB component colors

HSL is nice for rotating colors around or adjusting saturation or brightness of colors... But sometimes you need to go back to RGB.

function HSLtoRGB(h, s, l){     var r, g, b;
     if(s == 0){
          r = g = b = l; // achromatic
     }else{
          function hue2rgb(p, q, t){
               if(t < 0) t += 1;
               if(t > 1) t -= 1;
               if(t < 1/6) return p + (q - p) * 6 * t;
               if(t < 1/2) return q;
               if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                    return p;
               }
               var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
               var p = 2 * l - q;
               r = hue2rgb(p, q, h + 1/3);
               g = hue2rgb(p, q, h);
               b = hue2rgb(p, q, h - 1/3);
            }
      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
HSLtoRGB(0,1,.5); //returns [255,0,0]

Combining RGB component colors to get decimal

Individual RGB component values can be tweened as well, but you can convert them back to decimal values as well:

function combineRGB(r, g,  {
     return ( r << 16 ) | ( g << 8 ) | b ;
}
combineRGB(255,0,0); //returns 16711680

Getting Hex string from RGB decimal value

Finally, if you want to convert the decimal RGB value to a string...

var color=16711680;
var hexString=color.toString(16); // returns string "FF0000"
  • Like 1
Link to comment
Share on other sites

  • Solution

The parseColor() function in CSSPlugin accepts just about anything and returns an array with the red, blue, green, and alpha parts, like [255, 102, 51, 0.5]

 

Is that helpful? I'm not 100% sure it's wise to expose it because it kinda locks us into that behavior and expands the API surface area. 

  • Like 2
Link to comment
Share on other sites

If you don't think it is smart to expose it, that is fine. Especially if all it is doing is normalizing the developer's input.

 

I am constantly handling color myself... so maybe I am just an edge case. Javascript is pretty forgiving in how you can use color. Maybe I will just wrap my most common color utils into it's own class and call it a day.

 

I was just curious if you were doing some of the same conversions already.

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