Hsi Color Space Website Links For
Color 		 

Information About

Hsi Color Space
  CATEGORIES ABOUT HSL COLOR SPACE
   
color space
   
APPAREL
BABY
BEAUTY
BOOKS
CAR TOYS
CELL PHONES
DVD'S
ELECTRONICS
GOURMET FOOD
GROCERIES
HEALTH & PERSONAL
HOME & GARDEN
JEWELRY
MUSIC
MUSIC INSTRUMENTS
OFFICE PRODUCTS
SOFTWARE
SPORTING GOODS
TOOLS & HARDWARE
TOYS
VIDEO GAMES
SHOPPING HOME
MORE SHOPPING...



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 is drawn as a double cone or double hexcone. 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 corresponds to hue, distance from the axis corresponds to saturation, and distance along the black-white axis corresponds to lightness.


CONVERTING FROM RGB


The (''R'', ''G'', ''B'') values must be expressed as numbers from 0 to 1. Let ''MAX'' equal the maximum of the (''R'', ''G'', ''B'') values, and ''MIN'' equal the minimum of those values. The formula can then be written as


H =
\begin{cases}
\mbox{undefined} & \mbox{if } MAX = MIN \
60 imes rac{G - B}{MAX - MIN} + 0, & \mbox{if } MAX = R \ &\mbox{and } G \geq B \
60 imes rac{G - B}{MAX - MIN} + 360, & \mbox{if } MAX = R \ &\mbox{and } G < B \
60 imes rac{B - R}{MAX - MIN} + 120, & \mbox{if } MAX = G \
60 imes rac{R - G}{MAX - MIN} + 240, & \mbox{if } MAX = B
\end{cases}



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


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

H=0 is often used 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 = rac {MAX - MIN} {MAX}= 1- rac {MIN} {MAX}

V = MAX \,


COMPARISON OF HSL AND HSV


HSL is similar to HSV but better reflects the intuitive notion of "saturation" and "lightness" as two independent parameters, and is therefore more suitable for use by artists. The CSS 3 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)

  • --- The GIMP

  • --- Xara X





EXAMPLES


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


SEE ALSO



EXTERNAL LINKS