Theory
HSL states Hue-Saturation-Lightness, which is also called HSV, Hue-Saturation-Value model, or HSB, Hue-Saturation-Brightness, and HSB is used in PhotoShoop.
HSL model is originally a hexagonal cone as follows:
The vertical axis is the Value (Lightness) in the range 0..1
The angle is the Hue in the range 0..360
The relative radius is the Saturation in the range 0..1
In HSL color space, Hue is measured by an angle with Red starting at 0 degrees, Green at 120 degrees and Blue at 240 degrees. Complementary colors are in-between: Yellow is at 60 degrees, Cyan is at 180 degrees, and Magenta is at 300 degrees. The black line in the diagram at the lower left on the screen shows the hue angle.
Saturation, S, is a ratio that ranges from 0.0 along the center line of the cone (the V axis) to 1 on the edge of the cone. The gray circle above in the diagram at the lower left of the screen shows the position of the saturation value. The colors along this saturation circle are shown in the color box above the hue trackbar. The colors along the saturation radius are shown in the color box above the saturation trackbar.
Value (Lightness), V (L), ranges from 0.0 (dark) to 1.0 (bright).
An example of corresponding HSL to RGB (red-green-blue) Color is as the following table:
| Color |
R |
G |
B |
|
H |
L |
S |
| Black |
0 |
0 |
0 |
|
NaN |
0 |
0 |
| White |
255 |
255 |
255 |
|
NaN |
1 |
0 |
| Gray |
g |
g |
g |
|
NaN |
0..1 |
0 |
| Red |
255 |
0 |
0 |
|
0 |
0.5 |
1 |
| Yellow |
255 |
255 |
0 |
|
60 |
0.5 |
1 |
Algorithm
The algorithm of HSL color adjustment is not a secrete, you can find the implementation in any lanaguage everywhere online. PhotoController follows the same algorithm, a good resource is from wikipedia. The page also elaborate the theory in details.
Sample Figures
In PhotoController, a filter class HSLAdjustFilter is offered to perform the HSL color adjustment. But the parameter range is a little different. HSLAdjustFilter accepts the HSL difference as the parameter to perform the adjustment. So the actual accepted parameters are:
HSLAdjustFilter.Hue ranges from -180 to 180
HSLAdjustFilter.Saturation ranges from -1.0 to 1.0
HSLAdjustFilter.Lightness ranges from -1.0 to 1.0
The following figures demonstrate the results after HSL adjustment:
Hue = 180
Hue = -60
Saturation = -0.2
Hue = 60
Saturation = 0.1
Sample Code
It's fairly easy to use the HSL filter, just simply assign the values to three property, then call the filter method as follows:
1: IC.PhotoController.Controller pc = new Controller("image.jpg");
2: HSLAdjustFilter filter = new HSLAdjustFilter();
3: filter.Hue = 50;
4: filter.Saturation = 0.0f;
5: filter.Lightness = 0.0f;
6:
7: pic.Image = pc.Filter(filter);
8: pc.Dispose();
[Back to Top]