HSL And HSV | Psychology Wiki | Fandom

Assessment | Biopsychology | Comparative | Cognitive | Developmental | Language | Individual differences | Personality | Philosophy | Social | Methods | Statistics | Clinical | Educational | Industrial | Professional items | World psychology |

Cognitive Psychology: Attention · Decision making · Learning · Judgement · Memory · Motivation · Perception · Reasoning · Thinking  - Cognitive processes Cognition - Outline Index

File:Color cones.png

HSL and HSV are two related representations of points in an RGB color space, which attempt to describe perceptual color relationships more accurately than RGB, while remaining computationally simple. HSL stands for hue, saturation, lightness, while HSV stands for hue, saturation, value.

HSI and HSB are alternative names for these concepts, using intensity and brightness; their definitions are less standardized, but they are typically interpreted as synonymous with HSL.

Both HSL and HSV describe colors as points in a cylinder whose central axis ranges from black at the bottom to white at the top with neutral colors between them, where angle around the axis corresponds to “hue”, distance from the axis corresponds to “saturation”, and distance along the axis corresponds to “lightness”, “value”, or “brightness”.

The two representations are similar in purpose, but differ somewhat in approach. Both are mathematically cylindrical, but while HSV (hue, saturation, value) can be thought of conceptually as an inverted cone of colors (with a black point at the bottom, and fully-saturated colors around a circle at the top), HSL conceptually represents a double-cone or sphere (with white at the top, black at the bottom, and the fully-saturated colors around the edge of a horizontal cross-section with middle gray at its center). Note that while “hue” in HSL and HSV refers to the same attribute, their definitions of “saturation” differ dramatically.

Because HSL and HSV are simple transformations of device-dependent RGB, the color defined by a (h, s, l) or (h, s, v) triplet depends on the particular color of red, green, and blue “primaries” used. Each unique RGB device therefore has unique HSL and HSV spaces to accompany it. An (h, s, l) or (h, s, v) triplet can however become definite when it is tied to a particular RGB color space, such as sRGB.

Both models were first formally described in 1978 by Alvy Ray Smith,[1] though the concept of describing colors by these three dimensions, or equivalents such as hue, chroma, and tint, are much older.[2]

Contents

• 1 Motivation
• 2 Usage
• 3 Comparison of HSL and HSV
• 4 Comparison with other color models
• 5 Formal specifications
  • 5.1 Conversion from RGB to HSL or HSV
  • 5.2 Conversion from HSL to RGB
  • 5.3 Conversion from HSV to RGB
• 6 Terminology
• 7 Spherical and other 3D mappings
• 8 Examples
• 9 See also
• 10 Notes
• 11 References
• 12 External links

Motivation[]

It is sometimes preferable in working with art materials, digitized images, or other media, to use the HSV or HSL color model over alternative models such as RGB or CMYK, because of differences in the ways the models emulate how humans perceive color. RGB and CMYK are additive and subtractive models, respectively, modelling the way that primary color lights or pigments (respectively) combine to form new colors when mixed.

Usage[]

The HSV model is commonly used in computer graphics applications. In various application contexts, a user must choose a color to be applied to a particular graphical element. When used in this way, the HSV color wheel is often used. In it, the hue is represented by a circular region; a separate triangular region may be used to represent saturation and value. Typically, the vertical axis of the triangle indicates saturation, while the horizontal axis corresponds to value. In this way, a color can be chosen by first picking the hue from the circular region, then selecting the desired saturation and value from the triangular region.

Another visualization method of the HSV model is the cone. In this representation, the hue is depicted as a three-dimensional conical formation of the color wheel. The saturation is represented by the distance from the center of a circular cross-section of the cone, and the value is the distance from the pointed end of the cone. Some representations use a hexagonal cone, or hexcone, instead of a circular cone. This method is well-suited to visualizing the entire HSV color space in a single object; however, due to its three-dimensional nature, it is not well-suited to color selection in two-dimensional computer interfaces.

The HSV color space could also be visualized as a cylindrical object; similar to the cone above, the hue varies along the outer circumference of a cylinder, with saturation again varying with distance from the center of a circular cross-section. Value again varies from top to bottom. Such a representation might be considered the most mathematically accurate model of the HSV color space; however, in practice the number of visually distinct saturation levels and hues decreases as the value approaches black. Additionally, computers typically store RGB values with a limited range of precision; the constraints of precision, coupled with the limitations of human color perception, make the cone visualization more practical in most cases.

Comparison of HSL and HSV[]

File:HSL HSV cylinder color solid comparison.png

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 the user can choose saturation and value/lightness for the selected hue. With this representation, the difference between HSV and HSL is irrelevant. However, many programs also let the user 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:

File:Gimp color selector 02.gif

• 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)
  • Photoshop (HSV for color selection, HSL for image color adjustment)

Comparison with other color models[]

The HSV tristimulus space does not technically support a one-to-one mapping to physical power spectra as measured in radiometry. Thus it is not generally advisable to try to make direct comparisons between HSV coordinates and physical light properties such as wavelength or amplitude.

This section is a stub. You can help by adding to it.

Formal specifications[]

File:Barns grand tetons HSL separation.jpg

HSL and HSV are defined mathematically by transformations between the r, g, and b coordinates of colors in RGB space and the h, s, l, and v coordinates of the HSL and HSV spaces.[3]

Conversion from RGB to HSL or HSV[]

Let r, g, b ∈ [0,1] be the red, green, and blue coordinates, respectively, of a color in RGB space.

Let max be the greatest of r, g, and b, and min the least.

To find the hue angle h ∈ [0, 360) for either HSL or HSV space, compute:

h = { 0 if  max = min 60 ∘ × g − b max − min + 0 ∘ , if  max = r  and  g ≥ b 60 ∘ × g − b max − min + 360 ∘ , if  max = r  and  g < b 60 ∘ × b − r max − min + 120 ∘ , if  max = g 60 ∘ × r − g max − min + 240 ∘ , if  max = b {\displaystyle h = \begin{cases} 0 & \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} }

To find saturation and lightness s, l ∈ [0,1] for HSL space, compute:

l = 1 2 ( max + min ) {\displaystyle l = \begin{matrix} \frac{1}{2} \end{matrix} (\max + \min)} s = { 0 if  max = min max − min max + min = max − min 2 l , if  l ≤ 1 2 max − min 2 − ( max + min ) = max − min 2 − 2 l , if  l > 1 2 {\displaystyle s = \begin{cases} 0 & \mbox{if } \max = \min \\ \frac{\max-\min}{\max+\min} = \frac{\max-\min}{2l}, & \mbox{if } l \leq \frac{1}{2} \\ \frac{\max-\min}{2-(\max+\min)} = \frac{\max-\min}{2-2l}, & \mbox{if } l > \frac{1}{2} \end{cases} }

The value of h is generally normalized to lie between 0 and 360°, and h = 0 is used when max = min (that is, for grays) though the hue has no geometric meaning there, where the saturation s is zero. Similarly, the choice of 0 as the value for s when l is equal to 0 or 1 is arbitrary.

HSL and HSV have the same definition of hue, but the other components differ. The values for s and v of an HSV color are defined as follows:

s = { 0 , if  max = 0 max − min max = 1 − min max , otherwise {\displaystyle s = \begin{cases} 0, & \mbox{if } \max = 0 \\ \frac{\max - \min}{\max} = 1 - \frac{\min}{\max}, & \mbox{otherwise} \end{cases} } v = max {\displaystyle v = \max \,}

The range of HSV and HSL vectors is a cube in the cartesian coordinate system; but since hue is really a cyclic property, with a cut at red, visualizations of these spaces invariably involve hue circles;[4] cylindrical and conical (bi-conical for HSL) depictions are most popular; Spherical depictions are also possible.

Conversion from HSL to RGB[]

Given a color defined by (h, s, l) values in HSL space, with h in the range [0, 360), indicating the angle, in degrees of the hue, and with s and l in the range [0, 1], representing the saturation and lightness, respectively, a corresponding (r, g, b) triplet in RGB space, with r, g, and b also in range [0, 1], and corresponding to red, green, and blue, respectively, can be computed as follows:

First, if s = 0, then the resulting color is achromatic, or gray. In this special case, r, g, and b all equal l. Note that the value of h is ignored, and may be undefined in this situation.

The following procedure can be used, even when s is zero:

q = { l × ( 1 + s ) , if  l < 1 2 l + s − ( l × s ) , if  l ≥ 1 2 {\displaystyle q= \begin{cases} l \times (1+s), & \mbox{if } l < \frac{1}{2} \\ l+s-(l \times s), & \mbox{if } l \ge \frac{1}{2} \end{cases} } p = 2 × l − q {\displaystyle p = 2 \times l - q \, } h k = h 360 {\displaystyle h_k = {h \over 360} \, } (h normalized to be in the range [0,1)) t R = h k + 1 3 {\displaystyle t_R = h_k+\frac{1}{3} \, } t G = h k {\displaystyle t_G = h_k \, } t B = h k − 1 3 {\displaystyle t_B = h_k-\frac{1}{3} \, } if  t C < 0 → t C = t C + 1.0 for each C ∈ { R , G , B } {\displaystyle \mbox{if } t_C < 0 \rightarrow t_C = t_C + 1.0 \quad \mbox{for each}\,C \in \{R,G,B\}} if  t C > 1 → t C = t C − 1.0 for each C ∈ { R , G , B } {\displaystyle \mbox{if } t_C > 1 \rightarrow t_C = t_C - 1.0 \quad \mbox{for each}\,C \in \{R,G,B\}}

Compute each color component ColorC of the vector (ColorR, ColorG, ColorB) = (r, g, b),

C o l o r C = { p + ( ( q − p ) × 6 × t C ) , if  t C < 1 6 q , if  1 6 ≤ t C < 1 2 p + ( ( q − p ) × 6 × ( 2 3 − t C ) ) , if  1 2 ≤ t C < 2 3 p , otherwise  {\displaystyle {Color}_C = \begin{cases} p+ \left((q-p) \times 6 \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 6 \times (\frac{2}{3} - t_C) \right), & \mbox{if } \frac{1}{2} \le t_C < \frac{2}{3} \\ p, & \mbox{otherwise } \end{cases} } for each C ∈ { R , G , B } {\displaystyle \mbox{for each}\,C \in \{R,G,B\}}

Conversion from HSV to RGB[]

Similarly, given a color defined by (h, s, v) values in HSV space, with h as above, and with s and v varying between 0 and 1, representing the saturation and value, respectively, a corresponding (r, g, b) triplet in RGB space can be computed:

h i = ⌊ h 60 ⌋ mod 6 {\displaystyle h_i = \left\lfloor \frac{h}{60} \right\rfloor \mod 6} f = h 60 − h i {\displaystyle f = \frac{h}{60} - h_i} p = v × ( 1 − s ) {\displaystyle p = v \times (1 - s) \, } q = v × ( 1 − f × s ) {\displaystyle q = v \times (1 - f \times s) \, } t = v × ( 1 − ( 1 − f ) × s ) {\displaystyle t = v \times (1 - (1 - f) \times s) \, }

Compute color vector (r, g, b),

( r , g , b ) = { ( v , t , p ) , if  h i = 0 ( q , v , p ) , if  h i = 1 ( p , v , t ) , if  h i = 2 ( p , q , v ) , if  h i = 3 ( t , p , v ) , if  h i = 4 ( v , p , q ) , if  h i = 5 {\displaystyle (r, g, b) = \begin{cases} (v, t, p), & \mbox{if } h_i = 0 \\ (q, v, p), & \mbox{if } h_i = 1 \\ (p, v, t), & \mbox{if } h_i = 2 \\ (p, q, v), & \mbox{if } h_i = 3 \\ (t, p, v), & \mbox{if } h_i = 4 \\ (v, p, q), & \mbox{if } h_i = 5 \\ \end{cases} }

Terminology[]

The terms attributed to the "L" or "V" component of HSL or HSV color space may be misleading since they have little to do with color science definitions of the terms. In photometry, concepts such as lightness and luminance relate to a weighted spectrum, in which green is much more luminous that blue, and red is between; but in HSL and HSV, the "L" and "V" dimensions treat the three color channels equally.

• Lightness or value refers to the perceived reflectance of a surface,[5] or to relative luminous reflectance of a colored surface patch.

• 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 relative luminance. This usage was popularized by Adobe Photoshop; in the documentation of the CS3 version, the luminosity blending mode is still present, but is described in terms of luminance: "Luminosity: Creates a result color with the hue and saturation of the base color and the luminance of the blend color."[6]

Spherical and other 3D mappings[]

File:Runge Farbenkugel.jpg

File:Munsell color sphere.png

HSL and HSV are related to three-dimensional color-order systems such as Philipp Otto Runge's color sphere (Farben-kugel) and the Munsell color system, both of which are structured around a neutral black-to-white axis, as the HSL and HSV cylinders are. Munsell refers to the colorfulness dimension as chroma rather than saturation, and refers to but uses hue and lightness as in HSL.

Modern works also sometimes map HSL into a sphere, with L along the polar axis, H a longitude, and S a fraction of the radius of the disk at a constant L or latitude.[7][8]

Since the entire top and bottom surfaces of the HSL cylinder are white and black, respectively, nothing is lost in shrinking them to points at the poles of a sphere. Another popular way to shrink the white and black surfaces to points is to map HSL to a bi-cone,[9][10] which fits the same description as the sphere given above, but with a different profile of radius versus L. For HSV, on the other hand, the top surface of the cylinder is not white, so it can not be collapsed to a point, while the bottom can be mapped to a point, since it's all black; therefore, HSV is commonly mapped to a cone.

Please expand this article.This template may be found on the article's talk page, where there may be further information. Alternatively, more information might be found at Requests for expansion.Please remove this message once the article has been expanded.

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)

See also[]

• HSV color space

Notes[]

1. ↑ Alvy Ray Smith (August 1978). Color Gamut Transform Pairs. Computer Graphics 12 (3).
2. ↑ Robert Mearns Yerkes (1911). Introduction to Psychology, H. Holt.
3. ↑ Max K. Agoston (2005). Computer Graphics and Geometric Modeling: Implementation and Algorithms, Springer.
4. ↑ John C. Russ (2005). Image Analysis Of Food Microstructure, CRC Press.
5. ↑ Edward H. Adelson (2000). Lightness Perception and Lightness Illusions – Some terminology. Massachusetts Institute of Technology. URL accessed on 2007-07-17.
6. ↑ List of Blending Modes. Adobe Help Resource Center. URL accessed on 2007-11-10.
7. ↑ Phil Nelson (2007). The Photographer's Guide to Color Management: Professional Techniques for Consistent Results, Amherst Media, Inc.
8. ↑ Abhay Sharma (2003). Understanding Color Management, Thomson Delmar Learning.
9. ↑ John C. Russ (2005). Image Analysis Of Food Microstructure, CRC Press.
10. ↑ Richard Prikryl (2004). Dimension Stone 2004 - New Perspectives for a Traditional Building Material, Taylor & Francis.

References[]

• Raphael Gonzalez, Richard E. Woods (2002) Digital Image Processing, 2nd ed. Prentice Hall Press, ISBN 0-201-18075-8, p. 295.
• Charles Poynton. “What are HSB and HLS?” Color FAQ. 28 November 2006.
• Donald Hearn, M. Pauline Baker (1986) Computer Graphics. Prentice Hall International, ISBN 0-13-165598-1, pp. 302-205.

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.
• C++ code for RGB and HSV conversion
• Demonstrative color conversion applet

v·d·eColor space
List of color spaces · Color models
CIE	CIEXYZ · CIELAB · CIECAM02 · CIELUV · Yuv · CIEUVW · CIE RGB
RGB	color spaces · sRGB · Adobe · Wide Gamut · ProPhoto · scRGB
YUV	YUV (PAL) · YDbDr (SECAM) · YIQ (NTSC) · YCbCr · YPbPr · xvYCC
Other	LMS · HSL, HSV · CMYK · CcMmYK · Hexachrome · RYB · Munsell · NCS · Pantone · RAL OSA-UCS · Coloroid · RG · PCCS · ISCC-NBS · Imaginary color
See color vision for the vision capacities of organisms or machines.

This page uses Creative Commons Licensed content from Wikipedia (view authors).

CMYK and HSV are oppisites.