Expression to control gradient colour -- offset luminance of a single color?

[Derjis]

I'm trying to figure out how to best explain this; hopefully, I'll be able to describe what I'm looking to do without getting too confusing.
I've been beating my head against the wall with this off and on for years, now. Every once in awhile, I go down a rabbit hole online and start searching for answers, but haven't had any luck. Here's what I'm looking to do:

I'm essentially looking to make easily customizable gradient ramps, so I (or other users, if I'm creating a template or MOGRT) can change a single colour value, and adjust a series of gradient ramps throughout the comp. So, let's say I've got a BG layer with a gradient ramp on it. To keep it simple, the start colour is FF0000, and the end colour is 660000 -- pure red, ramping to a darker version of that red. I know I can easily pickwhip both the start and the end colour values to separate Color Controllers on a "Master Color" layer (let's call the controls "Primary" and "Secondary"); from there, if I pickwhip the colour values of various other elements throughout the project to the "Master Color" layer, and easily change the colours throughout the project. If the branding changes from red to green, I just have to modify the "Master Color" > "Primary" and "Secondary" controls to be green, and a darker shade of green, and boom, all of a sudden the BG, text elements, highlights, etc. all change to green instead of red.
The tricky part is that I'd like to automate and simplify this, so I can add a bunch of different colour variations throughout the project, and have them all update by changing a single colour value. So, for example, within my project, I have pure red set as the starting point on "Master Color" > "Primary". In the project, I have a few elements that use a moderately darker shade of that "Primary" red, a few that use a moderately lighter shade of that "Primary" red color, and a few elements that use significantly darker and lighter shades of the "Primary" color. Maybe I have a few contrasting highlight elements that use the same general shade as the "Primary" red, but shift the hue into the yellow or purple range. That winds up being a lot of colour controls, if they all have to be broken out individually, and, frankly, relying on clients or template end-users to pick a nice selection of colours is maybe a bit of a stretch.

SO, what I'm hoping is that there's a way to create expressions that all reference a single colour controller, and either add or subtract values from the individual HSL values. Hypothetically, I'd add an expression to the Start Color of my gradient ramp that takes the unadjusted values from "Master Color" > "Primary"; the End Color value would have an expression that is, like, H + 0, S + 0, L - 30  (automatically creating a darker shade of the "Master Color" > "Primary" colour value); my contrasting elements would have a Fill effect with an expression linked to "Master Color" > "Primary", with, like, H + 50, S + 0, L + 0 (automatically creating a colour with a different hue of "Master Color" > "Primary" colour value); my highlight elements would have a Fill effect with an expression linked to "Master Color" > "Primary", with, say, H + 0, S - 40, L + 0 (automatically creating a colour with a lighter shade of "Master Color" > "Primary" colour value). Users just have to modify a single colour, and the entire colour scheme is updated across the project.

I think I might almost have the answer using this expression, which seems to break out HSL into individual values, where I can modify the "+ 0" values to create what I'm looking for, but I can't quite figure out how to set the initial value by grabbing the colour values from a separate "Master Color" control layer somewhere else in the project. Also, if someone could explain what the different breakouts in the array modify, that would be awesome. I think hsl[0] modifies the Hue, hsl[1] the Saturation, and hsl[2] the Lightness (?), but I don't really get what hsl[3] does?

hsl = rgbToHsl(value);
assemble = [hsl[0] + 0, hsl[1] + 0, hsl[2] + 0, hsl[3]];
hslToRgb(assemble)

Hopefully that's not too confusing and in-the-weeds. If anything doesn't make sense, please let me know!
Thanks in advance, all of you expressions masters out there!

[Mathias Moehl]

In my (paid) extension iExpressions I have a Color Link iExpression where you can link to a color with brightness and saturation controls:

You need iExpressions to create the links, but your project will also work on systems, where iExpressions is not installed. So when you create a mogrt, for example, you don't have to worry if your mogrt users have iExpressions or not.

[Mylenium]

The fourth array entry in colors is the Alpha, which most of the time is simply ignored. The rest probably doesn't make a lot of sense. AE's internal color handling is based on float values, not 8bit integers as used by color pickers, so that would have to be fixed first. Outside that, simple offsets rarely go anywhere when applied to multiple colors. You may need to figure in multipliers/ coefficients somehwere and account for Gamma and other perceptive rendering stuff. Point in case: Just reducing its luminance does not make a color darker, it merely makes it more black and you may need to compensate saturation and hue. With the HSL color model you would also have to have safeguard in place to prevent colors from "looping back" when values are exceeded. So for what it's worth, what you are trying to do may necessitate a lot more complex math and code to actually look good. It may simply be safer to implement something based on pre-defined palettes via Adobe Color or pre-defining custom color arrays in the code that then can be picked from a dropdown or similar.

Mylenium

[Dan Ebberts · Accepted solution]

I think you're on the right track. The four elements of the hsl array are hue, saturation, lightness, and alpha (you can ignore the alpha--it just needs to be there). The values are all normalized to floating point numbers between 0 and 1, so you'd probably start by breaking them out like this:

c = effect("Primary")("Color");
hsl = rgbToHsl(c);
h = hsl[0];
s = hsl[1];
l = hsl[2];
a = hsl[3];

Then you can manipulate each of the channels indiviually, and then reassemble the array like this:

hslToRgb([h,s,l,a])

With the hue value, you need to make sure and keep it between 0 and 1 so that it wraps around properly. For example, you might do something like this:

h -= .25;
if (h < 0) h += 1;

Hopefully that helps.

[Derjis]

Perfect, this is exactly what I was looking for!

[Derjis]

Thanks, guys! I've been slammed trying to get a series out the door, so I haven't had time to test out any of these solutions; going to try to play around with them later this week. I appreciate the help!

@Mathias Moehl @Mylenium @Dan Ebberts 

[ananthaKrishna1]

Hello all, Can we flip the gradient colour by expression control.