ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

Altering hex color codes with an expression

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Nicholas Deines
Altering hex color codes with an expression
on May 19, 2020 at 4:42: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).


Return to posts index

Scott McGee
Re: Altering hex color codes with an expression
on May 20, 2020 at 8:05:31 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=3052...

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.


Return to posts index

Nicholas Deines
Re: Altering hex color codes with an expression
on May 20, 2020 at 6:00:38 pm

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


Return to posts index


Scott McGee
Re: Altering hex color codes with an expression
on May 21, 2020 at 7:27:26 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]])


Return to posts index

Nicholas Deines
Re: Altering hex color codes with an expression
on May 21, 2020 at 3:04:47 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]])


Return to posts index

Scott McGee
Re: Altering hex color codes with an expression
on May 22, 2020 at 7:52:49 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
*/


Return to posts index


Nicholas Deines
Re: Altering hex color codes with an expression
on Jun 2, 2020 at 6:02:51 pm

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


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2020 CreativeCOW.net All Rights Reserved
[TOP]