Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Forums Adobe After Effects Expressions Altering hex color codes with an expression

  • Altering hex color codes with an expression

  • Nicholas Deines

    May 19, 2020 at 4:42 pm

    Hi, I’m building a pie chart template in which each piece has a radial gradient ramp on the top and a solid fill color on the side. Can I make it that so that one color picker in the essential graphics panel controls all three values, yielding slightly different results for each? I would like one color for the side, one for the start color of the gradient ramp, and one for the end color of the gradient ramp.

    An example would be: the user choses a shade of red for pie slice one in the essential graphics panel which results in the side color being a dark red, the start of the ramp being almost pink (light red), and the end of the ramp being a medium red).

  • Scott McGee

    May 20, 2020 at 8:05 am

    I don’t know how to affect hex colour, but you can do it using RGB

    https://forums.creativecow.net/docs/forums/post.php?forumid=227&postid=30524&univpostid=30524&pview=t

    essentially if you put this into you color fill

    c = effect(“Color Control”)(“Color”)
    f = .25; // lightness factor
    hsl = rgbToHsl(c);
    hslToRgb([hsl[0],hsl[1],hsl[2]*f,hsl[3]])

    and c = your main color and then change the f value, to change the lightness. So when you change the color fill of your main value. It’s lighten or darken the values of all the others.

  • Nicholas Deines

    May 20, 2020 at 6:00 pm

    Thanks much for the reply, Scott. Do you know if it’s possible to control other like brightness, saturation, and hue?

  • Scott McGee

    May 21, 2020 at 7:27 am

    So your bottom lines is simply using the array from HSL and converting into RGB. So your first array is hue, second saturation and 3rd lightness.

    Hope this helps. Just remember if you are going to use a slider to control these, to divide them by the maximum value these elements that they can go up to and you’ll be able to adjust these using sliders.

    c = effect(“Color Control”)(“Color”)

    lite = .25; // lightness factor
    sat = 1; // Saturation factor
    hue = .25; // hue factor

    hsl = rgbToHsl(c);
    hslToRgb([hsl[0]*hue,hsl[1]*sat,hsl[2]*lite,hsl[3]])

  • Nicholas Deines

    May 21, 2020 at 3:04 pm

    Thanks again for your help, Scott! I think I’ve got it doing what I want. But I want to make sure I understand what I’m doing.

    In the code below, “f” is just a variable that you are defining, right? So I could change that to “l” for “lightness” as long as I multiple hsl[2] by “l”, right?

    Also, when you type ” // lightness factor” is that just a label for yourself to keep things straight?

    c = thisComp.layer(“Color”).effect(“Fill”)(“Color”)
    f = .25; // lightness factor
    hsl = rgbToHsl(c);
    hslToRgb([hsl[0],hsl[1],hsl[2]*f,hsl[3]])

  • Scott McGee

    May 22, 2020 at 7:52 am

    Hey Nicholas,

    So “f” is just a var, so you can change it to whatever you want. So like the last expression I sent, you can see I changed the variables.

    c = effect(“Color Control”)(“Color”)

    lite = .25; // lightness factor
    sat = 1; // Saturation factor
    hue = .25; // hue factor

    hsl = rgbToHsl(c);
    hslToRgb([hsl[0]*hue,hsl[1]*sat,hsl[2]*lite,hsl[3]])

    as for the //comment. You can write comments and notes a few different ways. However I’m guilty of not always noting my coding, but it does help if you have hundreds of lines of code and you want to notaries it.

    //Lightness factor
    lite = .25;

    lite = .25; // lightness factor

    /*
    This allows you to do multiple line notes.

    Should you need to add more detail and don’t want long lines
    */

  • Nicholas Deines

    June 2, 2020 at 6:02 pm

    Sorry for the delay. Got real busy with work. Thanks for the reply, Scott! Very illuminating.

Viewing 1 - 7 of 7 posts

Log in to reply.

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy