Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Activity Forums Adobe After Effects Expressions rgb hsl – adjusting saturation via expression

  • rgb hsl – adjusting saturation via expression

    Posted by Jurgen Koch on September 19, 2016 at 5:16 pm

    I’ll try to be clear & concise.
    I have a project with six colors. Each of the six colors has five saturation values.
    There are many, many comps to build with different animation.
    Each comp is based on one of the primary six colors and it’s four lighter shades.
    The shades are all based on saturation percentages of the main color.

    I have set up a rough system (pasted in below) to change the saturation values, but the math is wrong someplace, and I’m unsure why.

    I am trying to figure out what maths is needed to accurately represent 50% saturation, 33% saturation, etc. I’ve tried a division of 256, for obvious reasons, as well as 100, 512, and 128. Dividing by 128 seems to get closest to my goal, but with an odd slider value.

    I undersyand adjusting the hue would use a division of 360 due to how hue works, but I’m trying to understand saturation in this use.

    thanks

    10591_colorshifter000.aep.zip

    rgb = thisComp.layer("MainColor").content("Group 1").content("Fill 1").color;
    hsl = rgbToHsl(rgb);
    lite = effect("liteSlider")("Slider")/128;
    lite = hsl + [0, 0, lite]
    hslToRgb(lite);

    Xavier Gomez replied 9 years, 8 months ago 2 Members · 1 Reply
  • 1 Reply
  • Xavier Gomez

    September 19, 2016 at 6:08 pm

    You can normalize your slider the way you want. It only changes the slider usable range.
    In the end, the 3 numbers, h, s and l that you input in hslToRgb([h,s,l]) should all be in the range [0,1].
    If not, AE will clamp to [0,1].
    0 <==> 0% saturation
    1<==> 100% saturation
    Similarly for Lightness, and Hue is mapped from [0,1] to [0,360].

    But it’s unclear whether you want to set or offset the color lightness (or saturation).

    To set the lighness:

    rgb = thisComp.layer(“MainColor”).content(“Group 1”).content(“Fill 1”).color;
    hsl = rgbToHsl(rgb);
    lite = effect(“liteSlider”)(“Slider”)/100;
    hsl[1] = lite;
    hslToRgb(hsl);

    Then set the slider value to 50, or 33 to have a lightness equal to 50% (or 33%);
    And to offset, by say 5%, you would replace hsl[1] = lite by hsl[1] += lite, and set the slider value to 5.

    Xavier

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