HSL color space

From Wikipedia, the free encyclopedia

The HSL color space, also called HLS or HSI, stands for Hue, Saturation, Lightness (also Luminance or Luminosity) / Intensity. While HSV (Hue, Saturation, Value) can be viewed graphically as a color cone or hexcone, HSL can be drawn as a double cone or double hexcone as well as a sphere. Both systems are non-linear deformations of the RGB colour cube.

The two apexes of the HSL double hexcone correspond to black and white. The angular parameter of the HSL double hexcone corresponds to hue, distance from the axis corresponds to saturation, and distance along the black-white axis corresponds to lightness.

HSL does not define colors exactly because, like RGB, it is not an absolute color space. Since the color of RGB depends on the exact shade of red, blue and green ("primaries") used, so HSL, which is a simple transformation of RGB, also depends on the primaries. Strictly speaking, it is not a color space but a color model. HSL can become an exact way to choose color when it is tied to a particular RGB color space, such as sRGB, perhaps specified with an RGB ICC profile. Another way to think about it is that each distinct RGB color space has its own HSL color space to accompany it.

1 Converting from RGB
2 Converting to RGB
3 Comparison of HSL and HSV
4 Terminology
5 Examples
6 References
7 External links

[edit] Converting from RGB

An image, along with its H, S and L components.

The (R, G, B) values must be expressed as numbers from 0 to 1. Let $M A X$ equal the greatest of the (R, G, B) values, and $M I N$ equal the least of those values. The formula can then be written as

$H = \begin{cases} \mbox{undefined} & \mbox{if } MAX = MIN \\ 60^\circ \times \frac{G - B}{MAX - MIN} + 0^\circ, & \mbox{if } MAX = R \\ &\mbox{and } G \ge B \\ 60^\circ \times \frac{G - B}{MAX - MIN} + 360^\circ, & \mbox{if } MAX = R \\ &\mbox{and } G < B \\ 60^\circ \times \frac{B - R}{MAX - MIN} + 120^\circ, & \mbox{if } MAX = G \\ 60^\circ \times \frac{R - G}{MAX - MIN} + 240^\circ, & \mbox{if } MAX = B \end{cases}$

$S = \begin{cases} 0 & \mbox{if } L = 0 \mbox{ or } MAX = MIN \\ \frac{MAX-MIN}{MAX+MIN} = \frac{MAX-MIN}{2L}, & \mbox{if } 0 < L \leq \frac{1}{2} \\ \frac{MAX-MIN}{2-(MAX+MIN)} = \frac{MAX-MIN}{2-2L}, & \mbox{if } L > \frac{1}{2} \end{cases}$

$L = \begin{matrix} \frac{1}{2} \end{matrix} (MAX + MIN)$

$H$ is generally normalised to lie between 0 and 360°, and $H = 0$ is often used when $M A X = M I N$ instead of leaving $H$ undefined. HSL and HSV have the same definition of hue, but the other components differ. The other two components of HSV are defined as follows:

$S = \frac {MAX - MIN} {MAX}= 1- \frac {MIN} {MAX}$

$V = MAX \,$

[edit] Converting to RGB

Given a color defined by (H, S, L) values, with H, ranging from 0.0 inclusive to 360.0 exclusive, indicating the angle, in degrees, around the color circle where the hue is located, and with S and L, varying between 0.0 and 1.0, representing the saturation and luminance value, respectively, a corresponding (R, G, B) color can be determined through a series of formulas. Note that the (R, G, B) values will be between 0.0 and 1.0.

First, if S is equal to 0.0, then the resulting color is achromatic, or grey. In this special case, R, G, and B are simply equal to L. As above, H is irrelevant in this situation.

When S is non-zero, the following procedure can be used^[1]

$Q= \begin{cases} L \times (1.0+S), & \mbox{if } L<0.5 \\ L+S-(L \times S), & \mbox{if } L \ge 0.5 \end{cases}$

$P = 2.0 \times L - Q \,$

$H_k = {H \over 360} \,$ (convert to the range [0,1])

$T_R = H_k+\frac{1}{3} \,$

$T_G = H_k \,$

$T_B = H_k-\frac{1}{3} \,$

$\mbox{if } T_c < 0 \rightarrow T_c = T_c + 1.0 \quad \mbox{for each}\,c=R,G,B \,$

$\mbox{if } T_c > 1 \rightarrow T_c = T_c - 1.0 \quad \mbox{for each}\,c=R,G,B \,$

For each color $c = R, G, B$ :

$\qquad \mathrm{color}_c= \begin{cases} P+ \left((Q-P) \times 6.0 \times T_c\right), & \mbox{if } T_c < \frac{1}{6} \\ Q, & \mbox{if } \frac{1}{6} \le T_c < \frac{1}{2} \\ P+\left((Q-P) \times (\frac{2}{3}-T_c) \times 6.0 \right), & \mbox{if } \frac{1}{2} \le T_c < \frac{2}{3} \\ P, & \mbox{otherwise } \end{cases}$

[edit] Comparison of HSL and HSV

HSL is similar to HSV. For some people, HSL better reflects the intuitive notion of "saturation" and "lightness" as two independent parameters, but for others its definition of saturation is wrong, as for example a very pastel, almost white color can be defined as fully saturated in HSL. It might be controversial, though, whether HSV or HSL is more suitable for use in human user interfaces.

The CSS3 specification from the W3C states, "Advantages of HSL are that it is symmetrical to lightness and darkness (which is not the case with HSV for example)..." This means that:

In HSL, the Saturation component always goes from fully saturated color to the equivalent gray (in HSV, with V at maximum, it goes from saturated color to white, which may be considered counterintuitive).
The Lightness in HSL always spans the entire range from black through the chosen hue to white (in HSV, the V component only goes half that way, from black to the chosen hue).

In software, a hue-based color model (HSV or HSL) is usually presented to the user in the form of a linear or circular hue chooser and a two-dimensional area (usually a square or a triangle) where you can choose saturation and value/lightness for the selected hue. With this representation, the difference between HSV or HSL is irrelevant. However, many programs also let you select a color via linear sliders or numeric entry fields, and for those controls, usually either HSL or HSV (not both) are used. HSV is traditionally more common. Here are some examples:

Applications that use HSV (HSB):
- Apple Mac OS X system color picker (has a color disk for H/S and a slider for V)
- Xara Xtreme
- Paint.NET (has a color disk for H/S and a slider for V)
- Adobe graphic applications (Illustrator, Photoshop, and others)

Applications that use HSL:
- The CSS3 specification
- Inkscape (starting from version 0.42)
- Macromedia Studio
- Microsoft Windows system color picker (including Microsoft Paint)
- Paint Shop Pro
- ImageMagick

Applications that use both HSV and HSL:
- Pixel image editor (starting from Beta5)
- Pixia
- Bryce
- The GIMP (HSV for color selection, HSL for image color adjustment)

[edit] Terminology

The terms attributed to the "L" component of HSL color space may be misleading since they have little to do with color science definitions of the terms.

Lightness refers to the perceived reflectance of a surface[1].
Luminance typically refers to relative luminance, which is based on the photometric definition of luminance but normalized with respect to a reference white.
Luminosity typically (and incorrectly) refers to luminance.

[edit] Examples

The RGB values are shown in the range 0.0 to 1.0.

RGB	HSL	HSV	Result
(1, 0, 0)	(0°, 1, 0.5)	(0°, 1, 1)
(0.5, 1, 0.5)	(120°, 1, 0.75)	(120°, 0.5, 1)
(0, 0, 0.5)	(240°, 1, 0.25)	(240°, 1, 0.5)

[edit] References

^ Foley, James D.; Andries van Dam (1982). Fundamentals of Interactive Computer Graphics. Boston, MA, USA: Addison-Wesley. ISBN 0-201-14468-9.

[edit] External links

An explanation of HSL and how it differs from RGB can be found in the W3C's CSS3 Color Module.
Formulas for converting to and from RGB can be found on EasyRGB.com.

Color space ■ Color models
RGB color spaces ■ RGB color model ■ CMYK color model ■ HSV color space ■ HSL color space ■ RYB color model ■ CIELAB (Lab*) ■ YUV for PAL television ■ YDbDr for SECAM television ■ YIQ for NTSC television