How to control RGB color by Hue ( ...and saturation and brightness... )

Question

Level 6

13,015 points

How to control RGB color by Hue ( ...and saturation and brightness... )

If you search the internet for this topic, you will be regaled by site after site that goes on about Hue Saturation Value/Brightness (or Lightness variant) are **different** color models, and IF you want to create a "relationship" between the two, you must resort to "all kinds of math".

Let me explain how the RGB color model works.

There are three elements: Red, Green, and Blue. These three values represent "pure hues" that are **added** together to arrive at the color you perceive.

In Motion, their values range from 0 (no "infusion") to 1.0 (fully added).

[By the way... only TWO of the elements contribute to hue at any given time, the "other element", whatever that may be, contributes to the overall saturation of the color... but that's not part of this "section" and I'll get to it eventually.]

In RGB, Pure Hues are created when 1 or 2 of the elements are at 1.0 and at least 1 or 2 of the elements are at 0. If one element is at 1.0 and the other two are at 0.0, then the color is a *primary* color (Red, Green or Blue). If two elements are at 1.0 and the other one is at 0, then the color is a *secondary* color (Yellow, Cyan or Magenta). [Kinda cool how that works out... ]

So — if you start with Red (1.0, 0.0, 0.0) and you MOVE Green from 0.0 to 1.0, the Pure Hues are every hue between Red and Yellow. The next step can ONLY be to move the Red value from 1.0 to 0.0 to progress to pure green. The next step can only be to move the Blue value from 0.0 to 1.0 to progress to Cyan.

And so forth.

(Saturation and Brightness will be covered later.)

This process can be easily accomplished (without math!) with a Rig Slider.

Start with any Color parameter you need to build the slider for (I actually recommend using a null object shape and either its Fill or Outline color.) Set the Color to Red (1.0, 0.0, 0.0). Right click and Add to Rig > the slider you set up.

Rig Slider settings default to 0 value to the left to 100 on the right. For a Hue parameter, the Range Maximum needs to be set to 360 (degrees of the color "circle" - see screenshot below) and five extra Snapshots need to be added by double clicking under the slider line, then double clicking the "tag" and setting its degree value. Shown is the first added tag at 60 degrees (type Return/Enter to have the value accepted.) Subsequent tags need to be set for 120, 180, 240, and 300 degrees (every 60º around the circle).

Click the tag at 60 to edit its snapshot and move the Green slider up to 1.0. Click the tag at 120 to edit its snapshot and move the Red slider to 0.0. Click the 180 tag and move the Blue slider to 1.0. Click the 240 tag and move the Green slider to 0. Click the 300 tag and move the Red slider to 1.0. Click the 360 tag and move the Blue slider to 0.

You now have a single slider controller for EVERY possible PURE HUE by degrees.

[Color RGB sliders under control of Rig Slider from 0 to 360 (GIF repeats). Bottom "swatch" with numbers represents the Hue by degree.]

Coming up: how to add Saturation and Brightness (a.k.a. "Value") controls that DO NOT rely on the Hue/Saturation, Saturation Curves, or Brightness Filters.

Plus... how to use an On Screen Control (like Twirl) to choose Hue values.

As a side note:

Motion uses RGB for its color parameters, but the Mac uses all kinds of "Color Spaces", e.g., Rec. 709, Rec. 2020, sRGB, Display P3, etc. etc. etc... Clicking and dragging on the numeric values in Motion will take the base RGB beyond into more expanded color spaces. I'm not going there... that's for you to figure out on your own.

—————

FWIW

Posted on Jun 7, 2025 3:20 PM

Reply

Answer 1

fox_m Author

Level 6

13,015 points

Jun 7, 2025 11:27 PM in response to fox_m

Part 2: Saturation ... and Brightness

This is a little harder to explain. RGB elements become more of an "accordian" within the 0-1 range than absolute/pure hues.

To review: all Pure Hues are 100% saturated and 100% "bright".

The RGB Color "White" (not really a color) is all 3 elements are 1.0.

The RGB Color "Black" (ditto) is all 3 elements are 0.0.

Shades of Gray are all 3 elements equal to each other (R = G = B).

Only two (highest) elements contribute to the Hue. When the "saturation contributor" is increased above the lower hue determinant, IT becomes the secondary hue determinant and the former element becomes the saturation contributor.

Using the illustration below, if the Green element passes the Blue element, the Hue changes from violet to orange. If the Green element continues past the Red element, the Hue becomes Yellow Green... albeit, very desaturated. [Top down order of elements determines color/hue.]

The following represents a violet hue that has been desaturated and the brightness is lowered by 25%.

Desaturation involves moving ALL RGB elements towards 1.0 for each eventually creating white (or gray depending on Brightness).

Alternately, Brightness (a.k.a. Value) involves moving ALL RGB elements towards 0.0 for each.

Elements can become squeezed as the Saturation and Brightness settings near their limits — it's as if they maintain their "proportional" separation until reduced to grayscale/black/white.

The "math" involves trying to determine which elements are at minimum and which are at maximum value then figuring out, essentially, the percentage (or factor) of the span of the extremes. Fortunately, we don't need no stinkin' math for Motion.

This section is separate from the Pure Hue discussion because it really doesn't matter if you build the Hue controller or not. The following will build Saturation - Brightness controls for any color setup.

Preliminary:

Choose your primary color source (whatever object you created for the Hue color or any object's RGB color.) I'll refer to is as "Main".

Method 1:

Two accessory null objects/shapes are required. One with a Color parameter set to White (RGB: 1,1,1) and the other with a Color parameter set to Black (RGB: 0,0,0).

All that needs to done is to Link the White Color to the Main color. Then add another Link and apply the Black Color. The Custom Mix parameter for the White Color will control the Saturation and the Custom Mix parameter for the Black Color is the Brightness parameter.

These parameters will actually behave "backwards", that is, if the Custom MIx for the White color is 1 (and the Black color Custom Mix is 0), then the actual saturation is 0 (the color is white).

For both of these Custom Mixes, add them to their own Rig Slider and set the 0 value to Custom Mix 1 and the 100 value to Custom Mix 0.

No math...

Method 2:

Instead of two null objects (White and Black), simply add a Filters > Color > Colorize filter. Set the Mix parameter to 0%. Set the Remap White Color to actual White, fix the Remap Black Color so that it is actually RGB Black (it's 0.09, 0, 0 by default). You'll still need to use Rig Sliders to get them set up in the right direction.

———————————————

It's late and I might not have done that good a job explaining all this. Any questions?

Tomorrow... or just later... I'll recommend an OSC that can be easily adapted to control the Hue slider.

Reply