text:
HSL and HSV
From Wikipedia, the free encyclopedia
Jump to: navigation, search
HSL (hue, saturation, lightness) and HSV (hue, saturation, value) are two alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers to more closely align with the way human vision perceives color-making attributes. In these models, colors of each hue are arranged in a radial slice, around a central axis of neutral colors which ranges from black at the bottom to white at the top. The HSV representation models the way paints of different colors mix together, with the saturation dimension resembling various shades of brightly colored paint, and the value dimension resembling the mixture of those paints with varying amounts of black or white paint. The HSL model attempts to resemble more perceptual color models such as NCS or Munsell, placing fully saturated colors around a circle at a lightness value of 1⁄2, where a lightness value of 0 or 1 is fully black or white, respectively.
Contents
[hide]
1 Basic principle
2 Motivation
3 Formal derivation
3.1 Color-making attributes
3.2 General approach
3.3 Hue and chroma
3.4 Lightness
3.5 Saturation
3.6 Examples
4 Use in end-user software
5 Use in image analysis
6 Disadvantages
7 Other cylindrical-coordinate color models
8 Converting to RGB
8.1 From HSL
8.2 From HSV
8.3 From HSI
8.4 From luma/chroma/hue
9 Swatches
9.1 HSL
9.2 HSV
10 Notes
11 References
12 Bibliography
13 External links
Basic principle[edit]
Fig. 2a. HSL cylinder.
Fig. 2b. HSV cylinder.
HSL and HSV are both cylindrical geometries (fig. 2), 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 black at lightness 0 or value 0, the bottom, to white at lightness 1 or value 1, the top.
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.
Fig. 3a–b. If we plot hue and (a) HSL lightness or (b) HSV value against chroma rather than saturation, the resulting solid is a bicone or cone, respectively, not a cylinder. Such diagrams often claim to represent HSL or HSV directly, with the chroma dimension deceptively 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 a conic or biconic solid is drawn instead (fig. 3), with what this article calls chroma as its radial dimension, instead of saturation. 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]
Motivation[edit]
The HSL color space was invented in 1938 by Georges Valensi as a method to add color encoding to existing monochrome (i.e. only containing the L signal) broadcasts, allowing existing receivers to receive new color broadcasts (in black and white) without modification as the Luminance (black and white) signal is broadcast unmodified. It has been used in all major analog broadcast television encoding including NTSC, PAL and SECAM and all major digital broadcast systems and is the basis for composite video.[1][2]
Fig. 4. Painters long mixed colors by combining relatively bright pigments with black and white. Mixtures with white are called tints, mixtures with black are called shades, and mixtures with both are called tones. See Tints and shades.[3]
Fig. 5. This 1916 color model by German chemist Wilhelm Ostwald exemplifies the "mixtures with white and black" approach, organizing 24 "pure" colors into a hue circle, and colors of each hue into a triangle. The model thus takes the shape of a bicone.[4][5]
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.[6]
See also: Color theory, RGB color model, and RGB color space
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 (fig. 4). Furthermore, neither additive nor subtractive color models define color relationships the same way the human eye does.[C]
For example, imagine we have an RGB display whose color is controlled by three sliders ranging from 0–255, one controlling the intensity of each of the red, green, and blue primaries. If we begin with a relatively colorful orange , with sRGB values R = 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 decrease R by 31, increase G by 24, and increase B by 59, as pictured below.
In an attempt to accommodate more traditional and intuitive color mixing models, computer graphics pioneers at PARC and NYIT developed the HSV model 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 (fig. 1). 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 (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 described below.[10][11][12][13][14][15]
Formal derivation[edit]
Fig. 8. The geometric derivation of the cylindrical HSL and HSV representations of an RGB "colorcube".
Color-making attributes[edit]
See also: Color vision
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.[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 the perceived colors: red, yellow, green, and blue, or to a combination of two of them".[16]
Radiance (Le,Ω)
The radiant power of light passing through a particular surface per unit solid angle per unit projected area, measured in SI units in watt per steradian per square metre (W·sr−1·m−2).
Luminance (Y or Lv,Ω)
The radiance weighted by the effect of each wavelength on a typical human observer, measured in SI units in candela per square meter (cd/m2). Often the term luminance is used for the relative luminance, Y/Yn, where Yn is the luminance of the reference white point.
Luma (Y′)
The weighted sum of gamma-corrected R′, G′, and B′ values, and used in Y′CbCr, for JPEG compression and video transmission.
Brightness
The "attribute of a visual sensation according to which an area appears to emit more or less light".[16]
Lightness, value
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 and colorfulness are absolute measures, which usually describe the spectral distribution of light entering the eye, while lightness and chroma 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 different illumination. Saturation can be defined as either the ratio of colorfulness to brightness or that of chroma to lightness.
General approach[edit]
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 denoted R, 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.[3][11][12]
Hue and chroma[edit]
See also: Hue and Chrominance
Fig. 9. Both hue and chroma are defined based on the projection of the RGB cube onto a hexagon in the "chromaticity plane". Chroma is the relative size of the hexagon passing through a point, and hue is how far around that hexagon’s edge the point lies.
In each of our models, we calculate both hue and what this article will call chroma, 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, and project it onto the "chromaticity plane" 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 the vector to a point in the projection, with red at 0°, while chroma 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. The chroma 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 lengths OP/OP′, or alternately the ratio of the radii of the two hexagons. This ratio is the difference between the largest and smallest values among R, G, or B in a color. To make our definitions easier to write, we’ll define these maximum, minimum, and chroma component values as M, m, and C, respectively.[H]
M = max  ( R , G , B ) m = min  ( R , G , B ) C = M − m {\displaystyle {\begin{aligned}M&=\operatorname {max} (R,G,B)\\m&=\operatorname {min} (R,G,B)\\C&=M-m\end{aligned}}}
To understand why chroma can be written as M − m, notice that any neutral color, with R = G = B, projects onto the origin and so has 0 chroma. Thus if we add or subtract the same amount from all three of R, G, and B, we move vertically within our tilted cube, and do not change the projection. Therefore, any two colors (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 is M in the particular case of a color with a zero component, and M − m in general.
The hue 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 in degrees [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 written piecewise:[I]
H ′ = { u n d e f i n e d , if C = 0 G − B C mod 6 , if M = R B − R C + 2 , if M = G R − G C + 4 , if M = B H = 60 ∘ × H ′ {\displaystyle {\begin{aligned}H^{\prime }&={\begin{cases}\mathrm {undefined} ,&{\mbox{if }}C=0\\{\frac {G-B}{C}}\;{\bmod {6}},&{\mbox{if }}M=R\\{\frac {B-R}{C}}+2,&{\mbox{if }}M=G\\{\frac {R-G}{C}}+4,&{\mbox{if }}M=B\end{cases}}\\H&=60^{\circ }\times H^{\prime }\end{aligned}}}
Sometimes, neutral colors (i.e. with C = 0) are assigned a hue of 0° for convenience of representation.
Fig. 10. The definitions of hue and chroma in HSL and HSV have the effect of warping hexagons into circles.
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 the vector pointing to a color.
Fig. 11. Constructing rectangular chromaticity coordinates α and β, and then transforming those into hue H2 and chroma C2 yields slightly different values than computing hexagonal hue H and chroma C: compare the numbers in this diagram to those earlier in this section.
Sometimes for image analysis applications, this hexagon-to-circle transformation is skipped, and hue and chroma (we’ll denote these H2 and C2) 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]
α = 1 2 ( 2 R − G − B ) β = 3 2 ( G − B ) H 2 = atan2  ( β , α ) C 2 = α 2 + β 2 {\displaystyle {\begin{aligned}\alpha &=\textstyle {\frac {1}{2}}(2R-G-B)\\\beta &=\textstyle {\frac {\sqrt {3}}{2}}(G-B)\\H_{2}&=\operatorname {atan2} (\beta ,\alpha )\\C_{2}&={\sqrt {\alpha ^{2}+\beta ^{2}}}\end{aligned}}}
(The atan2 function, a "two-argument arctangent", computes the angle from a cartesian coordinate pair.)
Notice that these two definitions of hue (H and H2) nearly coincide, with a maximum difference between them for any color of about 1.12°—which occurs at twelve particular hues, for instance H = 13.38°, H2 = 12.26°—and with H = H2 for every multiple of 30°. The two definitions of chroma (C and C2) differ more substantially: they are equal at the corners of our hexagon, but at points halfway between two corners, such as H = H2 = 30°, we have C = 1, but C2 = √¾ ≈ 0.866, a difference of about 13.4%.
Lightness[edit]
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.
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 (fig. 12; three of these are also shown in fig. 8):
The simplest definition is just the average of the three components, in the HSI model called intensity (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]
I = 1 3 ( R + G + B ) {\displaystyle I=\textstyle {\frac {1}{3}}(R+G+B)\,\!}
In the HSV "hexcone" model, value is defined as the largest component of a color, our M 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 a hexagonal pyramid out of the RGB cube.[11]
V = M {\displaystyle V=M\,\!}
In the HSL "bi-hexcone" model, lightness is defined as the average of the largest and smallest color components (fig. 12c). 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.[12]
L = 1 2 ( M + m ) {\displaystyle L=\textstyle {\frac {1}{2}}(M+m)\,\!}
A more perceptually relevant alternative is to use luma, Y′, as a lightness dimension (fig. 12d). Luma is the weighted average of gamma-corrected R, G, and B, based on their contribution to perceived lightness, long used as the monochromatic dimension in color television broadcast. For the Rec. 709 primaries used in sRGB, Y′709 = 0.21R + 0.72G + 0.07B; for the Rec. 601 NTSC primaries, Y′601 ≈ 0.30R + 0.59G + 0.11B; for other primaries different coefficients should be used.[26][J]
Y 601 ′ = 0.299 R + 0.587 G + 0.114 B {\displaystyle Y_{601}^{\prime }=0.299R+0.587G+0.114B\,\!}
All four of these leave the neutral axis alone. That is, for colors with R = G = B, 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[edit]
Fig. 14a–d. In both HSL and HSV, saturation is simply the chroma scaled to fill the interval [0, 1] 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) model, not all combinations of lightness (or value) and chroma are meaningful: that is, half of the colors denotable using H ∈ [0°, 360°), C ∈ [0, 1], and V ∈ [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 ?[12]
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 attribute saturation in both cases (fig. 14). To calculate either, simply divide the chroma by the maximum chroma for that value or lightness.
S H S V = { 0 , if V = 0 C V , otherwise S H S L = { 0 , if L = 1 C 1 − | 2 L − 1 | , otherwise {\displaystyle {\begin{aligned}S_{HSV}&={\begin{cases}0,&{\mbox{if }}{V}=0\\{\frac {C}{V}},&{\mbox{otherwise}}\end{cases}}\\S_{HSL}&={\begin{cases}0,&{\mbox{if }}{L}=1\\{\frac {C}{1-|2L-1|}},&{\mbox{otherwise}}\end{cases}}\end{aligned}}}
Fig. 15a–b. In HSI, saturation, shown in the slice on the right, is roughly the chroma relative to lightness. Also common is a model with dimensions I, H2, C2, shown in the slice on the left. Notice that the hue in these slices is the same as the hue above, but H differs slightly from H2.
The HSI model commonly used for computer vision, which takes H2 as a hue dimension and the component average I ("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 the Use in image analysis section of this article.[28]
S H S I = { 0 , if I = 0 1 − m I , otherwise {\displaystyle S_{HSI}={\begin{cases}0,&{\mbox{if }}{I}=0\\1-{\frac {m}{I}},&{\mbox{otherwise}}\end{cases}}}
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 C2).
Examples[edit]
All parameter values shown below are in the interval [0, 1], except those for H and H2 which are in the interval [0°, 360°].[K]
Color
R
G
B
H
H2
C
C2
V
L
I
Y′601
SHSV
SHSL
SHSI
5000000000000000000♠#FFFFFF 1.000 1.000 1.000 n/a n/a 0.000 0.000 1.000 1.000 1.000 1.000 0.000 0.000 0.000
7000100000000000000♠#808080 0.500 0.500 0.500 n/a n/a 0.000 0.000 0.500 0.500 0.500 0.500 0.000 0.000 0.000
7000200000000000000♠#000000 0.000 0.000 0.000 n/a n/a 0.000 0.000 0.000 0.000 0.000 0.000 0.000 0.000 0.000
7000300000000000000♠#FF0000 1.000 0.000 0.000 5000000000000000000♠0.0° 5000000000000000000♠0.0° 1.000 1.000 1.000 0.500 0.333 0.299 1.000 1.000 1.000
7000400000000000000♠#BFBF00 0.750 0.750 0.000 7001600000000000000♠60.0° 7001600000000000000♠60.0° 0.750 0.750 0.750 0.375 0.500 0.664 1.000 1.000 1.000
7000500000000000000♠#008000 0.000 0.500 0.000 7002120000000000000♠120.0° 7002120000000000000♠120.0° 0.500 0.500 0.500 0.250 0.167 0.293 1.000 1.000 1.000
7000600000000000000♠#80FFFF 0.500 1.000 1.000 7002180000000000000♠180.0° 7002180000000000000♠180.0° 0.500 0.500 1.000 0.750 0.833 0.850 0.500 1.000 0.400
7000700000000000000♠#8080FF 0.500 0.500 1.000 7002240000000000000♠240.0° 7002240000000000000♠240.0° 0.500 0.500 1.000 0.750 0.667 0.557 0.500 1.000 0.250
7000800000000000000♠#BF40BF 0.750 0.250 0.750 7002300000000000000♠300.0° 7002300000000000000♠300.0° 0.500 0.500 0.750 0.500 0.583 0.457 0.667 0.500 0.571
7000900000000000000♠#A0A424 0.628 0.643 0.142 7001618000000000000♠61.8° 7001615000000000000♠61.5° 0.501 0.494 0.643 0.393 0.471 0.581 0.779 0.638 0.699
7001100000000000000♠#411BEA 0.255 0.104 0.918 7002251100000000000♠251.1° 7002250000000000000♠250.0° 0.814 0.750 0.918 0.511 0.426 0.242 0.887 0.832 0.756
7001110000000000000♠#1EAC41 0.116 0.675 0.255 7002134900000000000♠134.9° 7002133800000000000♠133.8° 0.559 0.504 0.675 0.396 0.349 0.460 0.828 0.707 0.667
7001120000000000000♠#F0C80E 0.941 0.785 0.053 7001495000000000000♠49.5° 7001505000000000000♠50.5° 0.888 0.821 0.941 0.497 0.593 0.748 0.944 0.893 0.911
7001130000000000000♠#B430E5 0.704 0.187 0.897 7002283700000000000♠283.7° 7002284800000000000♠284.8° 0.710 0.636 0.897 0.542 0.596 0.423 0.792 0.775 0.686
7001140000000000000♠#ED7651 0.931 0.463 0.316 7001143000000000000♠14.3° 7001132000000000000♠13.2° 0.615 0.556 0.931 0.624 0.570 0.586 0.661 0.817 0.446
7001150000000000000♠#FEF888 0.998 0.974 0.532 7001569000000000000♠56.9° 7001574000000000000♠57.4° 0.466 0.454 0.998 0.765 0.835 0.931 0.467 0.991 0.363
7001160000000000000♠#19CB97 0.099 0.795 0.591 7002162400000000000♠162.4° 7002163400000000000♠163.4° 0.696 0.620 0.795 0.447 0.495 0.564 0.875 0.779 0.800
7001170000000000000♠#362698 0.211 0.149 0.597 7002248300000000000♠248.3° 7002247300000000000♠247.3° 0.448 0.420 0.597 0.373 0.319 0.219 0.750 0.601 0.533
7001180000000000000♠#7E7EB8 0.495 0.493 0.721 7002240500000000000♠240.5° 7002240400000000000♠240.4° 0.228 0.227 0.721 0.607 0.570 0.520 0.316 0.290 0.135
Use in end-user software[edit]
See also: Color picker and Image editing
Fig 16a–g. By the 1990s, HSL and HSV color selection tools were ubiquitous. The screenshots above are taken from:
· (a) SGI IRIX 5, c. 1995;
· (b) Adobe Photoshop, c. 1990;
· (c) IBM OS/2 Warp 3, c. 1994;
· (d) Apple Macintosh System 7, c. 1996;
· (e) Fractal Design Painter, c. 1993;
· (f) Microsoft Windows 3.1, c. 1992;
· (g) NeXTSTEP, c. 1995.
These are undoubtedly based on earlier examples, stretching back to PARC and NYIT in the mid-1970s.[L]
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.[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-end frameworks. The CSS 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 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.[O]
Fig. 17. xv’s HSV-based color modifier.
Fig. 18. The hue/saturation tool in Photoshop 2.5, ca. 1992.
Fig. 19. Avid’s video color adjustment tool, based on HSL or a similar model.
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 (SHSV), 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.[P]
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, Paint Shop Pro) or HSV (e.g. GIMP) geometries instead.[Q]
Use in image analysis[edit]
See also: Computer vision and 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.[28]
For the most part, computer vision algorithms used on color images are straightforward extensions to algorithms designed for grayscale images, for instance k-means or fuzzy clustering of pixel colors, or canny edge detection. At the simplest, each color component is separately passed through the same algorithm. It is important, therefore, that the features of interest can be distinguished in the color dimensions used. Because the R, G, and B 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 called I, α, 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.[R][28][34][35][36]
Disadvantages[edit]
Fig 20a. The sRGB gamut mapped in CIELAB space. Notice that the lines pointing to the red, green, and blue primaries are not evenly spaced by hue angle, and are of unequal length. The primaries also have different L* values.
Fig 20b. The Adobe 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.[S]
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 (fig. 13). 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.
Fig. 13a. Color photograph (sRGB colorspace).
Fig. 13b. CIELAB L* (further transformed back to sRGB for consistent display).
Fig. 13c. Rec. 601 luma Y′.
Fig. 13d. Component average: "intensity" I.
Fig. 13e. HSV value V.
Fig. 13f. HSL lightness L.
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:
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.[37]
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 on the left (a) is the original photograph of a green turtle. In the middle 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 on the 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.
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.
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.[38] 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.[39]
Charles Poynton, digital video expert, lists the above problems with HSL and HSV in his Color 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 as PANTONE), or use perceptually-based systems like L*u*v* and L*a*b*, HSB and HLS should be abandoned.[40]
Other cylindrical-coordinate color models[edit]
Fig. 22. Runge’s Farbenkugel, 1810.
Fig. 23. Munsell’s balanced color sphere, 1900, from A Color Notation, 1905.
See also: Color solid
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. A pair of the most influential older models are Philipp Otto Runge’s 1810 Farbenkugel (color sphere), and the early-20th-century Munsell color system. Albert Munsell began with a spherical arrangement in his 1905 book A Color Notation, but he wished to properly separate color-making attributes into separate dimensions, which he called hue, value, and chroma, and after taking careful measurements of perceptual responses, he realized that no symmetrical shape would do, so he reorganized his system into a lumpy blob.[41][42][T]
Munsell’s system became extremely popular, the de facto reference for American color standards—used not only for specifying the color of paints and crayons, but also, e.g., electrical wire, beer, and soil color—because it was organized based on perceptual measurements, specified colors via an easily learned and systematic triple of numbers, because the color chips sold in the Munsell Book of Color covered a wide gamut and remained stable over time (rather than fading), and because it was effectively marketed by Munsell’s Company. In the 1940s, the Optical Society of America made extensive measurements, and adjusted the arrangement of Munsell colors, issuing a set of "renotations". The trouble with the Munsell system for computer graphics applications is that its colors are not specified via any set of simple equations, but only via its foundational measurements: effectively a lookup table. Converting from RGB ↔ Munsell requires interpolating between that table’s entries, and is extremely computationally expensive in comparison with converting from RGB ↔ HSL or RGB ↔ HSV which only requires a few simple arithmetic operations.[43][44][45][46]
In densitometry, a model quite similar to the hue defined above is used for describing colors of CMYK process inks. In 1953, Frank Preucil developed two geometric arrangements of hue, the "Preucil hue circle" and the "Preucil hue hexagon", analogous to our H and H2, respectively, but defined relative to idealized cyan, yellow, and magenta ink colors. The "Preucil hue error" of an ink indicates the difference in the "hue circle" between its color and the hue of the corresponding idealized ink color. The grayness of an ink is m/M, where m and M are the minimum and maximum among the amounts of idealized cyan, magenta, and yellow in a density measurement.[47]
The Swedish Natural Color System (NCS), widely used in Europe, takes a similar approach to the Ostwald bicone shown earlier. Because it attempts to fit color into a familiarly shaped solid based on "phenomenological" instead of photometric or psychological characteristics, it suffers from some of the same disadvantages as HSL and HSV: in particular, its lightness dimension differs from perceived lightness, because it forces colorful yellow, red, green, and blue into a plane.[48]
The International Commission on Illumination (CIE) developed the XYZ model for describing the colors of light spectra in 1931, but its goal was to match human visual metamerism, rather than to be perceptually uniform, geometrically. In the 1960s and 70s, attempts were made to transform XYZ colors into a more relevant geometry, influenced by the Munsell system. These efforts culminated in the 1976 CIELUV and CIELAB models. The dimensions of these models—(L*, u*, v*) and (L*, a*, b*), respectively—are cartesian, based on the opponent process theory of color, but both are also often described using polar coordinates—(L*, C*uv, h*uv) or (L*, C*ab, h*ab) and also HCL, where L* is lightness, C* is chroma, and h* is hue angle. Officially, both CIELAB and CIELUV were created for their color difference metrics ∆E*ab and ∆E*uv, particularly for use defining color tolerances, but both have become widely used as color order systems and color appearance models, including in computer graphics and computer vision. For example, gamut mapping in ICC color management is usually performed in CIELAB space, and Adobe Photoshop includes a CIELAB mode for editing images. CIELAB and CIELUV geometries are much more perceptually relevant than many others such as RGB, HSL, HSV, YUV/YIQ/YCbCr or XYZ, but are not perceptually perfect, and in particular have trouble adapting to unusual lighting conditions.[43][17][49][48][50][51][U]
The CIE’s most recent model, CIECAM02 (CAM stands for "color appearance model"), is more theoretically sophisticated and computationally complex than earlier models. Its aims are to fix several of the problems with models such as CIELAB and CIELUV, and to explain not only responses in carefully controlled experimental environments, but also to model the color appearance of real-world scenes. Its dimensions J (lightness), C (chroma), and h (hue) define a polar-coordinate geometry.[43][48]
Converting to RGB[edit]
To convert from HSL or HSV to RGB, we essentially invert the steps listed above (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 of R, G, and B to reach the proper lightness or value.[G]
From HSL[edit]
Given a color with hue H ∈ [0°, 360°], saturation SHSL ∈ [0, 1], and lightness L ∈ [0, 1], we first find chroma:
C = ( 1 − | 2 L − 1 | ) × S H S L {\displaystyle C={\begin{aligned}(1-\left\vert 2L-1\right\vert )\times S_{\mathit {HSL}}\end{aligned}}}
Then we can find a point (R1, G1, B1) 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):
H ′ = H 60 ∘ X = C × ( 1 − | H ′ mod 2 − 1 | ) {\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\X&=C\times (1-|H^{\prime }\;{\bmod {2}}-1|)\end{aligned}}}
( R 1 , G 1 , B 1 ) = { ( 0 , 0 , 0 ) if H is undefined ( C , X , 0 ) if 0 ≤ H ′ ≤ 1 ( X , C , 0 ) if 1 ≤ H ′ ≤ 2 ( 0 , C , X ) if 2 ≤ H ′ ≤ 3 ( 0 , X , C ) if 3 ≤ H ′ ≤ 4 ( X , 0 , C ) if 4 ≤ H ′ ≤ 5 ( C , 0 , X ) if 5 ≤ H ′ < 6 {\displaystyle (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}}}
Overlap (when H ′ {\displaystyle H^{\prime }} is an integer) occurs because two ways to calculate the value are equivalent: X = 0 {\displaystyle X=0} or X = C {\displaystyle X=C} , as appropriate.
Finally, we can find R, G, and B by adding the same amount to each component, to match lightness:
m = L − 1 2 C ( R , G , B ) = ( R 1 + m , G 1 + m , B 1 + m ) {\displaystyle {\begin{aligned}&m=L-\textstyle {\frac {1}{2}}C\\&(R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)\end{aligned}}}
From HSV[edit]
Fig. 24. A graphical representation of RGB coordinates given values for HSV.
Given an HSV color with hue H ∈ [0°, 360°], saturation SHSV ∈ [0, 1], and value V ∈ [0, 1], we can use the same strategy. First, we find chroma:
C = V × S H S V {\displaystyle C=V\times S_{\mathit {HSV}}\,\!}
Then we can, again, find a point (R1, G1, B1) 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):
H ′ = H 60 ∘ X = C × ( 1 − | H ′ mod 2 − 1 | ) {\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\X&=C\times (1-|H^{\prime }\;{\bmod {2}}-1|)\end{aligned}}}
( R 1 , G 1 , B 1 ) = { ( 0 , 0 , 0 ) if H is undefined ( C , X , 0 ) if 0 ≤ H ′ ≤ 1 ( X , C , 0 ) if 1 ≤ H ′ ≤ 2 ( 0 , C , X ) if 2 ≤ H ′ ≤ 3 ( 0 , X , C ) if 3 ≤ H ′ ≤ 4 ( X , 0 , C ) if 4 ≤ H ′ ≤ 5 ( C , 0 , X ) if 5 ≤ H ′ < 6 {\displaystyle (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}}}
Overlap (when H ′ {\displaystyle H^{\prime }} is an integer) occurs because two ways to calculate the value are equivalent: X = 0 {\displaystyle X=0} or X = C {\displaystyle X=C} , as appropriate.
Finally, we can find R, G, and B by adding the same amount to each component, to match value:
m = V − C ( R , G , B ) = ( R 1 + m , G 1 + m , B 1 + m ) {\displaystyle {\begin{aligned}&m=V-C\\&(R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)\end{aligned}}}
From HSI[edit]
Given an HSI color with hue H ∈ [0°, 360°], saturation SHSI ∈ [0, 1], and intensity I ∈ [0, 1], we can use the same strategy, in a slightly different order:
H ′ = H 60 ∘ Z = 1 − | H ′ mod 2 − 1 | C = 3 ⋅ I ⋅ S H S I 1 + Z X = C ⋅ Z {\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\Z&=1-|H^{\prime }\;{\bmod {2}}-1|\\C&={\frac {3\cdot I\cdot S_{HSI}}{1+Z}}\\X&=C\cdot Z\end{aligned}}}
Where C {\displaystyle C} is the chroma.
Then we can, again, find a point (R1, G1, B1) 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):
( R 1 , G 1 , B 1 ) = { ( 0 , 0 , 0 ) if H is undefined ( C , X , 0 ) if 0 ≤ H ′ ≤ 1 ( X , C , 0 ) if 1 ≤ H ′ ≤ 2 ( 0 , C , X ) if 2 ≤ H ′ ≤ 3 ( 0 , X , C ) if 3 ≤ H ′ ≤ 4 ( X , 0 , C ) if 4 ≤ H ′ ≤ 5 ( C , 0 , X ) if 5 ≤ H ′ < 6 {\displaystyle (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}}}
Overlap (when H ′ {\displaystyle H^{\prime }} is an integer) occurs because two ways to calculate the value are equivalent: X = 0 {\displaystyle X=0} or X = C {\displaystyle X=C} , as appropriate.
Finally, we can find R, G, and B by adding the same amount to each component, to match lightness:
m = I ⋅ ( 1 − S H S I ) ( R , G , B ) = ( R 1 + m , G 1 + m , B 1 + m ) {\displaystyle {\begin{aligned}&m=I\cdot (1-S_{HSI})\\&(R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)\end{aligned}}}
From luma/chroma/hue[edit]
Given a color with hue H ∈ [0°, 360°], chroma C ∈ [0, 1], and luma Y′601 ∈ [0, 1],[V] we can again use the same strategy. Since we already have H and C, we can straightaway find our point (R1, G1, B1) along the bottom three faces of the RGB cube:
H ′ = H 60 ∘ X = C × ( 1 − | H ′ mod 2 − 1 | ) {\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\X&=C\times (1-|H^{\prime }\;{\bmod {2}}-1|)\end{aligned}}}
( R 1 , G 1 , B 1 ) = { ( 0 , 0 , 0 ) if H is undefined ( C , X , 0 ) if 0 ≤ H ′ ≤ 1 ( X , C , 0 ) if 1 ≤ H ′ ≤ 2 ( 0 , C , X ) if 2 ≤ H ′ ≤ 3 ( 0 , X , C ) if 3 ≤ H ′ ≤ 4 ( X , 0 , C ) if 4 ≤ H ′ ≤ 5 ( C , 0 , X ) if 5 ≤ H ′ < 6 {\displaystyle (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}}}
Overlap (when H ′ {\displaystyle H^{\prime }} is an integer) occurs because two ways to calculate the value are equivalent: X = 0 {\displaystyle X=0} or X = C {\displaystyle X=C} , as appropriate.
Then we can find R, G, and B by adding the same amount to each component, to match luma:
m = Y 601 ′ − ( .30 R 1 + .59 G 1 + .11 B 1 ) ( R , G , B ) = ( R 1 + m , G 1 + m , B 1 + m ) {\displaystyle {\begin{aligned}&m=Y_{601}^{\prime }-(.30R_{1}+.59G_{1}+.11B_{1})\\&(R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)\end{aligned}}}
Swatches[edit]
Mouse over the swatches below to see the R, G, and B values for each swatch in a tooltip.
HSL[edit]
view
talk
edit
H = 180°
(Cyan)
H = 0°
(Red)
S
L
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 210°
(Blue-Cyan)
H = 30°
(Yellow-Red)
S
L
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 240°
(Blue)
H = 60°
(Yellow)
S
L
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 270°
(Magenta-Blue)
H = 90°
(Green-Yellow)
S
L
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 300°
(Magenta)
H = 120°
(Green)
S
L
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 330°
(Red-Magenta)
H = 150°
(Cyan-Green)
S
L
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
HSV[edit]
view
talk
edit
H = 180°
(Cyan)
H = 0°
(Red)
S
V
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 210°
(Blue-Cyan)
H = 30°
(Yellow-Red)
S
V
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 240°
(Blue)
H = 60°
(Yellow)
S
V
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 270°
(Magenta-Blue)
H = 90°
(Green-Yellow)
S
V
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 300°
(Magenta)
H = 120°
(Green)
S
V
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
H = 330°
(Red-Magenta)
H = 150°
(Cyan-Green)
S
V
1
¾
½
¼
0
¼
½
¾
1
1
⅞
¾
⅝
½
⅜
¼
⅛
0
Notes[edit]
Jump up ^ The Joblove and Greenberg (1978) paper first introducing HSL, they called HSL lightness "intensity", called HSL saturation "relative chroma", called HSV saturation "saturation" and called HSV value "value". They carefully and unambiguously described and compared three models: hue/chroma/intensity, hue/relative chroma/intensity, and hue/value/saturation. Unfortunately, later authors were less fastidious, and current usage of these terms is inconsistent and often misleading.
Jump up ^ The name hexcone for hexagonal pyramid was coined in Smith (1978), and stuck.
Jump up ^ For instance, a 1982 study by Berk, et al., found that users were better at describing colors in terms of HSL than RGB coordinates, after being taught both systems, but were much better still at describing them in terms of the natural-language CNS model (which uses names such as "very dark grayish yellow-green" or "medium strong bluish purple"). This shouldn’t be taken as gospel however: a 1987 study by Schwarz, et al., found that users could match colors using RGB controls faster than with HSL controls; a 1999 study by Douglas and Kirkpatrick found that the visual feedback in the user interface mattered more than the particular color model in use, for user matching speed.[7][8][9]
Jump up ^ "Clearly, if color appearance is to be described in a systematic, mathematical way, definitions of the phenomena being described need to be precise and universally agreed upon."[16]
Jump up ^ In Levkowitz and Herman’s formulation, R, G, and B stand for the voltages on the guns of a CRT display, which might have different maxima, and so their cartesian gamut could be a box of any unequal dimensions. Other definitions commonly use integer values in the range [0, 255], storing the value for each component in one byte. We define the RGB gamut to be a unit cube for convenience, because it simplifies and clarifies the math. Also, in general, HSL and HSV are today computed directly from gamma-corrected R′, G′, and B′—for instance in sRGB space—but, when the models were developed, might have been transformations of a linear RGB space. Early authors don’t address gamma correction at all. 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.
Jump up ^ Using the chroma here not only agrees with the original Joblove and Greenberg (1978) paper, but is also in the proper spirit of the psychometric definition of the term. Some models call this attribute saturation—for instance Adobe Photoshop’s "Saturation" blend mode—but such use is even more confusing than the use of the term in HSL or HSV, especially when two substantially different definitions are used side by side.
^ Jump up to: a b Most of the computer graphics papers and books discussing HSL or HSV have a formula or algorithm describing them formally. Our formulas which follow are some mix of those. See, for instance, Agoston (2005) or Foley (1995)
Jump up ^ Hanbury and Serra (2002) put a great deal of effort into explaining why what we call chroma here can be written as max(R, G, B) − min(R, G, B), and showing that this value is a seminorm. They reserve the name chroma for the Euclidean norm in the chromaticity plane (our C2), and call this hexagonal distance saturation instead, as part of their IHLS model
Jump up ^ In the following, the multiplication of hue by 60°—that is, 360°/6—can be seen as the hexagonal-geometry analogue of the conversion from radians to degrees, a multiplication by 360°/2π: the circumference of a unit circle is 2π; the circumference of a unit hexagon is 6.
Jump up ^ For a more specific discussion of the term luma, see Charles Poynton (2008). See also RGB color space#Specifications. Photoshop exclusively uses the NTSC coefficients for its "Luminosity" blend mode regardless of the RGB color space involved.[27]
Jump up ^ The first nine colors in this table were chosen by hand, and the last ten colors were chosen at random.
Jump up ^ See Smith (1978). Many of these screenshots were taken from the GUIdebook, and the rest were gathered from image search results.
Jump up ^ For instance, a tool in Illustrator CS4, and Adobe’s related web tool, Kuler, both allow users to define color schemes based on HSV relationships, but with a hue circle modified to better match the RYB model used traditionally by painters. The web tools ColorJack, Color Wizard, and ColorBlender all pick color schemes with reference to HSL or HSV.
Jump up ^ Try a web search for "«framework name» color picker" for examples for a given framework, or "JavaScript color picker" for general results.
Jump up ^ ArcGIS calls its map-symbol gradients "color ramps". Current versions of ArcGIS can use CIELAB instead for defining them.[30]
Jump up ^ For instance, the first version of Photoshop had an HSL-based tool; see "Photoshop hue/saturation" in the GUIdebook for screenshots.[31][32]
Jump up ^ Photoshop’s documentation explains that, e.g., "Luminosity: Creates a result color with the hue and saturation of the base color and the luminance of the blend color."[33]
Jump up ^ The Ohta et al. model has parameters I1 = (R + G + B)/3, I2 = (R − B)/2, I3 = (2G − R − B)/4. I1 is the same as our I, and I2 and I3 are similar to our β and α, respectively, except that (a) where α points in the direction of R in the "chromaticity plane", I3 points in the direction of G, and (b) the parameters have a different linear scaling which avoids the √3 of our β.
Jump up ^ Most of the disadvantages below are listed in Poynton (1997), though as mere statements, without examples.
Jump up ^ See also Fairchild (2005), and Munsell Color System and its references.
Jump up ^ See also CIELAB, CIELUV, Color difference, Color management, and their references.
Jump up ^ Some points in this cylinder fall out of gamut.
References[edit]
Jump up ^ FR patent 841335, Valensi, Georges, "Procédé de télévision en couleurs", published 1939-05-17, issued 1939-02-06
Jump up ^ US patent 2375966, Valensi, Georges, "System of television in colors", published 1945-05-15
^ Jump up to: a b Levkowitz and Herman (1993)
Jump up ^ Wilhelm Ostwald (1916). Die Farbenfibel. Leipzig.
Jump up ^ Wilhelm Ostwald (1918). Die Harmonie der Farben. Leipzig.
Jump up ^ US patent 4694286, Bergstedt, Gar A., "Apparatus and method for modifying displayed color images", published 1987-09-15, assigned to Tektronix, Inc
Jump up ^ Toby Berk; Arie Kaufman; Lee Brownston (August 1982). "A human factors study of color notation systems for computer graphics". Communications of the ACM. 25 (8): 547–550. doi:10.1145/358589.358606.
Jump up ^ Michael W. Schwarz; William B. Cowan; John C. Beatty (April 1987). "An experimental comparison of RGB, YIQ, LAB, HSV, and opponent color models". ACM Transactions on Graphics. 6 (2): 123–158. doi:10.1145/31336.31338.
Jump up ^ Sarah A. Douglas; Arthur E. Kirkpatrick (April 1999). "Model and representation: the effect of visual feedback on human performance in a color picker interface". ACM Transactions on Graphics. 18 (2): 96–127. doi:10.1145/318009.318011.
Jump up ^ Maureen C. Stone (August 2001). "A Survey of Color for Computer Graphics". Course at SIGGRAPH 2001.
^ Jump up to: a b c Smith (1978)
^ Jump up to: a b c d Joblove and Greenberg (1978)
Jump up ^ Ware Myers (July 1979). "Interactive Computer Graphics: Flying High-Part I". Computer. 12 (7): 8–17. doi:10.1109/MC.1979.1658808.
Jump up ^ N. Magnetat-Thalmann; N. Chourot; D. Thalmann (March 1984). "Colour Gradation, Shading and Texture Using a Limited Terminal". Computer Graphics Forum. 3: 83. doi:10.1111/j.1467-8659.1984.tb00092.x.
Jump up ^ Computer Graphics Staff (August 1979). "Status Report of the Graphics Standards Planning Committee". ACM SIGGRAPH Computer Graphics. 13 (3): 1. doi:10.1145/988497.988498.
^ Jump up to: a b c d e f g h Fairchild (2005), pp. 83–93
^ Jump up to: a b Kuehni (2003)
Jump up ^ Standard Terminology of Appearance E284. ASTM. 2009.
Jump up ^ International Lighting Vocabulary (4th ed.). CIE and IEC. 1987. ISBN 978-3-900734-07-7.
Jump up ^ Poynton (1997)
Jump up ^ Sharma, G. (2003). Digital Color Imaging Handbook. Boca Raton, FL: CRC Press. ISBN 0-8493-0900-X.
Jump up ^ Hanbury and Serra (2002)
^ Jump up to: a b Hanbury (2008)
Jump up ^ Patrick Lambert; Thierry Carron (1999). "Symbolic fusion of luminance-hue-chroma features for region segmentation". Pattern Recognition. 32 (11): 1857. doi:10.1016/S0031-3203(99)00010-2.
Jump up ^ Rafael C. Gonzalez and Richard Eugene Woods (2008). Digital Image Processing, 3rd ed. Upper Saddle River, NJ: Prentice Hall. ISBN 0-13-168728-X. pp. 407–413.
Jump up ^ Poynton (1997). "What weighting of red, green and blue corresponds to brightness?"
Jump up ^ Bruce Lindbloom (2001-09-25). http://lists.apple.com/archives/colorsync-users/2001/Sep/msg00488.html "Re: Luminosity channel...".
^ Jump up to: a b c d Cheng et al. (2001)
Jump up ^ Tantek Çelik, Chris Lilley, and L. David Baron (July 2008). "CSS3 Color Module Level 3".
Jump up ^ "Working with color ramps". Environmental Systems Research Institute. January 2008. Retrieved August 30, 2017.
Jump up ^ Bradley, John (1994). "The HSV Modification Tools". John's World of XV and Other Cool Stuff.
Jump up ^ Sinkel, Kiril (January 2010). "User Guide for Picture Window and Picture Window Pro Digital Light & Color" (PDF). Archived from the original (PDF) on 2014-05-12.
Jump up ^ "Blending Modes". Photoshop User Guide. Adobe Systems Incorporated. February 15, 2017.
Jump up ^ John Kender (1976). "Saturation, hue and normalized color". Carnegie Mellon University, Computer Science Dept. Pittsburgh, PA.
Jump up ^ Yu-Ichi Ohta; Takeo Kanade; Toshiyuki Sakai (1980). "Color information for region segmentation". Computer Graphics and Image Processing. 13 (3): 222. doi:10.1016/0146-664X(80)90047-7.
Jump up ^ Ffrank Perez; Christof Koch (1994). "Toward color image segmentation in analog VLSI: Algorithm and hardware". International Journal of Computer Vision. 12: 17. doi:10.1007/BF01420983.
Jump up ^ Brewer, Cynthia A. (1999). "Color Use Guidelines for Data Representation". Proceedings of the Section on Statistical Graphics. Alexandria, VA: American Statistical Association. pp. 55–60.
Jump up ^ Fisher, Nicholas (1996). Statistical Analysis of Circular Data. Cambridge, England: Cambridge University Press.
Jump up ^ Hanbury, Allan (2003). Circular Statistics Applied to Colour Images. 8th Computer Vision Winter Workshop. CiteSeerX 10.1.1.4.1381  .
Jump up ^ Poynton (1997). "What are HSB and HLS?"
Jump up ^ Runge, Phillipp Otto (1810). Die Farben-Kugel, oder Construction des Verhaeltnisses aller Farben zueinander [The Color Sphere, or Construction of the Relationship of All Colors to Each Other] (in German). Hamburg, Germany: Perthes.
Jump up ^ Albert Henry Munsell (1905). A Color Notation. Boston, MA: Munsell Color Company.
^ Jump up to: a b c Fairchild (2005)
Jump up ^ Landa, Edward; Fairchild, Mark (September–October 2005). "Charting Color from the Eye of the Beholder". American Scientist. 93 (5): 436.
Jump up ^ Dorothy Nickerson (1976). "History of the Munsell Color System". Color Research and Application. 1: 121–130.
Jump up ^ Sidney Newhall; Dorothy Nickerson; Deane Judd (1943). "Final Report of the OSA Subcommittee on the Spacing of the Munsell Colors". Journal of the Optical Society of America. 33 (7): 385. doi:10.1364/JOSA.33.000385.
Jump up ^ Frank Preucil (1953). "Color Hue and Ink Transfer—Their Relation to Perfect Reproduction". Proceedings of the 5th Annual Technical Meeting of TAGA. pp. 102–110.
^ Jump up to: a b c MacEvoy (2010)
Jump up ^ Robert Hunt (2004). The Reproduction of Colour. 6th ed. MN: Voyageur Press. ISBN 0-86343-368-5.
Jump up ^ "The Lab Color Mode in Photoshop". Adobe Systems. January 2007. Archived from the original on 2008-12-07.
Jump up ^ Steven K. Shevell (2003) The Science of Color. 2nd ed. Elsevier Science & Technology. ISBN 0-444-51251-9. https://books.google.com/books?id=G1TC1uXb7awC&pg=PA201 pp. 202–206
Bibliography[edit]
Agoston, Max K. (2005). Computer Graphics and Geometric Modeling: Implementation and Algorithms. London: Springer. pp. 300–306. ISBN 1-85233-818-0. Agoston’s book contains a description of HSV and HSL, and algorithms in pseudocode for converting to each from RGB, and back again.
Cheng, Heng-Da; Jiang, Xihua; Sun, Angela; Wang, Jingli (2001). "Color image segmentation: Advances and prospects". Pattern Recognition. 34 (12): 2259. doi:10.1016/S0031-3203(00)00149-7. This computer vision literature review briefly summarizes research in color image segmentation, including that using HSV and HSI representations.
Fairchild, Mark D. (2005). Color Appearance Models (2nd ed.). Addison-Wesley. This book doesn’t discuss HSL or HSV specifically, but is one of the most readable and precise resources about current color science.
Foley, J. D.; et al. (1995). Computer Graphics: Principles and Practice (2nd ed.). Redwood City, CA: Addison-Wesley. ISBN 0-201-84840-6. The standard computer graphics textbook of the 1990s, this tome has a chapter full of algorithms for converting between color models, in C.
Hanbury, Allan; Serra, Jean (December 2002). A 3D-polar Coordinate Colour Representation Suitable for Image Analysis. Pattern Recognition and Image Processing Group Technical Report 77. Vienna, Austria: Vienna University of Technology.
Hanbury, Allan (2008). "Constructing cylindrical coordinate colour spaces" (PDF). Pattern Recognition Letters. 29 (4): 494. doi:10.1016/j.patrec.2007.11.002.
Joblove, George H.; Greenberg, Donald (August 1978). "Color spaces for computer graphics". Computer Graphics. 12 (3): 20–25. doi:10.1145/965139.807362. Joblove and Greenberg’s paper was the first describing the HSL model, which it compares to HSV.
Kuehni, Rolf G. (2003). Color Space and Its Divisions: Color Order from Antiquity to the present. New York: Wiley. ISBN 978-0-471-32670-0. This book only briefly mentions HSL and HSV, but is a comprehensive description of color order systems through history.
Levkowitz, Haim; Herman, Gabor T. (1993). "GLHS: A Generalized Lightness, Hue and Saturation Color Model". CVGIP: Graphical Models and Image Processing. 55 (4): 271–285. doi:10.1006/cgip.1993.1019. 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.
MacEvoy, Bruce (January 2010). "Color Vision". handprint.com. . 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.
Poynton, Charles (1997). "Frequently Asked Questions About Color". poynton.com. 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.
Poynton, Charles (2008). "YUV and luminance considered harmful". poynton.com. Retrieved August 30, 2017.
Smith, Alvy Ray (August 1978). "Color gamut transform pairs". Computer Graphics. 12 (3): 12–19. doi:10.1145/965139.807361. 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[edit]
Demonstrative color conversion applet
HSV Colors by Hector Zenil, The Wolfram Demonstrations Project.
HSV to RGB by CodeBeautify.
[hide]
v
t
e
Color space
List of color spaces
Color models
CAM
CIECAM02
iCAM
CIE
CIEXYZ
CIELAB
CIECAM02
CIELUV
Yuv
CIEUVW
CIE RGB
RGB
RGB color space
sRGB
rg chromaticity
Adobe
Wide-gamut
ProPhoto
scRGB
DCI-P3
Rec. 709
Rec. 2020
Rec. 2100
YUV
YUV
PAL
YDbDr
SECAM
PAL-N
YIQ
NTSC
YCbCr
Rec. 601
Rec. 709
Rec. 2020
Rec. 2100
ICtCp
YPbPr
xvYCC
YCoCg
Other
CcMmYK
CMYK
Coloroid
LMS
Hexachrome
HSL, HSV
HCL
Imaginary color
OSA-UCS
PCCS
RG
RYB
Color systems
and standards
ACES
ANPA
Colour Index International
CI list of dyes
DIC
Federal Standard 595
HKS
ICC profile
ISCC–NBS
Munsell
NCS
Ostwald
Pantone
RAL
list
For the vision capacities of organisms or machines, see Color vision.
Retrieved from "https://en.wikipedia.org/w/index.php?title=HSL_and_HSV&oldid=837740010"
Categories:
Color space
Hidden categories:
CS1 German-language sources (de)
Navigation menu
Personal tools
Not logged in
Talk
Contributions
Create account
Log in
Namespaces
Article
Talk
Variants
Views
Read
Edit
View history
More
Search
Navigation
Main page
Contents
Featured content
Current events
Random article
Donate to Wikipedia
Wikipedia store
Interaction
Help
About Wikipedia
Community portal
Recent changes
Contact page
Tools
What links here
Related changes
Upload file
Special pages
Permanent link
Page information
Wikidata item
Cite this page
Print/export
Create a book
Download as PDF
Printable version
In other projects
Wikimedia Commons
Languages
Azərbaycanca
Čeština
Deutsch
Esperanto
Français
Italiano
Қазақша
Lietuvių
اردو
Tiếng Việt
粵語
中文
5 more
Edit links
This page was last edited on 22 April 2018, at 18:59.
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc., a non-profit organization.
Privacy policy
About Wikipedia
Disclaimers
Contact Wikipedia
Developers
Cookie statement
Mobile view
Enable previews

value: mw-page-base noprint

value: mw-head-base noprint

value: firstHeading firstHeading en

value: siteSub noprint

value: jump-to-nav mw-jump

tag: sub

tag: span

attr: role tabindex class

value: button 0 togglelink

attr: alt src width height srcset data-file-width data-file-height

value:
/wiki/Cone_(geometry)
mw-redirect
Cone (geometry)

value: Several paint mixing terms can be arranged into a triangular arrangement: the left edge of the triangle shows white at its top and black at its bottom with gray between the two, each in its respective oval. A pure color (in this case, a bright blue-green) lies at the right corner of the triangle. On the edge between the pure color and black is a shade (a darker blue-green), between the pure color and white is a tint (a lighter, faded blue-green), and a tone lies in the middle of the triangle (a muted blue-green).

value:
/wiki/Color_circle
mw-redirect
Color circle

value: The RGB cube has black at its origin, and the three dimensions R, G, and B pointed in orthogonal directions away from black. The corner in each of those directions is the respective primary color (red, green, or blue), while the corners further away from black are combinations of two primaries (red plus green makes yellow, red plus blue makes magenta, green plus blue makes cyan). At the cube’s corner farthest from the origin lies white. Any point in the cube describes a particular color within the gamut of RGB.

value: The same image, with a portion removed for clarity.

value: In classic patent application style, this is a black-and-white diagram with the patent name, inventor name, and patent number listed at the top, shaded by crosshatching. This diagram shows a three-dimensional view of Tektronix’s biconic HSL geometry, made up of horizontal circular slices along a vertical axis expanded for ease of viewing. Within each circular slice, saturation goes from zero at the center to one at the margins, while hue is an angular dimension, beginning at blue with hue zero, through red with hue 120 degrees and green with hue 240 degrees, and back to blue.

value: 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.

value: International Commission on Illumination

value:
/wiki/Luminance_(relative)
mw-redirect
Luminance (relative)

value:
/wiki/Lightness_(color)
mw-redirect
Lightness (color)

value: When an RGB cube, tilted so that its white corner rests vertically above its black corner, is projected into the plane perpendicular to that neutral axis, it makes the shape of a hexagon, with red, yellow, green, cyan, blue, and magenta arranged counterclockwise at its corners. This projection defines the hue and chroma of any color, as described in the caption and article text.

attr: columnalign rowspacing columnspacing displaystyle

value: right left right left right left right left right left right left

value: 0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em

value: vertical-align: -4.005ex; width:19.85ex; height:9.176ex;

value: vertical-align: -8.171ex; width:33.874ex; height:17.509ex;

value: Pictured at left is the hexagonal projection shown earlier. At right, each side of the hexagon has been changed into a 60° arc of a circle with the same radius.

value: Instead of measuring hue and chroma with reference to the hexagonal edge of the projection of the RGB cube into the plane perpendicular to its neutral axis, we can define chromaticity coordinates alpha and beta in the plane—with alpha pointing in the direction of red, and beta perpendicular to it—and then define hue H2 and chroma C2 as the polar coordinates of these. That is, the tangent of hue is beta over alpha, and chroma squared is alpha squared plus beta squared.

value: vertical-align: -7.505ex; width:22.501ex; height:16.176ex;

value: 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.

value: {\displaystyle I=\textstyle {\frac {1}{3}}(R+G+B)\,\!}

value: vertical-align: -1.338ex; margin-right: -0.387ex; width:19.16ex; height:3.676ex;

value: vertical-align: -0.338ex; margin-right: -0.387ex; width:7.715ex; height:2.176ex;

value: {\displaystyle L=\textstyle {\frac {1}{2}}(M+m)\,\!}

value: vertical-align: -1.171ex; margin-right: -0.387ex; width:15.859ex; height:3.509ex;

value: vertical-align: -1.005ex; margin-right: -0.387ex; width:34.46ex; height:2.843ex;

value: vertical-align: -6.505ex; width:32.355ex; height:14.176ex;

value: vertical-align: -2.505ex; width:29.426ex; height:6.176ex;

value:
width:90px; font-size: smaller;
thumbcaption

value:
width:200px; font-size: smaller;
thumbcaption

value:
/wiki/Avid_Technology
mw-redirect
Avid Technology

value:
wikitable
float:right; margin:0.8em 0 0 1.0em;

value:
/wiki/Corel_Paint_Shop_Pro
mw-redirect
Corel Paint Shop Pro

value:
/wiki/Segmentation_(image_processing)
mw-redirect
Segmentation (image processing)

value:
/wiki/Object_recognition
mw-redirect
Object recognition

value:
/wiki/Absolute_color_space
mw-redirect
Absolute color space

value: A full-color image shows a high-contrast and quite dramatic scene of a fire breather with a large orange-yellow flame extending from his lips. He wears dark but colorful orange-red clothing.

value: A grayscale image showing the CIELAB lightness component of the photograph appears to be a faithful rendering of the scene: it looks roughly like a black-and-white photograph taken on panchromatic film would look, with clear detail in the flame, which is much brighter than the man's outfit or the background.

value: A grayscale image showing the luma appears roughly similar to the CIELAB lightness image, but is a bit brighter in areas which were originally very colorful.

value: A grayscale image showing the component average (HSI intensity) of the photograph is much a less convincing facsimile of the color photograph, with reduced contrast, especially with its flame darker than in the original.

value: A grayscale image showing the HSV value component of the photograph leaves the flame completely white (in photographer's parlance, "blown out"), and the man’s clothing much too bright.

value: A grayscale image showing the HSL lightness component of the photograph renders the flame, as approximately middle gray, and ruins the dramatic effect of the original by radically reducing its contrast.

value:
/wiki/Green_turtle
mw-redirect
Green turtle

value: Edit section: Other cylindrical-coordinate color models

value:
/wiki/Optical_Society_of_America
mw-redirect
Optical Society of America

value:
/wiki/Gamut_mapping
mw-redirect
Gamut mapping

value: vertical-align: -0.838ex; width:27.143ex; height:2.843ex;

value: vertical-align: -3.671ex; width:32.63ex; height:8.509ex;

value: vertical-align: -9.671ex; width:46.033ex; height:20.509ex;

value: vertical-align: -0.338ex; width:2.788ex; height:2.509ex;

value: vertical-align: -0.338ex; width:6.241ex; height:2.176ex;

value: vertical-align: -0.338ex; width:6.845ex; height:2.176ex;

value: vertical-align: -2.838ex; width:40.119ex; height:6.843ex;

value: {\displaystyle C=V\times S_{\mathit {HSV}}\,\!}

value: vertical-align: -0.671ex; margin-right: -0.387ex; width:14.903ex; height:2.509ex;

value: vertical-align: -2.338ex; width:40.119ex; height:5.843ex;

value: vertical-align: -8.171ex; width:26.214ex; height:17.509ex;

value: vertical-align: -0.338ex; width:1.766ex; height:2.176ex;

value: vertical-align: -2.505ex; width:40.119ex; height:6.176ex;

value: vertical-align: -2.293ex; margin-bottom: -0.212ex; width:40.119ex; height:6.176ex;

value:
float: right; padding-right: 1em;
plainlinks hlist navbar

value: background:linear-gradient(to top right,#eaecf0 49.5%,#aaa 49.5%,#aaa 50.5%,#eaecf0 50.5%);line-height:1;

value: background-color: #eeeeee; padding: 1em; padding: 1em;

value: background-color: #eeeeee; padding: 1em;

value:
/wiki/Euclidean_norm
mw-redirect
Euclidean norm

value:
nofollow
http://www.guidebookgallery.org/
external text

value:
nofollow
http://www.colorjack.com/sphere/
external text

value:
nofollow
http://www.colorblender.com/
external text

value:
/wiki/Munsell_Color_System
mw-redirect
Munsell Color System

value: -moz-column-width: 45em; -webkit-column-width: 45em; column-width: 45em; list-style-type: upper-alpha;

value:
nofollow
external text
//doi.org/10.1145%2F358589.358606

value:
nofollow
external text
//doi.org/10.1145%2F31336.31338

value:
nofollow
external text
//doi.org/10.1145%2F318009.318011

value:
nofollow
external text
//doi.org/10.1109%2FMC.1979.1658808

value:
nofollow
external text
//doi.org/10.1145%2F988497.988498

value:
nofollow
external text
http://www.astm.org/Standards/E284.htm

value:
nofollow
external text
//doi.org/10.1007%2FBF01420983

attr: alt src title width height srcset data-file-width data-file-height

value:
nofollow
external text
//doi.org/10.1364%2FJOSA.33.000385

value:
nofollow
external text
//doi.org/10.1145%2F965139.807362

value:
nofollow
external text
//doi.org/10.1006%2Fcgip.1993.1019

value:
nofollow
external text
http://www.poynton.com/ColorFAQ.html

value:
nofollow
external text
//doi.org/10.1145%2F965139.807361

value:
/wiki/Newspaper_Association_of_America
mw-redirect
Newspaper Association of America

value:
/wiki/Template:Color_vision
mw-redirect
Template:Color vision

value: nowraplinks hlist collapsible expanded navbox-inner

value: Category:CS1 German-language sources (de)

value: Discussion about edits from this IP address [ctrl-alt-n]

value: A list of edits made from this IP address [ctrl-alt-y]

value: You are encouraged to create an account and log in; however, it is not mandatory

value: You're encouraged to log in; however, it's not mandatory. [ctrl-alt-o]

value:
/wiki/HSL_and_HSV
View the content page [ctrl-alt-c]
c

value: Discussion about the content page [ctrl-alt-t]

value: p-namespaces navigation vectorTabs p-namespaces-label

value:
p-variants
navigation
vectorMenu emptyPortlet
p-variants-label

value: Past revisions of this page [ctrl-alt-h]

value: p-views navigation vectorTabs p-views-label

value:
p-cactions
navigation
vectorMenu emptyPortlet
p-cactions-label

value:
mw-wiki-logo
/wiki/Main_Page
Visit the main page

value:
/wiki/Main_Page
Visit the main page [ctrl-alt-z]
z

value: Featured content – the best of Wikipedia

value: Find background information on current events

value:
/wiki/Special:Random
Load a random article [ctrl-alt-x]
x

value: portal navigation p-navigation p-navigation-label

value: portal navigation p-wikibase-otherprojects p-wikibase-otherprojects-label

value:
https://az.wikipedia.org/wiki/HSB
HSB – Azerbaijani
az
az
interlanguage-link-target

value:
https://cs.wikipedia.org/wiki/HSV
HSV – Czech
cs
cs
interlanguage-link-target

value:
interlanguage-link interwiki-cs
display: none;

value:
interlanguage-link interwiki-eo
display: none;

value: Түс-қанақтылық-жарықтық моделі – Kazakh

value:
interlanguage-link interwiki-kk
display: none;

value:
https://lt.wikipedia.org/wiki/ACC
ACC – Lithuanian
lt
lt
interlanguage-link-target

value:
interlanguage-link interwiki-lt
display: none;

value: ایچ ایس ایل اور ایچ ایس وی – Urdu

value:
interlanguage-link interwiki-zh-yue
display: none;

value: All languages (initial selection from common choices by you and others)

value: mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-HSL_and_HSV rootpage-HSL_and_HSV skin-vector action-view