• Adobe After Effects Expressions

  Altering hex color codes with an expression

  Posted by Nicholas Deines on 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).

  Nicholas Deines replied 5 years, 11 months ago 2 Members · 6 Replies
• 6 Replies

• 

  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.

Reply to this Discussion! Login or Sign Up