HSL andHSV are the two most commoncylindrical-coordinate representations of points in anRGB color model. The two representations rearrange the geometry of RGB in an attempt to be more intuitive andperceptually relevant than thecartesian (cube) representation. Developed in the 1970s forcomputer graphics applications, HSL and HSV are used today incolor pickers, inimage editing software, and less commonly inimage analysis andcomputer vision.

HSL stands forhue,saturation, andlightness, and is often also calledHLS. HSV stands forhue,saturation, andvalue, and is also often calledHSB (B forbrightness). A third model, common in computer vision applications, isHSI, forhue,saturation, andintensity. 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, seebelow.)

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 blueprimaries of the device or of the particular RGB space, and on thegamma 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.^[1]

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 asCIELAB orCIECAM02 are said to better achieve these goals.

Fig. 2a. HSL cylinder.

Fig. 2b. HSV cylinder.

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

In both geometries, theadditive primary andsecondary colors – red,yellow, green,cyan, blue andmagenta – and linear mixtures between adjacent pairs of them, sometimes calledpure 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-calledshades – leaves saturation unchanged. In HSL, saturation is also unchanged bytinting with white, and only mixtures with both black and white – calledtones – have saturation less than 1. In HSV, tinting alone reduces saturation.

Fig. 3a–b. If we plot hue and (a) HSL lightness or (b) HSV value against chroma (range of RGB values) rather than saturation (chroma over maximum chroma for that slice), the resulting solid is abicone orcone, respectively, not a cylinder. Such diagrams often claim to represent HSL or HSV directly, with the chroma dimension confusingly labeled "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 aconic orbiconic solid is drawn instead (fig. 3), with what this article callschroma as its radial dimension (equal to therange 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.^[A]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" (fig. 8).^[B]

Fig. 4. Painters long mixed colors by combining relatively bright pigments with black and white. Mixtures with white are calledtints, mixtures with black are calledshades, and mixtures with both are calledtones. SeeTints and shades.^[2]

Fig. 5. This 1916 color model by German chemistWilhelm Ostwald exemplifies the "mixtures with white and black" approach, organizing 24 "pure" colors into ahue circle, and colors of each hue into a triangle. The model thus takes the shape of a bicone.^[3][4]

Fig. 6a. The RGB gamut can be arranged in a cube.

Fig. 6b. The same image, with a portion removed for clarity.

Fig. 7. Tektronix graphics terminals used the earliest commercial implementation of HSL, in 1979. This diagram, from a patent filed in 1983, shows the bicone geometry underlying the model.^[5]

Most televisions, computer displays, and projectors produce colors by combining red, green, and blue light in varying intensities – the so-calledRGBadditiveprimary colors. The resulting mixtures inRGB color space can reproduce a wide variety of colors (called agamut); 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 withsubtractive color mixing of paints or traditional artists' models based on tints and shades (fig. 4). Furthermore, neither additive nor subtractive color models define color relationships the same way thehuman eye does.^[C]

For example, imagine we have an RGB display whose color is controlled by threesliders ranging from0–255, one controlling the intensity of each of the red, green, and blue primaries. If we begin with a relatively colorfulorange , withsRGB valuesR = 217,G = 118,B = 33, and want to reduce its colorfulness by half to a less saturated orange , we would need to drag the sliders to decreaseR by 31, increaseG by 24, and increaseB by 59, as pictured below.

Beginning in the 1950s,color television broadcasts used acompatible 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.^[9]

In an attempt to accommodate more traditional and intuitive color mixing models, computer graphics pioneers atPARC andNYIT introduced the HSV model for computer display technology in the mid-1970s, formally described byAlvy Ray Smith^[10] in the August 1978 issue ofComputer Graphics. In the same issue, Joblove and Greenberg^[11] described the HSL model – whose dimensions they labeledhue,relative chroma, andintensity – and compared it to HSV (fig. 1). Their model was based more upon how colors are organized and conceptualized inhuman 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, atSIGGRAPH,Tektronix introduced graphics terminals using HSL for color designation, and the Computer Graphics Standards Committee recommended it in their annual status report (fig. 7). 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 describedbelow.^{[12][13][14][15]}

The dimensions of the HSL and HSV geometries – simple transformations of the not-perceptually-based RGB model – are not directly related to thephotometric color-making attributes of the same names, as defined by scientists such as theCIE orASTM. Nonetheless, it is worth reviewing those definitions before leaping into the derivation of our models.^[D] For the definitions of color-making attributes which follow, see:^{[16][17][18][19][20][21]}

Hue

The "attribute of a visual sensation according to which an area appears to be similar to one of theperceived colors: red, yellow, green, and blue, or to a combination of two of them".^[16]

Radiance (L_e,Ω)

Theradiant power of light passing through a particular surface per unitsolid angle per unit projected area, measured inSI units inwatt persteradian persquare metre (W·sr⁻¹·m⁻²).

Luminance (Y orL_v,Ω)

The radiance weighted by the effect of each wavelength on a typical human observer, measured in SI units incandela per square meter (cd/m²). Often the termluminance is used for therelative luminance,Y/Y_n, whereY_n is the luminance of the referencewhite point.

Luma (Y′)

The weighted sum ofgamma-correctedR′,G′, andB′ values, and used inY′CbCr, forJPEG compression and video transmission.

Brightness (or value)

The "attribute of a visual sensation according to which an area appears to emit more or less light".^[16]

Lightness

The "brightness relative to the brightness of a similarly illuminated white".^[16]

Colorfulness

The "attribute of a visual sensation according to which the perceived color of an area appears to be more or less chromatic".^[16]

Chroma

The "colorfulness relative to the brightness of a similarly illuminated white".^[16]

Saturation

The "colorfulness of a stimulus relative to its own brightness".^[16]

Brightness andcolorfulness are absolute measures, which usually describe thespectral distribution of light entering the eye, whilelightness andchroma are measured relative to some white point, and are thus often used for descriptions of surface colors, remaining roughly constant even as brightness and colorfulness change with differentillumination.Saturation can be defined as either the ratio of colorfulness to brightness, or that of chroma to lightness.

HSL, HSV, and related models can be derived via geometric strategies, or can be thought of as specific instances of a "generalized LHS model". The HSL and HSV model-builders took an RGB cube – with constituent amounts of red, green, and blue light in a color denotedR,G,B∈[0, 1]^[E] – 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.^[2][10][11]

In each of our models, we calculate bothhue and what this article will callchroma, after Joblove and Greenberg (1978), in the same way – that is, the hue of a color has the same numerical values in all of these models, as does its chroma. If we take our tilted RGB cube, andproject it onto the "chromaticityplane"perpendicular to the neutral axis, our projection takes the shape of a hexagon, with red, yellow, green, cyan, blue, and magenta at its corners (fig. 9).Hue is roughly the angle of thevector to a point in the projection, with red at 0°, whilechroma is roughly the distance of the point from the origin.^[F][G]

More precisely, both hue and chroma in this model are defined with respect to the hexagonal shape of the projection. Thechroma is the proportion of the distance from the origin to the edge of the hexagon. In the lower part of the adjacent diagram, this is the ratio of lengthsOP/OP′, or alternatively the ratio of the radii of the two hexagons. This ratio is the difference between the largest and smallest values amongR,G, orB in a color. To make our definitions easier to write, we'll define these maximum, minimum, and chroma component values asM,m, andC, respectively.^[H]

${\displaystyle M=max(R,G,B)}$

${\displaystyle m=min(R,G,B)}$

${\displaystyle C=\mathrm{range}(R,G,B)=M-m}$

These operations do not require R, G and B values to be normalized to a specific range (e.g. a range of 0–1 works as well as a range of 0–255).

To understand why chroma can be written asM −m, notice that any neutral color, withR =G =B, projects onto the origin and so has 0 chroma. Thus if we add or subtract the same amount from all three ofR,G, andB, we move vertically within our tilted cube, and do not change the projection. Therefore, any two colors of(R,G,B) and(R −m,G −m,B −m) project on the same point, and have the same chroma. The chroma of a color with one of its components equal to zero(m = 0) is simply the maximum of the other two components. This chroma isM in the particular case of a color with a zero component, andM −m in general.

Thehue is the proportion of the distance around the edge of the hexagon which passes through the projected point, originally measured on the range[0, 1] but now typically measured indegrees[0°, 360°). For points which project onto the origin in the chromaticity plane (i.e., grays), hue is undefined. Mathematically, this definition of hue is writtenpiecewise:^[I]

${\displaystyle H={60}^{\circ }\times H^{\prime }}$

Sometimes, neutral colors (i.e. withC = 0) are assigned a hue of 0° for convenience of representation.

These definitions amount to a geometric warping of hexagons into circles: each side of the hexagon is mapped linearly onto a 60° arc of the circle (fig. 10). After such a transformation, hue is precisely the angle around the origin and chroma the distance from the origin: the angle and magnitude of thevector pointing to a color.

Sometimes for image analysis applications, this hexagon-to-circle transformation is skipped, andhue andchroma (we'll denote theseH₂ andC₂) are defined by the usual cartesian-to-polar coordinate transformations (fig. 11). The easiest way to derive those is via a pair of cartesian chromaticity coordinates which we'll callα andβ:^[22][23][24]

${\displaystyle \alpha =R-G\cdot \cos ({60}^{\circ })-B\cdot \cos ({60}^{\circ })=\frac{1}{2}(2R-G-B)}$

${\displaystyle \beta =G\cdot \sin ({60}^{\circ })-B\cdot \sin ({60}^{\circ })=\frac{\sqrt{3}}{2}(G-B)}$

${\displaystyle H_2=\mathrm{atan2}(\beta ,\alpha )}$

${\displaystyle C_2=\mathrm{gmean}(\alpha ,\beta )=\sqrt{{\alpha }^2+{\beta }^2}}$

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

Notice that these two definitions of hue (H andH₂) nearly coincide, with a maximum difference between them for any color of about 1.12° – which occurs at twelve particular hues, for instanceH = 13.38°,H₂ = 12.26° – and withH =H₂ for every multiple of 30°. The two definitions of chroma (C andC₂) differ more substantially: they are equal at the corners of our hexagon, but at points halfway between two corners, such asH =H₂ = 30°, we haveC = 1, but$C_2=\sqrt{\frac{3}{4}}\approx 0.866,$ a difference of about 13.4%.

While the definition ofhue is relatively uncontroversial – it roughly satisfies the criterion that colors of the same perceived hue should have the same numerical hue – the definition of alightness orvalue dimension is less obvious: there are several possibilities depending on the purpose and goals of the representation. Here are four of the most common (fig. 12; three of these are also shown infig. 8):

• The simplest definition is just thearithmetic mean, i.e. average, of the three components, in the HSI model calledintensity (fig. 12a). 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.^[23][25]

  ${\displaystyle I=\mathrm{avg}(R,G,B)=\frac{1}{3}(R+G+B)}$

• In the HSV "hexcone" model,value is defined as the largest component of a color, ourM above (fig. 12b). This places all three primaries, and also all of the "secondary colors" – cyan, yellow, and magenta – into a plane with white, forming ahexagonal pyramid out of the RGB cube.^[10]

  ${\displaystyle V=max(R,G,B)=M}$

• In the HSL "bi-hexcone" model,lightness is defined as the average of the largest and smallest color components (fig. 12c), i.e. themid-range of the RGB components. This definition also puts the primary and secondary colors into a plane, but a plane passing halfway between white and black. The resulting color solid is a double-cone similar to Ostwald's,shown above.^[11]

  ${\displaystyle L=\mathrm{mid}(R,G,B)=\frac{1}{2}(M+m)}$

• A more perceptually relevant alternative is to useluma,Y′, as a lightness dimension (fig. 12d). Luma is theweighted average of gamma-correctedR,G, andB, based on their contribution to perceived lightness, long used as the monochromatic dimension in color television broadcast. ForsRGB, theRec. 709 primaries yieldY′₇₀₉, digitalNTSC usesY′₆₀₁ according toRec. 601 and some other primaries are also in use which result in different coefficients.^[26][J]

  ${\displaystyle Y_{\text{601}}^{\prime }=0.299\cdot R+0.587\cdot G+0.114\cdot B}$ (SDTV)

  ${\displaystyle Y_{\text{240}}^{\prime }=0.212\cdot R+0.701\cdot G+0.087\cdot B}$(Adobe)

  ${\displaystyle Y_{\text{709}}^{\prime }=0.2126\cdot R+0.7152\cdot G+0.0722\cdot B}$(HDTV)

  ${\displaystyle Y_{\text{2020}}^{\prime }=0.2627\cdot R+0.6780\cdot G+0.0593\cdot B}$(UHDTV, HDR)

All four of these leave the neutral axis alone. That is, for colors withR =G =B, any of the four formulations yields a lightness equal to the value ofR,G, orB.

For a graphical comparison, seefig. 13 below.

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 usingH ∈ [0°, 360°),C ∈ [0, 1], andV ∈ [0, 1] 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 ?^[11]

To solve problems such as these, the HSL and HSV models scale the chroma so that it always fits into the range[0, 1] for every combination of hue and lightness or value, calling the new attributesaturation in both cases (fig. 14). To calculate either, simply divide the chroma by the maximum chroma for that value or lightness.

The HSI model commonly used for computer vision, which takesH₂ as a hue dimension and the component averageI ("intensity") as a lightness dimension, does not attempt to "fill" a cylinder by its definition of saturation. Instead of presenting color choice or modification interfaces to end users, the goal of HSI is to facilitate separation of shapes in an image. Saturation is therefore defined in line with the psychometric definition: chroma relative to lightness (fig. 15). See theUse in image analysis section of this article.^[28]

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 wordsaturation is also often used for one of the measurements we call chroma above (C orC₂).

All parameter values shown below are given as values in theinterval[0, 1], except those forH andH₂, which are in the interval[0°, 360°).^[K]

The original purpose of HSL and HSV and similar models, and their most common current application, is incolor 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 thetop 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.^[M]

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-endframeworks. TheCSS 3 specification allows web authors to specify colors for their pages directly with HSL coordinates.^[N][29]

HSL and HSV are sometimes used to define gradients fordata visualization, as in maps or medical images. For example, the popularGIS programArcGIS historically applied customizable HSV-based gradients to numerical geographical data.^[O]

Fig. 17.xv's HSV-based color modifier.

Fig. 18. The hue/saturation tool inPhotoshop 2.5, ca. 1992.

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 lumadefined 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, theUnix image viewer and color editorxv allowed six user-definable hue (H) ranges to be rotated and resized, included adial-like control for saturation (S_HSV), and acurves-like interface for controlling value (V) – see fig. 17. The image editorPicture 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.^[P]

Video editors also use these models. For example, bothAvid andFinal 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,Paint Shop Pro) or HSV geometries instead.^[Q][R]

HSL, HSV, HSI, or related models are often used incomputer vision andimage analysis forfeature detection orimage segmentation. The applications of such tools include object detection, for instance inrobot vision;object recognition, for instance offaces,text, orlicense plates;content-based image retrieval; andanalysis of medical images.^[28]

For the most part, computer vision algorithms used on color images are straightforward extensions to algorithms designed forgrayscale images, for instancek-means orfuzzy clustering of pixel colors, orcannyedge detection. At the simplest, each color component is separately passed through the same algorithm. It is important, therefore, that thefeatures of interest can be distinguished in the color dimensions used. Because theR,G, andB components of an object's color in a digital image are all correlated with the amount of light hitting the object, and therefore with each other, image descriptions in terms of those components make object discrimination difficult. Descriptions in terms of hue/lightness/chroma or hue/lightness/saturation are often more relevant.^[28]

Starting in the late 1970s, transformations like HSV or HSI were used as a compromise between effectiveness for segmentation and computational complexity. They can be thought of as similar in approach and intent to the neural processing used by human color vision, without agreeing in particulars: if the goal is object detection, roughly separating hue, lightness, and chroma or saturation is effective, but there is no particular reason to strictly mimic human color response. John Kender's 1976 master's thesis proposed the HSI model. Ohta et al. (1980) instead used a model made up of dimensions similar to those we have calledI,α, andβ. In recent years, such models have continued to see wide use, as their performance compares favorably with more complex models, and their computational simplicity remains compelling.^{[S][28][36][37][38]}

Fig 20a. ThesRGB gamut mapped in CIELAB space. Notice that the lines pointing to the red, green, and blue primaries are not evenly spaced byhue angle, and are of unequal length. The primaries also have differentL* values.

Fig 20b. TheAdobe RGB gamut mapped in CIELAB space. Also notice that these two RGB spaces have different gamuts, and thus will have different HSL and HSV representations.

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.^[T]

HSL and HSV are simple transformations of RGB which preserve symmetries in the RGB cube unrelated to human perception, such that itsR,G, andB 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 asCIELAB (seebelow), 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 notabsolute 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 thegamma 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 (fig. 13). The original is in the sRGB colorspace. CIELABL* is a CIE-defined achromatic lightness quantity (dependent solely on the perceptually achromatic luminanceY, but not the mixed-chromatic componentsX orZ, 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 equivalentlyL*) and is influenced by the colorimetric chromaticity (x,y, or equivalently,a*,b* of CIELAB). HSLL and HSVV, by contrast, diverge substantially from perceptual lightness.

Fig. 13a. Color photograph (sRGB colorspace).

Fig. 13b. CIELABL* (further transformed back to sRGB for consistent display).

Fig. 13c. Rec. 601 lumaY'.

Fig. 13d. Component average: "intensity"I.

Fig. 13e. HSV valueV.

Fig. 13f. HSL lightnessL.

Though none of the dimensions in these spaces match their perceptual analogs, thevalue of HSV and thesaturation 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 theAmerican Statistical Association:

Computer science offers a few poorer cousins to these perceptual spaces that may also turn up in your software interface, such as HSV and HLS. They are easy mathematical transformations of RGB, and they seem to be perceptual systems because they make use of the hue–lightness/value–saturation terminology. But take a close look; don't be fooled. Perceptual color dimensions are poorly scaled by the color specifications that are provided in these and some other systems. For example, saturation and lightness are confounded, so a saturation scale may also contain a wide range of lightnesses (for example, it may progress from white to green which is a combination of both lightness and saturation). Likewise, hue and lightness are confounded so, for example, a saturated yellow and saturated blue may be designated as the same 'lightness' but have wide differences in perceived lightness. These flaws make the systems difficult to use to control the look of a color scheme in a systematic manner. If much tweaking is required to achieve the desired effect, the system offers little benefit over grappling with raw specifications in RGB or CMY.^[39]

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 (fig. 21), the image (a) is the original photograph of agreen turtle. In the image (b), we have rotated the hue (H) of each color by−30°, 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.

Fig. 21a. Color photograph.

Fig. 21b. HSL/HSV hue of each color shifted by−30°.

Fig. 21c. Hue shifted but CIELAB lightness (L*) kept as in the original.

Fig. 21d. Hue shifted in CIELch(ab) color space by−30°.

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 ofcircular statistics.^[40] Furthermore, hue is defined piecewise, in 60° chunks, where the relationship of lightness, value, and chroma toR,G, andB depends on the hue chunk in question. This definition introduces discontinuities, corners which can plainly be seen in horizontal slices of HSL or HSV.^[41]

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

HSB and HLS were developed to specify numerical Hue, Saturation and Brightness (or Hue, Lightness and Saturation) in an age when users had to specify colors numerically. The usual formulations of HSB and HLS are flawed with respect to the properties of color vision. Now that users can choose colors visually, or choose colors related to other media (such asPANTONE), or use perceptually-based systems likeL*u*v* andL*a*b*, HSB and HLS should be abandoned.^[42]

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.

To convert from HSL or HSV to RGB, we essentially invert the steps listedabove (as before,R,G,B∈[0, 1]). 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 ofR,G, andB to reach the proper lightness or value.^[G]

Given a color with hueH ∈ [0°, 360°), saturationS_L ∈ [0, 1], and lightnessL ∈ [0, 1], we first find chroma:

${\displaystyle C=(1-\left|2L-1\right|)\times S_L}$

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

${\displaystyle H^{\mathrm{\prime }}=\frac{H}{{60}^{\circ }}}$

${\displaystyle X=C\times (1-|H^{\mathrm{\prime }}mod2-1|)}$

In the above equation, the notation${\displaystyle H^{\mathrm{\prime }}mod2}$ refers to the remainder of theEuclidean division of${\displaystyle H^{\mathrm{\prime }}}$ by 2.${\displaystyle H^{\mathrm{\prime }}}$ is not necessarily an integer.

When${\displaystyle H^{\mathrm{\prime }}}$ is an integer, the "neighbouring" formula would yield the same result, as${\displaystyle X=0}$ or${\displaystyle X=C}$, as appropriate.

Finally, we can findR,G, andB by adding the same amount to each component, to match lightness:

${\displaystyle m=L-\frac{C}{2}}$

${\displaystyle (R,G,B)=(R_1+m,G_1+m,B_1+m)}$

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${\displaystyle H\in [0^{\circ },{360}^{\circ }]}$, saturation${\displaystyle S=S_L\in [0,1]}$, and lightness${\displaystyle L\in [0,1]}$, we first define the function:

${\displaystyle f(n)=L-amax(-1,min(k-3,9-k,1))}$

where${\displaystyle k,n\in {\mathbb{R}}_{\ge 0}}$ and:

${\displaystyle k=\left(n+\frac{H}{{30}^{\circ }}\right)mod12}$

${\displaystyle a=S_{L}min(L,1-L)}$

And output R,G,B values (from${\displaystyle [0,1{]}^3}$) are:

${\displaystyle (R,G,B)=(f(0),f(8),f(4))}$

The above alternative formulas allow for shorter implementations. In the above formulas the${\displaystyle amodb}$ operation also returns the fractional part of the module e.g.${\displaystyle 7.4mod6=1.4}$, and${\displaystyle k\in [0,12)}$.

The base shape${\displaystyle T(k)=t(n,H)=max(min(k-3,9-k,1),-1)}$ is constructed as follows:${\displaystyle t_1=min(k-3,9-k)}$ 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${\displaystyle t_2=min(t_1,1)=min(k-3,9-k,1)}$ we change values bigger than 1 to equal 1. Then by${\displaystyle t=max(t_2,-1)}$ 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 ofH use this shape transformed in the following way: modulo-shifted onX (byn) (differently for R,G,B) scaled onY (by${\displaystyle -a}$) and shifted onY (byL).

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

${\displaystyle t(n,H)=-t(n+6,H)}$

${\displaystyle min(t(n,H),t(n+4,H),t(n+8,H))=-1}$

${\displaystyle max(t(n,H),t(n+4,H),t(n+8,H))=+1}$

Given an HSV color with hueH ∈ [0°, 360°), saturationS_V ∈ [0, 1], and valueV ∈ [0, 1], we can use the same strategy. First, we find chroma:

${\displaystyle C=V\times S_V}$

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

${\displaystyle H^{\mathrm{\prime }}=\frac{H}{{60}^{\circ }}}$

${\displaystyle X=C\times (1-|H^{\mathrm{\prime }}mod2-1|)}$

As before, when${\displaystyle H^{\mathrm{\prime }}}$ is an integer, "neighbouring" formulas would yield the same result.

Finally, we can findR,G, andB by adding the same amount to each component, to match value:

${\displaystyle m=V-C}$

${\displaystyle (R,G,B)=(R_1+m,G_1+m,B_1+m)}$

Given a color with hue${\displaystyle H\in [0^{\circ },{360}^{\circ }]}$, saturation${\displaystyle S=S_V\in [0,1]}$, and value${\displaystyle V\in [0,1]}$, first we define function :

${\displaystyle f(n)=V-VSmax(0,min(k,4-k,1))}$

where${\displaystyle k,n\in {\mathbb{R}}_{\ge 0}}$ and:

${\displaystyle k=\left(n+\frac{H}{{60}^{\circ }}\right)mod6}$

And output R,G,B values (from${\displaystyle [0,1{]}^3}$) are:

${\displaystyle (R,G,B)=(f(5),f(3),f(1))}$

Above alternative equivalent formulas allow shorter implementation. In above formulas the${\displaystyle amodb}$ returns also fractional part of module e.g. the formula${\displaystyle 7.4mod6=1.4}$. The values of${\displaystyle k\in \mathbb{R}\wedge k\in [0,6)}$. The base shape

${\displaystyle t(n,H)=T(k)=max(0,min(k,4-k,1))}$

is constructed as follows:${\displaystyle t_1=min(k,4-k)}$ 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${\displaystyle t_2=min(t_1,1)=min(k,4-k,1)}$, then change negative values to zero by${\displaystyle t=max(t2,0)}$ – and we get (for${\displaystyle n=0}$) something similar to green shape from Fig. 24 (which max value is 1 and min value is 0). The R,G,B functions ofH use this shape transformed in following way: modulo-shifted onX (byn) (differently for R,G,B) scaled onY (by${\displaystyle -VS}$) and shifted onY (byV). We observe following shape properties(Fig. 24 can help to get intuition about this):

${\displaystyle t(n,H)=1-t(n+3,H)}$

${\displaystyle min(t(n,H),t(n+2,H),t(n+4,H))=0}$

${\displaystyle max(t(n,H),t(n+2,H),t(n+4,H))=1}$

Given an HSI color with hueH ∈ [0°, 360°), saturationS_I ∈ [0, 1], and intensityI ∈ [0, 1], we can use the same strategy, in a slightly different order:

${\displaystyle H^{\mathrm{\prime }}=\frac{H}{{60}^{\circ }}}$

${\displaystyle Z=1-|H^{\mathrm{\prime }}mod2-1|}$

${\displaystyle C=\frac{3\cdot I\cdot S_I}{1+Z}}$

${\displaystyle X=C\cdot Z}$

Where${\displaystyle C}$ is the chroma.

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

Overlap (when${\displaystyle H^{\mathrm{\prime }}}$ is an integer) occurs because two ways to calculate the value are equivalent:${\displaystyle X=0}$ or${\displaystyle X=C}$, as appropriate.

Finally, we can findR,G, andB by adding the same amount to each component, to match lightness:

${\displaystyle m=I\cdot (1-S_I)}$

${\displaystyle (R,G,B)=(R_1+m,G_1+m,B_1+m)}$

Given a color with hueH ∈ [0°, 360°), chromaC ∈ [0, 1], and lumaY′₆₀₁ ∈ [0, 1],^[U] we can again use the same strategy. Since we already haveH andC, we can straightaway find our point(R₁,G₁,B₁) along the bottom three faces of the RGB cube:

Overlap (when${\displaystyle H^{\mathrm{\prime }}}$ is an integer) occurs because two ways to calculate the value are equivalent:${\displaystyle X=0}$ or${\displaystyle X=C}$, as appropriate.

Then we can findR,G, andB by adding the same amount to each component, to match luma:

${\displaystyle m=Y_{601}^{\mathrm{\prime }}-(0.30R_1+0.59G_1+0.11B_1)}$

${\displaystyle (R,G,B)=(R_1+m,G_1+m,B_1+m)}$

Given a color with hue${\displaystyle H_V\in [0^{\circ },{360}^{\circ })}$, saturation${\displaystyle S_V\in [0,1]}$, and value${\displaystyle V\in [0,1]}$,

${\displaystyle H_L=H_V}$

${\displaystyle L=V\left(1-\frac{S_V}{2}\right)}$

Given a color with hue${\displaystyle H_L\in [0^{\circ },{360}^{\circ })}$, saturation${\displaystyle S_L\in [0,1]}$, and luminance${\displaystyle L\in [0,1]}$,

${\displaystyle H_V=H_L}$

${\displaystyle V=L+S_{L}min(L,1-L)}$

This is a reiteration of the previous conversion.

Value must be in range${\displaystyle R,G,B\in [0,1]}$.

With maximum component (i. e. value)

${\displaystyle X_{\text{max}}:=max(R,G,B)=:V}$

and minimum component

${\displaystyle X_{\text{min}}:=min(R,G,B)=V-C}$,

range (i. e. chroma)

${\displaystyle C:=X_{\text{max}}-X_{\text{min}}=2(V-L)}$

and mid-range (i. e. lightness)

${\displaystyle L:=\mathrm{mid}(R,G,B)=\frac{X_{\text{max}}+X_{\text{min}}}{2}=V-\frac{C}{2}}$,

we get common hue:

and distinct saturations:

Mouse over theswatches below to see theR,G, andB values for each swatch in atooltip.

view talk edit
H = 180°   H = 0° ${\displaystyle \bcancel{{}_{\mathit{L}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0	H = 210°   H = 30° ${\displaystyle \bcancel{{}_{\mathit{L}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0
H = 240°   H = 60° ${\displaystyle \bcancel{{}_{\mathit{L}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0	H = 270°   H = 90° ${\displaystyle \bcancel{{}_{\mathit{L}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0
H = 300°   H = 120° ${\displaystyle \bcancel{{}_{\mathit{L}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0	H = 330°   H = 150° ${\displaystyle \bcancel{{}_{\mathit{L}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0

view talk edit
H = 180°   H = 0° ${\displaystyle \bcancel{{}_{\mathit{V}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0	H = 210°   H = 30° ${\displaystyle \bcancel{{}_{\mathit{V}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0
H = 240°   H = 60° ${\displaystyle \bcancel{{}_{\mathit{V}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0	H = 270°   H = 90° ${\displaystyle \bcancel{{}_{\mathit{V}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0
H = 300°   H = 120° ${\displaystyle \bcancel{{}_{\mathit{V}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0	H = 330°   H = 150° ${\displaystyle \bcancel{{}_{\mathit{V}}{}^{\mathit{S}}}}$ 1 3⁄4 1⁄2 1⁄4 0 1⁄4 1⁄2 3⁄4 1 1                   7⁄8                   3⁄4                   5⁄8                   1⁄2                   3⁄8                   1⁄4                   1⁄8                   0