Colors in Flash are represented by the familiar Red, Green and Blue (RGB). However, when trying to manipulate a single color to create a theme from a base color, RGB can be very awkward. Sometimes an easier way (and the alternative way in the Flash IDE) is to represent colors in terms of Hue, Luminance and Saturation (HLS).

Using HLS to represent a color, you can simply increase or decrease luminance to make the color lighter or darker. You can adjust saturation to increase or decrease how vibrant the color is. And you can adjust hue to represent where on the color wheel you want the color to appear.

Luminance and Saturation are both expressed in terms of a percentage between 0 and 100. The more luminescent a color is, the closer to white it becomes. The less saturation a color has, the closer to gray it becomes. Hue is usually expressed in terms of 360 degrees (just like the color wheel). In HLS, if you want the exact opposite of a color, all you need to do is adjust its Hue by 180 degrees. Complementary colors can always be found a plus and minus 120 degrees from the color you are working with.

Below is a sample application that I built to illustrate the relationship between RGB and HLS.



Unfortunately, Flash's color object doesn't support HLS and doing the conversion from HLS to RGB and back can be a little challenging. However, there are a number of class libraries written in a variety of languages freely available on the Internet. Steve McMahon wrote a great HLS to RGB class in C#. Based on his work, I created the same class in ActionScript 2.0. You can download the class and the FLA for the application above here.

To use it, all you need to do is import and create an instance of the class:

import SatoriInteractive.HLSRGB;
var myHLS: HLSRGB = new HLSRGB;

The HLSRGB class has seven properties (red, green, blue, hue, luminance, saturation and color) and two methods (lightenBy and darkenBy). You can give it a starting color by assigning a color object to its color property or you can just directly assign values to the properties.

Red, green and blue can be set to any value between 0 and 255, just as we use RGB throughout Flash. Changing any of these three properties will appropriately change the hue, saturation and luminance properties as needed. Hue can be set to any value between 0 and 360 representing a progression from magenta - red - yellow - green - cyan - blue - magenta. Finally, saturation and luminance can be set to any decimal value between 0 and 1 representing the percentage of saturation and luminance desired.

Working with colors in terms of hue, saturation and luminance can make it much simpler to create robust themes and skins that are all based off a single color. It makes it much more intuitive to adjust colors when you break from the RGB model.

Also in the source files for HLSRGB, you'll find a class and matching FLA called SatoriColor. This is an extension (or more accurately, a decoration) of the Flash Color object adding HLS functionality. I'm currently writing documentation for it, which I'll post on ActionScriptReference.com over the weekend. I'll then write an article explaining its use at ActionScript.com over the weekend or early next week.