hue/saturation change

[Mitch Mann]

Seems like you’d be able to pull the color array out into individual R, G and B values, then have your other colors each be a certain offset on R, G and B from the original, and put it back together again.

[Darby Edelen]

There’s also the rgbToHsl() and hslToRgb() functions to help. Get the hue of the color chosen in the colour picker then apply it to the colours of the 4 color gradient.

You could also drive a HSL effect applied after the 4 color gradient with these functions (but that effect is not 32bpc compatible).

If you don’t mind splitting the operation into 2 layers and using the Fill effect (or maybe just using the Solid Composite effect) with the Hue blend mode that’d be an easy way to go as well.

Darby Edelen

[Sean Kimber]

Thank you for your help. I’ll give it a shot!

[Ayas Hassan]

Hi Darby,

Can you please write me the expression that can do this?

Basically i have two layers. Fill color used in the second layers has to be a bit darker than the fill used in the first layer. ie, I want to control only the saturation of the second layer’s colour.

Thanks in Advance

Ayas Hassan
Motion Designer // 3D Animator
http://www.aeyaz.com
Dubai – UAE

[Xavier Gomez]

Hi Ayas,

darkness is not controlled by saturation, but by the lightness (3rd parameter in HSL). Since arrays are indexed from 0, that’s entry 2:

lightness = 25; // pourcent

hsl = rgbToHsl(thisComp.layer("first").effect("Fill").color.value);
hsl[2] = lightness/100;
hslToRgb(hsl);
If you want to set a lightness offset that will auto update when you change the fill in the first layer:
lightnessOffset = -5; //

hsl = rgbToHsl(thisComp.layer("first").effect("Fill").color.value);
hsl[2] = Math.max(0.0, Math.min(hsl[2]+lightnessOffset/100, 1.0));
hslToRgb(hsl);
Xavier

[Ayas Hassan]

Perfect. Thanks You.

When i said darkness, what i actually meant was a bit saturated colour. I just need a slight variation int the first colour. May be i just used the wrong word 🙂

Ayas Hassan
Motion Designer // 3D Animator
http://www.aeyaz.com
Dubai – UAE

[Tim Hildebrandt]

Hi there,

(example)
Two solids. Left one has the original color. The right one should always have the same hue, but the saturation should be at 45% and the lightness at 70% of the Original value.

With this kind of expression it works fine for the lightness:

inRGB = //relating Color Path;
inHSL = rgbToHsl(inRGB);

newLight = inHSL[2] * 0.7;
newHSL = [inHSL[0], newSat, newLight, inHSL[3]];
hslToRgb(newHSL);

But if I try the same for the saturation, like here


inRGB = //relating Color Path;
inHSL = rgbToHsl(inRGB);
newSat = inHSL[1] *0.45;
newLight = inHSL[2] * 0.7;
newHSL = [inHSL[0], newSat, newLight, inHSL[3]];
hslToRgb(newHSL);


The hole color is changing. The lightness is not at its expected value, the hue changed a bit and the saturation is not working as well.

So. What’s the mistake here?

Thank you for help!

[Dan Ebberts]

Your expression works as expected for me. I’m not sure why it doesn’t work for you, unless maybe you’re using an unusual color space or something.

Dan

[Tim Hildebrandt]

I tested it again and I will write down the expected and the happened results:

Original color settings from the square I have (for testing):


H=120°
S=100%
B=100%


ecpected result


H=120°
S=45%
B=70%


The final result looks like this:


H=120°
S=62%
B=51%


Where is my mistake? Where did you apply the expression on?

Greets

Edit: Here’s a pic of how it looks

[Dan Ebberts]

I think it may be an HSL vs HSB thing. For your initial color, I get an HSL of [.3333333, 1, 0.5, 1] which results in [.33333333, 0.45, 0.35, 1] after the multiplications.

Dan