HSL and HSV - WikiHQ

thumb|upright=1.3|Fig. 1. HSL (a–d) and HSV (e–h). Above (a, e): cut-away three-dimensional models of each. Below: two-dimensional plots showing two of a model's three parameters at once, holding the other constant: cylindrical shells (b, f) of constant saturation, in this case the outside surface of each cylinder; horizontal cross-sections (c, g) of constant HSL lightness or HSV value, in this case the slices halfway down each cylinder; and rectangular vertical cross-sections (d, h) of constant hue, in this case of hues 0° red and its complement 180° cyan.

HSL and HSV are the two most common cylindrical-coordinate representations of points in an RGB color model. The two representations rearrange the geometry of RGB in an attempt to be more intuitive and perceptually relevant than the cartesian (cube) representation. Developed in the 1970s for computer graphics applications, HSL and HSV are used today in color pickers, in image editing software, and less commonly in image analysis and computer vision.

HSL stands for hue, saturation, and lightness, and is often also called HLS. HSV stands for hue, saturation, and value, and is also often called HSB (B for brightness). A third model, common in computer vision applications, is HSI, for hue, saturation, and intensity. However, while typically consistent, these definitions are not standardized, and any of these abbreviations might be used for any of these three or several other related cylindrical models. (For technical definitions of these terms, see below.)

In each cylinder, the angle around the central vertical axis corresponds to "hue", the distance from the axis corresponds to "saturation", and the distance along the axis corresponds to "lightness", "value" or "brightness". 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 models, the physical colors they define depend on the colors of the red, green, and blue primaries of the device or of the particular RGB space, and on the gamma correction used to represent the amounts of those primaries. Each unique RGB device therefore has unique HSL and HSV spaces to accompany it, and numerical HSL or HSV values describe a different color for each basis RGB space.

Both of these representations are used widely in computer graphics, and one or the other of them is often more convenient than RGB, but both are also criticized for not adequately separating color-making attributes, or for their lack of perceptual uniformity. Other more computationally intensive models, such as CIELAB or CIECAM02 are said to better achieve these goals.

Basic principle

HSL and HSV are both cylindrical geometries (), with hue, their angular dimension, starting at the red primary at 0°, passing through the green primary at 120° and the blue primary at 240°, and then wrapping back to red at 360°. In each geometry, the central vertical axis comprises the neutral, achromatic, or gray colors ranging, from top to bottom, white at lightness 1 (value 1) to black at lightness 0 (value 0).

In both geometries, the additive primary and secondary colors – red, yellow, green, cyan, blue and magenta – and linear mixtures between adjacent pairs of them, sometimes called pure colors, are arranged around the outside edge of the cylinder with saturation 1. These saturated colors have lightness 0.5 in HSL, while in HSV they have value 1. Mixing these pure colors with black – producing so-called shades – leaves saturation unchanged. In HSL, saturation is also unchanged by tinting with white, and only mixtures with both black and white – called tones – have saturation less than 1. In HSV, tinting alone reduces saturation.

Because these definitions of saturation – in which very dark (in both models) or very light (in HSL) near-neutral colors are considered fully saturated (for instance, from the bottom right in the sliced HSL cylinder or from the top right) – conflict with the intuitive notion of color purity, often a conic or biconic solid is drawn instead (), with what this article calls chroma as its radial dimension (equal to the range of the RGB values), instead of saturation (where the saturation is equal to the chroma over the maximum chroma in that slice of the (bi)cone). Confusingly, such diagrams usually label this radial dimension "saturation", blurring or erasing the distinction between saturation and chroma. As described below, computing chroma is a helpful step in the derivation of each model. Because such an intermediate model – with dimensions hue, chroma, and HSV value or HSL lightness – takes the shape of a cone or bicone, HSV is often called the "hexcone model" while HSL is often called the "bi-hexcone model" (#Color-making attributes|).

Motivation

Most televisions, computer displays, and projectors produce colors by combining red, green, and blue light in varying intensities – the so-called RGB additive primary colors. The resulting mixtures in RGB color space can reproduce a wide variety of colors (called a gamut); however, the relationship between the constituent amounts of red, green, and blue light and the resulting color is unintuitive, especially for inexperienced users, and for users familiar with subtractive color mixing of paints or traditional artists' models based on tints and shades (). Furthermore, neither additive nor subtractive color models define color relationships the same way the human eye does.

For example, imagine we have an RGB display whose color is controlled by three sliders ranging from , one controlling the intensity of each of the red, green, and blue primaries. If we begin with a relatively colorful orange , with sRGB values , , , and want to reduce its colorfulness by half to a less saturated orange , we would need to drag the sliders to decrease R by 31, increase G by 24, and increase B by 59, as pictured below.

300px

Beginning in the 1950s, color television broadcasts used a compatible color system whereby "luminance" and "chrominance" signals were encoded separately, so that existing unmodified black-and-white televisions could still receive color broadcasts and show a monochrome image.

In an attempt to accommodate more traditional and intuitive color mixing models, computer graphics pioneers at PARC and NYIT introduced the HSV model for computer display technology in the mid-1970s, formally described by Alvy Ray Smith in the August 1978 issue of Computer Graphics. In the same issue, Joblove and Greenberg described the HSL model – whose dimensions they labeled hue, relative chroma, and intensity – and compared it to HSV (). Their model was based more upon how colors are organized and conceptualized in human vision in terms of other color-making attributes, such as hue, lightness, and chroma; as well as upon traditional color mixing methods – e.g., in painting – that involve mixing brightly colored pigments with black or white to achieve lighter, darker, or less colorful colors.

The following year, 1979, at SIGGRAPH, Tektronix introduced graphics terminals using HSL for color designation, and the Computer Graphics Standards Committee recommended it in their annual status report (). These models were useful not only because they were more intuitive than raw RGB values, but also because the conversions to and from RGB were extremely fast to compute: they could run in real time on the hardware of the 1970s. Consequently, these models and similar ones have become ubiquitous throughout image editing and graphics software since then. Some of their uses are described below.

Formal derivation

thumb|right|300px|Fig. 8. The geometric derivation of the cylindrical HSL and HSV representations of an RGB "colorcube".|alt=A flow-chart–like diagram shows the derivation of HSL, HSV, and a luma/chroma/hue model. At the top lies an RGB "color cube", which as a first step is tilted onto its corner so that black lies at the bottom and white at the top. At the next step, the three models diverge, and the height of red, yellow, green, cyan, blue, and magenta is set based on the formula for lightness, value, or luma: in HSV, all six of these are placed in the plane with white, making an upside-down hexagonal pyramid; in HSL, all six are placed in a plane halfway between white and black, making a bipyramid; in the luma/chroma/hue model, the height is determined by the approximate formula luma equals 0.3 times red plus 0.6 times green plus 0.1 times blue. At the next step, each horizontal slice of HSL and HSV is expanded to fill a uniform-width hexagonal prism, while the luma/chroma/hue model is simply embedded in that prism without modification. As a final step, all three models' hexagonal prisms are warped into cylinders, reflecting the nature of the definition of hue and saturation or chroma. For full details and mathematical formalism, read the rest of this section.

Color-making attributes

The dimensions of the HSL and HSV geometries – simple transformations of the not-perceptually-based RGB model – are not directly related to the photometric color-making attributes of the same names, as defined by scientists such as the CIE or ASTM. Nonetheless, it is worth reviewing those definitions before leaping into the derivation of our models. For the definitions of color-making attributes which follow, see:

; Hue: The "attribute of a visual sensation according to which an area appears to be similar to one of the perceived colors: red, yellow, green, and blue, or to a combination of two of them". who clearly states that "We shall assume that an RGB monitor is a linear device", and thus designed HSV using linear RGB. We will drop the primes, and the labels R, G, and B should be taken to stand for the three attributes of the origin RGB space, whether or not it is gamma corrected. – and tilted it on its corner, so that black rested at the origin with white directly above it along the vertical axis, then measured the hue of the colors in the cube by their angle around that axis, starting with red at 0°. Then they came up with a characterization of brightness/value/lightness, and defined saturation to range from 0 along the axis to 1 at the most colorful point for each pair of other parameters.

: <math>\alpha = R - G \cdot \cos(60^{\circ}) - B \cdot \cos(60^{\circ}) = \tfrac{1}{2}(2R - G - B)</math>

: <math>\beta = G \cdot \sin(60^{\circ}) - B \cdot \sin(60^{\circ}) = \tfrac{\sqrt{3{2}(G - B)</math>

: <math>H_2 = \operatorname{atan2}(\beta, \alpha)</math>

: <math>C_2 = \operatorname{gmean}(\alpha, \beta) = \sqrt{\alpha^2 + \beta^2}</math>

(The atan2 function, a "two-argument arctangent", computes the angle from a cartesian coordinate pair.)

Notice that these two definitions of hue (H and H<sub>2</sub>) nearly coincide, with a maximum difference between them for any color of about 1.12° – which occurs at twelve particular hues, for instance , – and with for every multiple of 30°. The two definitions of chroma (C and C<sub>2</sub>) differ more substantially: they are equal at the corners of our hexagon, but at points halfway between two corners, such as , we have , but <math display="inline">C_2 = \sqrt{\frac{3}{4 \approx 0.866,</math> a difference of about 13.4%.

Lightness

thumb|right|300px|Fig. 12a–d. Four different possible "lightness" dimensions, plotted against chroma, for a pair of complementary hues. Each plot is a vertical cross-section of its three-dimensional color solid.|alt=When we plot HSV value against chroma, the result, regardless of hue, is an upside-down isosceles triangle, with black at the bottom, and white at the top bracketed by the most chromatic colors of two complementary hues at the top right and left corners. When we plot HSL lightness against chroma, the result is a rhombus, again with black at the bottom and white at the top, but with the colorful complements at horizontal ends of the line halfway between them. When we plot the component average, sometimes called HSI intensity, against chroma, the result is a parallelogram whose shape changes depending on hue, as the most chromatic colors for each hue vary between one third and two thirds between black and white. Plotting luma against chroma yields a parallelogram of much more diverse shape: blue lies about 10 percent of the way from black to white, while its complement yellow lies 90 percent of the way there; by contrast, green is about 60 percent of the way from black to white while its complement magenta is 40 percent of the way there.

While the definition of hue is relatively uncontroversial – it roughly satisfies the criterion that colors of the same perceived hue should have the same numerical hue – the definition of a lightness or value dimension is less obvious: there are several possibilities depending on the purpose and goals of the representation. Here are four of the most common (; three of these are also shown in #Color-making attributes|):

The simplest definition is just the arithmetic mean, i.e. average, of the three components, in the HSI model called intensity (). This is simply the projection of a point onto the neutral axis – the vertical height of a point in our tilted cube. The advantage is that, together with Euclidean-distance calculations of hue and chroma, this representation preserves distances and angles from the geometry of the RGB cube.
: <math>I = \operatorname{avg}(R, G, B) = \tfrac{1}{3}(R + G + B)</math>
In the HSV "hexcone" model, value is defined as the largest component of a color, our M above (). This places all three primaries, and also all of the "secondary colors" – cyan, yellow, and magenta – into a plane with white, forming a hexagonal pyramid out of the RGB cube.
: <math>Y'_\text{601} = 0.299\cdot R + 0.587\cdot G + 0.114\cdot B</math> (SDTV)
: <math>Y'_\text{240} = 0.212\cdot R + 0.701\cdot G + 0.087\cdot B</math> (Adobe)
: <math>Y'_\text{709} = 0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B</math> (HDTV)
: <math>Y'_\text{2020} = 0.2627\cdot R + 0.6780\cdot G + 0.0593\cdot B</math> (UHDTV, HDR)

All four of these leave the neutral axis alone. That is, for colors with , any of the four formulations yields a lightness equal to the value of R, G, or B.

For a graphical comparison, see fig. 13 below.

Saturation

thumb|right|300px|Fig. 14a–d. In both HSL and HSV, saturation is simply the chroma scaled to fill the interval for every combination of hue and lightness or value.

When encoding colors in a hue/lightness/chroma or hue/value/chroma model (using the definitions from the previous two sections), not all combinations of lightness (or value) and chroma are meaningful: that is, half of the colors denotable using , , and fall outside the RGB gamut (the gray parts of the slices in figure 14). The creators of these models considered this a problem for some uses. For example, in a color selection interface with two of the dimensions in a rectangle and the third on a slider, half of that rectangle is made of unused space. Now imagine we have a slider for lightness: the user's intent when adjusting this slider is potentially ambiguous: how should the software deal with out-of-gamut colors? Or conversely, If the user has selected as colorful as possible a dark purple and then shifts the lightness slider upward, what should be done: would the user prefer to see a lighter purple still as colorful as possible for the given hue and lightness or a lighter purple of exactly the same chroma as the original color

: <math>S_I = \begin{cases}

0, &\text{if } I = 0 \\

1 - \frac{m}{I}, &\text{otherwise}

\end{cases}</math>

Using the same name for these three different definitions of saturation leads to some confusion, as the three attributes describe substantially different color relationships; in HSV and HSI, the term roughly matches the psychometric definition, of a chroma of a color relative to its own lightness, but in HSL it does not come close. Even worse, the word saturation is also often used for one of the measurements we call chroma above (C or C<sub>2</sub>).

Examples

All parameter values shown below are given as values in the interval , except those for H and H<sub>2</sub>, which are in the interval .

{| class="wikitable" style="text-align:right;" cellpadding="6"

|- style="text-align:center;vertical-align:baseline;"

!Color

!style="min-width:3.2em;"|R

!style="min-width:3.2em;"|G

!style="min-width:3.2em;"|B

!style="min-width:3.2em;"|H

!style="min-width:3.2em;"|H<sub>2</sub>

!style="min-width:3.2em;"|C

!style="min-width:3.2em;"|C<sub>2</sub>

!style="min-width:3.2em;"|V

!style="min-width:3.2em;"|L

!style="min-width:3.2em;"|I

!style="min-width:3.2em;"|'<sub>601</sub>

!style="min-width:3.2em;"|S<sub>HSV</sub>

!style="min-width:3.2em;"|S<sub>HSL</sub>

!style="min-width:3.2em;"|S<sub>HSI</sub>

|style="background-color:#FFFFFF; color:#FFFFFF"; title="#FFFFFF"; font-family=monospace, monospace|#FFFFFF

| 1.000

|style="padding-right:.5em;"

| 0.000

| 1.000

| 0.000

|style="background-color:#808080; color:#808080"; title="#808080"; font-family=monospace, monospace|#808080

| 0.500

|style="padding-right:.5em;"

| 0.000

| 0.500

| 0.000

|style="background-color:#000000; color:#000000"; title="#000000"; font-family=monospace, monospace|#000000

| 0.000

|style="padding-right:.5em;"

| 0.000

|style="background-color:#FF0000; color:#FF0000"; title="#FF0000"; font-family=monospace, monospace; font-family=monospace, monospace|#FF0000

| 1.000

| 0.000

| °

| 1.000

| 0.500

| 0.333

| 0.299

| 1.000

|style="background-color:#BFBF00; color:#BFBF00"; title="#BFBF00"; font-family=monospace, monospace|#BFBF00

| 0.750

| 0.000

| °

| 0.750

| 0.375

| 0.500

| 0.664

| 1.000

|style="background-color:#008000; color:#008000"; title="#008000"; font-family=monospace, monospace|#008000

| 0.000

| 0.500

| 0.000

| °

| 0.500

| 0.250

| 0.167

| 0.293

| 1.000

|style="background-color:#80FFFF; color:#80FFFF"; title="#80FFFF"; font-family=monospace, monospace|#80FFFF

| 0.500

| 1.000

| °

| 0.500

| 1.000

| 0.750

| 0.833

| 0.850

| 0.500

| 1.000

| 0.400

|style="background-color:#8080FF; color:#8080FF"; title="#8080FF"; font-family=monospace, monospace|#8080FF

| 0.500

| 1.000

| °

| 0.500

| 1.000

| 0.750

| 0.667

| 0.557

| 0.500

| 1.000

| 0.250

|style="background-color:#BF40BF; color:#BF40BF"; title="#BF40BF"; font-family=monospace, monospace|#BF40BF

| 0.750

| 0.250

| 0.750

| °

| 0.500

| 0.750

| 0.500

| 0.583

| 0.457

| 0.667

| 0.500

| 0.571

|style="background-color:#A0A424; color:#A0A424"; title="#A0A424"; font-family=monospace, monospace|#A0A424

| 0.628

| 0.643

| 0.142

| °

| 0.501

| 0.494

| 0.643

| 0.393

| 0.471

| 0.581

| 0.779

| 0.638

| 0.699

|style="background-color:#411BEA; color:#411BEA"; title="#411BEA"; font-family=monospace, monospace|#411BEA

| 0.255

| 0.104

| 0.918

| °

| 0.814

| 0.750

| 0.918

| 0.511

| 0.426

| 0.242

| 0.887

| 0.832

| 0.756

|style="background-color:#1EAC41; color:#1EAC41"; title="#1EAC41"; font-family=monospace, monospace|#1EAC41

| 0.116

| 0.675

| 0.255

| °

| 0.559

| 0.504

| 0.675

| 0.396

| 0.349

| 0.460

| 0.828

| 0.707

| 0.667

|style="background-color:#F0C80E; color:#F0C80E"; title="#F0C80E"; font-family=monospace, monospace|#F0C80E

| 0.941

| 0.785

| 0.053

| °

| 0.888

| 0.821

| 0.941

| 0.497

| 0.593

| 0.748

| 0.944

| 0.893

| 0.911

|style="background-color:#B430E5; color:#B430E5"; title="#B430E5"; font-family=monospace, monospace|#B430E5

| 0.704

| 0.187

| 0.897

| °

| 0.710

| 0.636

| 0.897

| 0.542

| 0.596

| 0.423

| 0.792

| 0.775

| 0.686

|style="background-color:#ED7651; color:#ED7651"; title="#ED7651"; font-family=monospace, monospace|#ED7651

| 0.931

| 0.463

| 0.316

| °

| 0.615

| 0.556

| 0.931

| 0.624

| 0.570

| 0.586

| 0.661

| 0.817

| 0.446

|style="background-color:#FEF888; color:#FEF888"; title="#FEF888"; font-family=monospace, monospace|#FEF888

| 0.998

| 0.974

| 0.532

| °

| 0.466

| 0.454

| 0.998

| 0.765

| 0.835

| 0.931

| 0.467

| 0.991

| 0.363

|style="background-color:#19CB97; color:#19CB97"; title="#19CB97"; font-family=monospace, monospace|#19CB97

| 0.099

| 0.795

| 0.591

| °

| 0.696

| 0.620

| 0.795

| 0.447

| 0.495

| 0.564

| 0.875

| 0.779

| 0.800

|style="background-color:#362698; color:#362698"; title="#362698"; font-family=monospace, monospace|#362698

| 0.211

| 0.149

| 0.597

| °

| 0.448

| 0.420

| 0.597

| 0.373

| 0.319

| 0.219

| 0.750

| 0.601

| 0.533

|style="background-color:#7E7EB8; color:#7E7EB8"; title="#7E7EB8"; font-family=monospace, monospace|#7E7EB8

| 0.495

| 0.493

| 0.721

| °

| 0.228

| 0.227

| 0.721

| 0.607

| 0.570

| 0.520

| 0.316

| 0.290

| 0.135

Use in end-user software

thumb|right|300px|Fig 16a–g. By the 1990s, HSL and HSV color selection tools were ubiquitous. The screenshots above are taken from: These are undoubtedly based on earlier examples, stretching back to PARC and NYIT in the mid-1970s.

The original purpose of HSL and HSV and similar models, and their most common current application, is in color selection tools. At their simplest, some such color pickers provide three sliders, one for each attribute. Most, however, show a two-dimensional slice through the model, along with a slider controlling which particular slice is shown. The latter type of GUI exhibits great variety, because of the choice of cylinders, hexagonal prisms, or cones/bicones that the models suggest (see the diagram near the top of the page). Several color choosers from the 1990s are shown to the right, most of which have remained nearly unchanged in the intervening time: today, nearly every computer color chooser uses HSL or HSV, at least as an option. Some more sophisticated variants are designed for choosing whole sets of colors, basing their suggestions of compatible colors on the HSL or HSV relationships between them.

Most web applications needing color selection also base their tools on HSL or HSV, and pre-packaged open source color choosers exist for most major web front-end frameworks. The CSS 3 specification allows web authors to specify colors for their pages directly with HSL coordinates.

HSL and HSV are sometimes used to define gradients for data visualization, as in maps or medical images. For example, the popular GIS program ArcGIS historically applied customizable HSV-based gradients to numerical geographical data.

{| class="wikitable" style="clear:right; float:right; margin:0.8em 0 0 1.0em;"

|  border="0" | none|100px<div style="width:90px; font-size: smaller;" class="thumbcaption">Fig. 17. xv's HSV-based color modifier.</div>

| border="0" | none|210px<div style="width:200px; font-size: smaller;" class="thumbcaption">Fig. 18. The hue/saturation tool in Photoshop 2.5, ca. 1992.</div>

<!--Deleted image removed:|-

| border="0" | Deleted image removed: none|210px <div style="width:200px; font-size: smaller;" class="thumbcaption">Fig. 19. Avid's video color adjustment tool, based on HSL or a similar model.</div>-->

Image editing software also commonly includes tools for adjusting colors with reference to HSL or HSV coordinates, or to coordinates in a model based on the "intensity" or luma defined above. In particular, tools with a pair of "hue" and "saturation" sliders are commonplace, dating to at least the late-1980s, but various more complicated color tools have also been implemented. For instance, the Unix image viewer and color editor xv allowed six user-definable hue (H) ranges to be rotated and resized, included a dial-like control for saturation (S<sub>HSV</sub>), and a curves-like interface for controlling value (V) – see fig. 17. The image editor Picture Window Pro includes a "color correction" tool which affords complex remapping of points in a hue/saturation plane relative to either HSL or HSV space.

Video editors also use these models. For example, both Avid and Final Cut Pro include color tools based on HSL or a similar geometry for use adjusting the color in video. With the Avid tool, users pick a vector by clicking a point within the hue/saturation circle to shift all the colors at some lightness level (shadows, mid-tones, highlights) by that vector.

Since version 4.0, Adobe Photoshop's "Luminosity", "Hue", "Saturation", and "Color" blend modes composite layers using a luma/chroma/hue color geometry. These have been copied widely, but several imitators use the HSL (e.g. PhotoImpact, PaintShop Pro) or HSV geometries instead.

Use in image analysis

HSL, HSV, HSI, or related models are often used in computer vision and image analysis for feature detection or image segmentation. The applications of such tools include object detection, for instance in robot vision; object recognition, for instance of faces, text, or license plates; content-based image retrieval; and analysis of medical images.

<!--

Demarty, C.-H., Beucher, S., 1998. Color segmentation algorithm using an HLS transformation. In: Proceedings of the International Symposium on Mathematical Morphology (ISMM ’98). .

-->

Disadvantages

While HSL, HSV, and related spaces serve well enough to, for instance, choose a single color, they ignore much of the complexity of color appearance. Essentially, they trade off perceptual relevance for computation speed, from a time in computing history (high-end 1970s graphics workstations, or mid-1990s consumer desktops) when more sophisticated models would have been too computationally expensive.

HSL and HSV are simple transformations of RGB which preserve symmetries in the RGB cube unrelated to human perception, such that its R, G, and B corners are equidistant from the neutral axis, and equally spaced around it. If we plot the RGB gamut in a more perceptually-uniform space, such as CIELAB (see below), it becomes immediately clear that the red, green, and blue primaries do not have the same lightness or chroma, or evenly spaced hues. Furthermore, different RGB displays use different primaries, and so have different gamuts. Because HSL and HSV are defined purely with reference to some RGB space, they are not absolute color spaces: to specify a color precisely requires reporting not only HSL or HSV values, but also the characteristics of the RGB space they are based on, including the gamma correction in use.

If we take an image and extract the hue, saturation, and lightness or value components, and then compare these to the components of the same name as defined by color scientists, we can quickly see the difference, perceptually. For example, examine the following images of a fire breather (). The original is in the sRGB colorspace. CIELAB L* is a CIE-defined achromatic lightness quantity (dependent solely on the perceptually achromatic luminance Y, but not the mixed-chromatic components X or Z, of the CIEXYZ colorspace from which the sRGB colorspace itself is derived), and it is plain that this appears similar in perceptual lightness to the original color image. Luma is roughly similar, but differs somewhat at high chroma, where it deviates most from depending solely on the true achromatic luminance (Y, or equivalently L*) and is influenced by the colorimetric chromaticity (x,y, or equivalently, a*,b* of CIELAB). HSL L and HSV V, by contrast, diverge substantially from perceptual lightness.

thumb|Fig 20c: 12 points on the HSV color wheel in a [[CIELAB chroma plane, showing HSV's lack of uniformity in hue and saturation]]

Though none of the dimensions in these spaces match their perceptual analogs, the value of HSV and the saturation of HSL are particular offenders. In HSV, the blue primary and white are held to have the same value, even though perceptually the blue primary has somewhere around 10% of the luminance of white (the exact fraction depends on the particular RGB primaries in use). In HSL, a mix of 100% red, 100% green, 90% blue – that is, a very light yellow – is held to have the same saturation as the green primary even though the former color has almost no chroma or saturation by the conventional psychometric definitions. Such perversities led Cynthia Brewer, expert in color scheme choices for maps and information displays, to tell the American Statistical Association:

If these problems make HSL and HSV problematic for choosing colors or color schemes, they make them much worse for image adjustment. HSL and HSV, as Brewer mentioned, confound perceptual color-making attributes, so that changing any dimension results in non-uniform changes to all three perceptual dimensions, and distorts all of the color relationships in the image. For instance, rotating the hue of a pure dark blue toward green will also reduce its perceived chroma, and increase its perceived lightness (the latter is grayer and lighter), but the same hue rotation will have the opposite impact on lightness and chroma of a lighter bluish-green – to (the latter is more colorful and slightly darker). In the example below (), the image (a) is the original photograph of a green turtle. In the image (b), we have rotated the hue (H) of each color by , while keeping HSV value and saturation or HSL lightness and saturation constant. In the image right (c), we make the same rotation to the HSL/HSV hue of each color, but then we force the CIELAB lightness (L*, a decent approximation of perceived lightness) to remain constant. Notice how the hue-shifted middle version without such a correction dramatically changes the perceived lightness relationships between colors in the image. In particular, the turtle's shell is much darker and has less contrast, and the background water is much lighter. Image (d) uses CIELAB to hue shift; the difference from (c) demonstrates the errors in hue and saturation.

Because hue is a circular quantity, represented numerically with a discontinuity at 360°, it is difficult to use in statistical computations or quantitative comparisons: analysis requires the use of circular statistics. Furthermore, hue is defined piecewise, in 60° chunks, where the relationship of lightness, value, and chroma to R, G, and B depends on the hue chunk in question. This definition introduces discontinuities, corners which can plainly be seen in horizontal slices of HSL or HSV.

Charles Poynton, digital video expert, lists the above problems with HSL and HSV in his Color FAQ, and concludes that:

Other cylindrical-coordinate color models

The creators of HSL and HSV were far from the first to imagine colors fitting into conic or spherical shapes, with neutrals running from black to white in a central axis, and hues corresponding to angles around that axis. Similar arrangements date back to the 18th century, and continue to be developed in the most modern and scientific models.

Color conversion formulae

To convert from HSL or HSV to RGB, we essentially invert the steps listed above (as before, ). First, we compute chroma, by multiplying saturation by the maximum chroma for a given lightness or value. Next, we find the point on one of the bottom three faces of the RGB cube which has the same hue and chroma as our color (and therefore projects onto the same point in the chromaticity plane). Finally, we add equal amounts of R, G, and B to reach the proper lightness or value.

To RGB

HSL to RGB

Given a color with hue , saturation , and lightness , we first find chroma:

: <math>C = (1 - \left\vert 2 L - 1 \right\vert) \times S_L</math>

Then we can find a point along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color):

: <math>H^\prime = \frac{H}{60^\circ}</math>

: <math>X = C \times (1 - |H^\prime \;\bmod 2 - 1|)</math>

In the above equation, the notation <math>H^\prime \;\bmod 2</math> refers to the remainder of the Euclidean division of <math>H^\prime</math> by 2. <math>H^\prime</math> is not necessarily an integer.

: <math>(R_1, G_1, B_1) = \begin{cases}

(C, X, 0) &\text{if } 0 \leq H^\prime < 1 \\

(X, C, 0) &\text{if } 1 \leq H^\prime < 2 \\

(0, C, X) &\text{if } 2 \leq H^\prime < 3 \\

(0, X, C) &\text{if } 3 \leq H^\prime < 4 \\

(X, 0, C) &\text{if } 4 \leq H^\prime < 5 \\

(C, 0, X) &\text{if } 5 \leq H^\prime < 6

\end{cases}</math>

When <math>H^\prime</math> is an integer, the "neighboring" formula would yield the same result, as <math>X = 0</math> or <math>X = C</math>, as appropriate.

Finally, we can find R, G, and B by adding the same amount to each component, to match lightness:

: <math>m = L-\frac{C}{2}</math>

: <math>(R,G,B) = (R_{1}+m,G_{1}+m,B_{1}+m)</math>

HSL to RGB alternative

The polygonal piecewise functions can be somewhat simplified by clever use of minimum and maximum values as well as the remainder operation.

Given a color with hue <math>H \in [0^\circ,360^\circ]</math>, saturation <math>S=S_L \in [0,1]</math>, and lightness <math>L \in [0,1]</math>, we first define the function:

: <math>f(n) = L - a \max(-1, \min(k-3,9-k,1))</math>

where <math>k,n \in \mathbb R_{\geq 0}</math> and:

: <math>k = \left(n+\frac{H}{30^\circ}\right) \bmod 12</math>

: <math>a = S_L \min(L,1-L)</math>

And output R,G,B values (from <math>[0,1]^3</math>) are:

: <math>(R,G,B) = (f(0), f(8), f(4))</math>

The above alternative formulas allow for shorter implementations. In the above formulas the <math>a\bmod b</math> operation also returns the fractional part of the module e.g. <math> 7.4 \bmod 6 = 1.4</math>, and <math>k \in [0,12)</math>.

The base shape <math>T(k) = t(n,H) = \max(\min(k-3,9-k,1), -1)</math> is constructed as follows: <math>t_1 = \min(k-3,9-k)</math> is a "triangle" for which values greater or equal to −1 start from k=2 and end at k=10, and the highest point is at k=6. Then by <math>t_2 = \min(t_1,1) = \min(k-3,9-k,1)</math> we change values bigger than 1 to equal 1. Then by <math>t = \max(t_2,-1)</math> we change values less than −1 to equal −1. At this point, we get something similar to the red shape from fig. 24 after a vertical flip (where the maximum is 1 and the minimum is −1). The R,G,B functions of use this shape transformed in the following way: modulo-shifted on (by ) (differently for R,G,B) scaled on (by <math>-a</math>) and shifted on (by ).

We observe the following shape properties (Fig. 24 can help to get an intuition about them):

: <math>t(n,H) = -t(n+6,H)</math>

: <math>\min\ (t(n,H), t(n+4,H), t(n+8,H)) = -1</math>

: <math>\max\ (t(n,H), t(n+4,H), t(n+8,H)) = +1</math>

HSV to RGB

alt=|thumb|300x300px|Fig. 24. A graphical representation of RGB coordinates given values for HSV. This equation <math>V(1-S)= V - VS</math> shows origin of marked vertical axis values.

Given an HSV color with hue , saturation , and value , we can use the same strategy. First, we find chroma:

: <math>C = V \times S_V</math>

Then we can, again, find a point along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color):

: <math>H^\prime = \frac{H}{60^\circ}</math>

: <math>X = C \times (1 - |H^\prime \bmod 2 - 1|)</math>

: <math> (R_1, G_1, B_1) = \begin{cases}

(C, X, 0) &\text{if } 0 \leq H^\prime < 1 \\

(X, C, 0) &\text{if } 1 \leq H^\prime < 2 \\

(0, C, X) &\text{if } 2 \leq H^\prime < 3 \\

(0, X, C) &\text{if } 3 \leq H^\prime < 4 \\

(X, 0, C) &\text{if } 4 \leq H^\prime < 5 \\

(C, 0, X) &\text{if } 5 \leq H^\prime < 6

\end{cases}</math>

As before, when <math>H^\prime</math> is an integer, "neighboring" formulas would yield the same result.

Finally, we can find R, G, and B by adding the same amount to each component, to match value:

: <math>m = V - C</math>

: <math>(R, G, B) = (R_1 + m, G_1 + m, B_1 + m)</math>

HSV to RGB alternative

Given a color with hue <math>H \in [0^\circ,360^\circ]</math>, saturation <math>S=S_V \in [0,1]</math>, and value <math>V \in [0,1]</math>, first we define function :

: <math>f(n) = V - VS \max(0, \min(k, 4-k, 1))</math>

where <math>k,n \in \mathbb R_{\geq 0}</math> and:

: <math>k = \left(n+\frac{H}{60^\circ}\right) \bmod 6</math>

And output R,G,B values (from <math>[0,1]^3</math>) are:

: <math>(R,G,B) = (f(5), f(3), f(1))</math>

Above alternative equivalent formulas allow shorter implementation. In above formulas the <math>a\bmod b</math> returns also fractional part of module e.g. the formula <math> 7.4 \bmod 6 = 1.4</math>. The values of <math>k \in \mathbb R \land k \in [0,6)</math>. The base shape

: <math>t(n,H) = T(k) = \max(0, \min(k, 4-k, 1))</math>

is constructed as follows: <math>t_1 = \min(k,4-k)</math> is "triangle" for which non-negative values starts from k=0, highest point at k=2 and "ends" at k=4, then we change values bigger than one to one by <math>t_2 = \min(t_1,1) = \min(k,4-k,1)</math>, then change negative values to zero by <math>t = \max(t2,0)</math> – and we get (for <math>n=0</math>) something similar to green shape from Fig. 24 (which max value is 1 and min value is 0). The R,G,B functions of use this shape transformed in following way: modulo-shifted on (by ) (differently for R,G,B) scaled on (by <math>-VS</math>) and shifted on (by ). We observe following shape properties(Fig. 24 can help to get intuition about this):

: <math>t(n,H) = 1-t(n+3,H)</math>

: <math>\min(t(n,H), t(n+2,H), t(n+4,H)) = 0</math>

: <math>\max(t(n,H), t(n+2,H), t(n+4,H)) = 1</math>

HSI to RGB

Given an HSI color with hue , saturation , and intensity , we can use the same strategy, in a slightly different order:

: <math>H^\prime = \frac{H}{60^\circ}</math>

: <math>Z = 1 - |H^\prime \;\bmod 2 - 1|</math>

: <math>C = \frac{3 \cdot I \cdot S_I}{1 + Z}</math>

: <math>X = C \cdot Z</math>

Where <math>C</math> is the chroma.

: <math>(R_1, G_1, B_1) = \begin{cases}

(0, 0, 0) &\text{if } H \text{ is undefined} \\

(C, X, 0) &\text{if } 0 \leq H^\prime \leq 1 \\

(X, C, 0) &\text{if } 1 \leq H^\prime \leq 2 \\

(0, C, X) &\text{if } 2 \leq H^\prime \leq 3 \\

(0, X, C) &\text{if } 3 \leq H^\prime \leq 4 \\

(X, 0, C) &\text{if } 4 \leq H^\prime \leq 5 \\

(C, 0, X) &\text{if } 5 \leq H^\prime < 6

\end{cases}</math>

Overlap (when <math>H^\prime</math> is an integer) occurs because two ways to calculate the value are equivalent: <math>X = 0</math> or <math>X = C</math>, as appropriate.

Finally, we can find R, G, and B by adding the same amount to each component, to match lightness:

: <math>m = I \cdot (1 - S_I)</math>

: <math>(R, G, B) = (R_1 + m, G_1 + m, B_1 + m)</math>

Luma, chroma and hue to RGB

Given a color with hue , chroma , and luma , we can again use the same strategy. Since we already have H and C, we can straightaway find our point along the bottom three faces of the RGB cube:

: <math>\begin{align}

H^\prime &= \frac{H}{60^\circ} \\

X &= C \times (1 - |H^\prime \bmod 2 - 1|)

\end{align}</math>

: <math>(R_1, G_1, B_1) = \begin{cases}

(0, 0, 0) &\text{if } H \text{ is undefined} \\

(C, X, 0) &\text{if } 0 \leq H^\prime \leq 1 \\

(X, C, 0) &\text{if } 1 \leq H^\prime \leq 2 \\

(0, C, X) &\text{if } 2 \leq H^\prime \leq 3 \\

(0, X, C) &\text{if } 3 \leq H^\prime \leq 4 \\

(X, 0, C) &\text{if } 4 \leq H^\prime \leq 5 \\

(C, 0, X) &\text{if } 5 \leq H^\prime < 6

\end{cases}</math>

Overlap (when <math>H^\prime</math> is an integer) occurs because two ways to calculate the value are equivalent: <math>X = 0</math> or <math>X = C</math>, as appropriate.

Then we can find R, G, and B by adding the same amount to each component, to match luma:

: <math>m = Y^\prime_{601} - (0.30R_1 + 0.59G_1 + 0.11B_1)</math>

: <math>(R, G, B) = (R_1 + m, G_1 + m, B_1 + m)</math>

Interconversion

HSV to HSL

Given a color with hue <math>H_V \in [0^\circ,360^\circ)</math>, saturation <math>S_V \in [0,1]</math>, and value <math>V \in [0,1]</math>,

: <math>H_L = H_V</math>

: <math>S_L = \begin{cases}

0 & \text{if } L=0 \text{ or } L=1 \\

\frac{V-L}{\min(L,1-L)} & \text{otherwise} \\

\end{cases}</math>

: <math>L = V\left(1 - \frac{S_V}{2}\right)</math>

HSL to HSV

Given a color with hue <math>H_L \in [0^\circ,360^\circ)</math>, saturation <math>S_L \in [0,1]</math>, and luminance <math>L \in [0,1]</math>,

: <math>H_V = H_L</math>

: <math>S_V = \begin{cases}

0 & \text{if } V=0 \\

2\left(1-\frac{L}{V}\right) & \text{otherwise} \\

\end{cases}</math>

: <math>V = L+S_L\min(L,1-L)</math>

From RGB

This is a reiteration of the previous conversion.

Value must be in range <math>R, G, B \in [0,1]</math>.

With maximum component (i. e. value)

: <math>X_\text{max} := \max(R, G, B) =: V</math>

and minimum component

: <math>X_\text{min} := \min(R, G, B) = V-C</math>,

range (i. e. chroma)

: <math>C := X_\text{max} - X_\text{min} = 2(V-L) </math>

and mid-range (i. e. lightness)

: <math>L := \operatorname{mid}(R, G, B) = \frac{X_\text{max} + X_\text{min{2} = V-\frac{C}{2}</math>,

we get common hue:

: <math>H := \begin{cases}

0, & \text{if } C = 0 \\

60^\circ \cdot \left( \frac {G - B} {C} \mod 6 \right), & \text{if } V = R \\

60^\circ \cdot \left( \frac {B - R} {C} + 2 \right), & \text{if } V = G \\

60^\circ \cdot \left( \frac {R - G} {C} + 4 \right), & \text{if } V = B

\end{cases}</math>

and distinct saturations:

: <math>S_V := \begin{cases}

0, &\text{if } V=0\\

\frac{C}{V}, &{\text{otherwise

\end{cases}</math>

: <math>S_L := \begin{cases}

0, &\text{if }L=0\text{ or }L=1\\

\frac {C}{1-\left\vert 2V-C-1\right\vert}

=\frac{2(V-L)}{ 1-\left\vert 2L-1\right\vert}

=\frac{V-L}{\min(L,1-L)},

& \text{otherwise}

\end{cases}</math>

Swatches

Mouse over the swatches below to see the R, G, and B values for each swatch in a tooltip.

HSL

HSV

Notes

References

Bibliography

Agoston's book contains a description of HSV and HSL, and algorithms in pseudocode for converting to each from RGB, and back again.
This computer vision literature review briefly summarizes research in color image segmentation, including that using HSV and HSI representations.
This book doesn't discuss HSL or HSV specifically, but is one of the most readable and precise resources about current color science.
The standard computer graphics textbook of the 1990s, this tome has a chapter full of algorithms for converting between color models, in C.
Joblove and Greenberg's paper was the first describing the HSL model, which it compares to HSV.
This book only briefly mentions HSL and HSV, but is a comprehensive description of color order systems through history.
This paper explains how both HSL and HSV, as well as other similar models, can be thought of as specific variants of a more general "GLHS" model. Levkowitz and Herman provide pseudocode for converting from RGB to GLHS and back.
. Especially the sections about "Modern Color Models" and "Modern Color Theory". MacEvoy's extensive site about color science and paint mixing is one of the best resources on the web. On this page, he explains the color-making attributes, and the general goals and history of color order systems – including HSL and HSV – and their practical relevance to painters.
This self-published frequently asked questions page, by digital video expert Charles Poynton, explains, among other things, why in his opinion these models "are useless for the specification of accurate color", and should be abandoned in favor of more psychometrically relevant models.
This is the original paper describing the "hexcone" model, HSV. Smith was a researcher at NYIT's Computer Graphics Lab. He describes HSV's use in an early digital painting program.

External links

Demonstrative color conversion applet
HSV Colors by Hector Zenil, The Wolfram Demonstrations Project.
HSV to RGB by CodeBeautify.

Basic principle

Motivation

Formal derivation

Color-making attributes

Lightness

Saturation

Examples

Use in end-user software

Use in image analysis

Disadvantages

Other cylindrical-coordinate color models

Color conversion formulae

To RGB

HSL to RGB

HSL to RGB alternative

HSV to RGB

HSV to RGB alternative

HSI to RGB

Luma, chroma and hue to RGB

Interconversion

HSV to HSL

HSL to HSV

From RGB

Swatches

HSL

HSV

See also

Notes

References

Bibliography

External links