# HSV color space

 This article is the result of a recent merger from HSV color space, and is currently undergoing massive cleanup of content and organization. Discussion is welcome on the talk page.

Graphical depiction of HSV
HSL arranged as a double-cone

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

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

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

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

The HSV model was created in 1978 by Alvy Ray Smith.

## Motivation

Artists sometimes prefer to use the HSV color model over alternative models such as RGB or CMYK, because of its similarities to the way humans tend to perceive color. RGB and CMYK are additive and subtractive models, respectively, defining color in terms of the combination of primaries, whereas HSV encapsulates information about a color in terms that are more familiar to humans: What color is it? How vibrant is it? How light or dark is it? The HSL color space is similar and arguably even better than HSV in this respect.

## Usage

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

The conical representation of the HSV model is well-suited to visualizing the entire HSV color space in a single object.

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

The cylindrical representation of the HSV model might be considered the most mathematically accurate model of the HSV color space.

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

## Comparison of HSL and HSV

HSL is similar to HSV. For some people, HSL better reflects the intuitive notion of "saturation" and "lightness" as two independent parameters, but for others its definition of saturation is wrong, as for example a very pastel, almost white color can be defined as fully saturated in HSL. It might be controversial, though, whether HSV or HSL is more suitable for use in human user interfaces.

The CSS3 specification from the W3C states, "Advantages of HSL are that it is symmetrical to lightness and darkness (which is not the case with HSV for example)…" This means that:
• In HSL, the Saturation component always goes from fully saturated color to the equivalent gray (in HSV, with V at maximum, it goes from saturated color to white, which may be considered counterintuitive).
• The Lightness in HSL always spans the entire range from black through the chosen hue to white (in HSV, the V component only goes half that way, from black to the chosen hue).
In software, a hue-based color model (HSV or HSL) is usually presented to the user in the form of a linear or circular hue chooser and a two-dimensional area (usually a square or a triangle) where you can choose saturation and value/lightness for the selected hue. With this representation, the difference between HSV and HSL is irrelevant. However, many programs also let you select a color via linear sliders or numeric entry fields, and for those controls, usually either HSL or HSV (not both) are used. HSV is traditionally more common. Here are some examples:

## Comparison with other color models

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

## Formal specifications

An RGB image of the John Moulton Barn at the base of the Teton Range, along with its H, S and L components.
An image, along with its H, S and V components. Compare the dark on the left side of the barn roof and the white of the snow; though one is much brighter than the other, these near-neutral colors both have low saturation. Notice that the green grass is highly saturated and of moderate brightness, while the blue of the mountains has consistent hue but widely varying brightness and saturation, and the sky has constant hue and brightness but varying saturation.
An illustration of the relationship between the “hue” of colors with maximal saturation in HSV and HSL with their corresponding RGB coordinates.
HSL and HSV are defined mathematically by a transformation of the R, G, and B coordinates of colors in RGB space.

### Conversion from RGB to HSL or HSV

Let (r, g, b) be the red, green, and blue coordinates of a color, respectively, whose values are real numbers between 0 and 1. Let max equal the greatest of r, g, and b. Let min equal the least of those values. To find (h, s, l) values in HSL space, where h ∈ [0, 360) is the hue angle in degrees, and s, l ∈ [0,1] are the saturation and lightness, compute:

The value of h is generally normalized to lie between 0 and 360Â°, and h = 0 is used when max = min (that is, for grays) instead of leaving h undefined.

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

### Conversion from HSL to RGB

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

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

When s ≠ 0, the following procedure can be used:[1]

(h normalized to be in the range [0,1))

For each color vector Color = (ColorR, ColorG, ColorB) = (r, g, b),

### Conversion from HSV to RGB

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

For each color vector (r, g, b),

## Terminology

The terms attributed to the "L" component of HSL color space may be misleading since they have little to do with color science definitions of the terms.

## Examples

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

RGB HSL HSV Result
(1, 0, 0)(0Â°, 1, 0.5)(0Â°, 1, 1)
(0.5, 1, 0.5)(120Â°, 1, 0.75)(120Â°, 0.5, 1)
(0, 0, 0.5)(240Â°, 1, 0.25)(240Â°, 1, 0.5)

## Notes

1. ^ Foley, James D.; Andries van Dam (1982). Fundamentals of Interactive Computer Graphics. Boston, MA, USA: Addison-Wesley. ISBN 0-201-14468-9.
2. ^ Edward H. Adelson (2000). Lightness Perception and Lightness Illusions – Some terminology. Massachusetts Institute of Technology. Retrieved on 2007-07-17.

## References

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

RGB color model is an additive model in which red, green, and blue (often used in additive light models) are combined in various ways to reproduce other colors. The name of the model and the abbreviation ‘RGB’ come from the three primary colors, red, green, and blue and
Hue is one of the three main attributes of perceived color, in addition to lightness and chroma (or colorfulness). Hue is also one of the three dimensions in some colorspaces along with saturation, and brightness (also known as lightness or value).
colorfulness, chroma, and saturation are related concepts referring to the intensity of a specific color. More technically, colorfulness is the perceived difference between the color of some stimulus and gray, chroma
Lightness is a property of a color, or a dimension of a color space, that correlates with how bright or luminous a color is. In terms of the Lab color space, lightness is defined in a way to reflect the subjective brightness perception of a color for humans.
cylinder is a quadric surface, with the following equation in Cartesian coordinates:

This equation is for an elliptic cylinder, a generalization of the ordinary, circular cylinder (a = b).
Black is the color of objects that do not reflect light in any part of the visible spectrum.

Scientifically, a black object absorbs all the colors of the visible spectrum and reflects none of them.
White is the combination of all the colors of the visible light spectrum.[1]. It is sometimes described as an achromatic color, like black.

White is technically achromatic, and not a color, since it has no hue.
Grey or gray (see spelling differences) describes any color between black and white. Collectively, white, black, and the range of greys between them are known as achromatic colors or neutral colors. Greys are seen commonly in nature and fashion.
cone is a three-dimensional geometric shape consisting of all line segments joining a single point (the apex or vertex) to every point of a two-dimensional figure (the base).
Red is any of a number of similar colors evoked by light consisting predominantly of the longest wavelengths of light discernible by the human eye, in the wavelength range of roughly 625–750 nm.
Green is a color, the perception of which is evoked by light having a spectrum dominated by energy with a wavelength of roughly 520–570 nm. It is considered one of the additive primary colors.
The term blue may refer to any of a number of similar colours. The sensation of blue is made by light having a spectrum dominated by energy in the wavelength range of about 440–490 nm.
sRGB is a standard RGB (Red Green Blue) color space created cooperatively by HP and Microsoft for use on monitors, printers, and the Internet. It was originally proposed in 1995 by Ralf Kuron of FOGRA as a pragmatic approach in connection to ICC.
RGB color model is an additive model in which red, green, and blue (often used in additive light models) are combined in various ways to reproduce other colors. The name of the model and the abbreviation ‘RGB’ come from the three primary colors, red, green, and blue and
CMYK (short for cyan, magenta, yellow, and key (black), and often referred to as process color or four color) is a subtractive color model, used in color printing, also used to describe the printing process itself.
additive color model involves light emitted directly from a source or illuminant of some sort. The additive reproduction process usually uses red, green and blue light to produce the other colors. See also RGB color model.
subtractive color model explains the mixing of paints, dyes, inks, and natural colorants to create a range of colors, where each such color is caused by the mixture absorbing some wavelengths of light and reflecting others.
additive primary colors of a CRT color video display]] Primary colors are sets of colors that can be combined to make a useful range (gamut) of colors. For human applications, three are often used; for additive combination of colors, as in overlapping projected lights or in
In computer graphics, graphics software or image editing software is a program or collection of programs that enable a person to manipulate visual images on a computer.
A color wheel (invented by Isaac Newton) is a wheel used to show the relations of colors. The standard color wheel for light has colors of magenta, yellow, and cyan located at positions that can form an equilateral triangle when connected by straight lines, and another for red,
HSL and HSV (also called HSB) are two related representations of points in an RGB color space, which attempt to describe perceptual color relationships more accurately than RGB, while remaining computationally simple.

File extension: `.css`
MIME type: `text/css`
Developed by: World Wide Web Consortium
Type of format: Stylesheet language
Standard(s): Level 1 (Recommendation)
Level 2 (Recommendation)
World Wide Web Consortium

Consortium
Founded October 1994
Founder Tim Berners-Lee
Headquarters MIT/CSAIL in USA
ERCIM in France
Keio University in Japan
and many other offices around the world

Website www.w3.
Mac OS X (IPA: /mÃ¦k.oʊ.ɛs.tɛn/) is a line of graphical operating systems developed, marketed, and sold by Apple Inc., the latest of which is pre-loaded on all currently shipping Macintosh computers.
Xara Xtreme (formerly Xara X) is a 2D vector graphics editor created by the British software company Xara.

## Supported platforms

Xara Xtreme was originally developed for Microsoft Windows and the commercial version currently runs only on Windows.
Maintainer: dotPDN, LLC

OS: Microsoft Windows (Microsoft .NET)
Available language(s): Multilingual[1]
Use: Raster Image Editor
Website: Paint.NET

Paint.
Adobe Illustrator is a vector-based drawing program developed and marketed by Adobe Systems.

## History

Adobe Illustrator was first developed for the Apple Macintosh in 1986 (shipping in January 1987) as a commercialization of Adobe's in-house font development software
Adobe Photoshop, or simply Photoshop, is a graphics editor developed and published by Adobe Systems. It is the current market leader for commercial bitmap and image manipulation, and is the flagship product of Adobe Systems.
File extension: `.css`
MIME type: `text/css`