Psychology Wiki

HSV color space

34,117pages on
this wiki
Revision as of 20:28, May 10, 2007 by Dr Joe Kiff (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

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

The HSV (Hue, Saturation, Value) model, also known as HSB (Hue, Saturation, Brightness), defines a color space in terms of three constituent components:

Hue scale
PhloxBotAdded by PhloxBot
  • Hue, the color type (such as red, blue, or yellow):
    • Ranges from 0-360 (but normalized to 0-100% in some applications)
  • Saturation, the "vibrancy" of the color:
    • Ranges from 0-100%
    • Also sometimes called the "purity" by analogy to the colorimetric quantities excitation purity and colorimetric purity
    • The lower the saturation of a color, the more "grayness" is present and the more faded the color will appear, thus useful to define desaturation as the qualitative inverse of saturation
  • Value, the brightness of the color:
    • Ranges from 0-100%

The HSV model was created in 1978 by Alvy Ray Smith. It is a nonlinear transformation of the RGB color space, and may be used in color progressions. Note that HSV and HSB are the same, but HSL is different.

The definition of the HSV color model is not device independent. HSV is only defined relative to RGB intensities - without physical definitions of their chromaticities and white point. For accurate and device independent representation, use CIE L*a*b or another CIE-based color model.

Visualization of HSV

Triangulo HSV
An HSV color wheel allows the user to quickly select a multitude of colors.
PhloxBotAdded by PhloxBot
HSV clr wheel
Time-varied representation of the HSV color wheel.
PhloxBotAdded by PhloxBot

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.

HSV cone
The conical representation of the HSV model is well-suited to visualizing the entire HSV color space in a single object.
PhloxBotAdded by PhloxBot
HSV cone
Time-varied representation of the HSV cone.
PhloxBotAdded by PhloxBot

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.

HSV cylinder
The cylindrical representation of the HSV model might be considered the most mathematically accurate model of the HSV color space.
PhloxBotAdded by PhloxBot
HSV cyclinder
Time-varied representation of the HSV cylinder.
PhloxBotAdded by PhloxBot

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.

Varying one component

A chart can be used to view precisely the effect of varying levels for hue, saturation or value.

Hsv Saturation Chart
Chart of increasing Saturation for three Value levels.
PhloxBotAdded by PhloxBot
Hsv Value Chart
Chart of increasing Value for three Saturation levels.
PhloxBotAdded by PhloxBot

Neighborhood of hues

3x3x3 Hue Neighborhood
PhloxBotAdded by PhloxBot
Another way to view varying levels is to show a set of colors near one another, varying slightly in hue, saturation, and value. Note the image has 27 close shades of orange, sorted by luma, spiraling inward to the brightest point. The small center blocks are the same set of colors sorted in a more linear arrangement.

HSV and color perception

Barns grand tetons HSV separation
An image, along with its H, S and V components. Note that the H element is the only one displaying color. Compare the dark on the left side of the barn roof and the white of the snow; in both cases these have color, but the saturation is very low, causing them to be near-greyscale; the intensity of the barn, however, is much lower than the snow. The green of the grass is highly saturated and of moderate intensity; the blue of the mountains is consistent in color but varies in intensity and saturation; and the sky has constant color and intensity but varying saturation.
PhloxBotAdded by PhloxBot

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.

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. However, if physical intuitions are indispensable, it is possible to translate HSV coordinates into pseudo-physical properties using the psychophysical terminology of colorimetry as follows:

  • Hue specifies the dominant wavelength of the color, except in the range between red and indigo (somewhere between 240 and 360 degrees) where the Hue denotes a position along the line of pure purples
  • If the hue perception were recreated, actually using a monochromatic, pure spectral color at the dominant wavelength, the desaturation would be roughly analogous to an applied frequency spread around the dominant wavelength or alternatively the amount of equal-power (i.e. white) light added to the pure spectral color.
  • The value is roughly analogous to the total power of the spectrum, or the maximum amplitude of the light waveform. However, it should be obvious from the equations below that value is actually closer to the power of the greatest spectral component (the statistical mode, not the cumulative power across the distribution.)

Transformation between HSV and RGB

An illustration of the relationship between HSV and RGB color spaces.
PhloxBotAdded by PhloxBot
H \in \left[ 0, 360 \right)
S, V, R, G, B \in \left[ 0, 1 \right]

From RGB to HSV

Let MAX equals the maximum of the (R, G, B) values, and MIN equals the minimum of those values.

H =
\mbox{undefined}, & \mbox{if } \mathit{MAX} = \mathit{MIN} \\
60^\circ \times \frac{G - B}{\mathit{MAX} - \mathit{MIN}} + 0^\circ,   & \mbox{if } \mathit{MAX} = R \\ &\mbox{and } G \ge B \\
60^\circ \times \frac{G - B}{\mathit{MAX} - \mathit{MIN}} + 360^\circ, & \mbox{if } \mathit{MAX} = R \\ &\mbox{and } G < B \\
60^\circ \times \frac{B - R}{\mathit{MAX} - \mathit{MIN}} + 120^\circ, & \mbox{if } \mathit{MAX} = G \\
60^\circ \times \frac{R - G}{\mathit{MAX} - \mathit{MIN}} + 240^\circ, & \mbox{if } \mathit{MAX} = B

S = 
0, & \mbox{if } \mathit{MAX} = 0 \\
1 - \frac {\mathit{MIN}} {\mathit{MAX}}, & \mbox{otherwise}

V = \mathit{MAX} \,

From HSV to RGB

H_i = \left\lfloor { H \over 60 } \right\rfloor\mod 6
f = { H \over 60 } - H_i
p = V ( 1 - S ) \,
q = V ( 1 - f S ) \,
t = V ( 1 -  ( 1 - f ) S ) \,
\mbox{if } H_i = 0 \rightarrow R = V, G = t, B = p
\mbox{if } H_i = 1 \rightarrow R = q, G = V, B = p
\mbox{if } H_i = 2 \rightarrow R = p, G = V, B = t
\mbox{if } H_i = 3 \rightarrow R = p, G = q, B = V
\mbox{if } H_i = 4 \rightarrow R = t, G = p, B = V
\mbox{if } H_i = 5 \rightarrow R = V, G = p, B = q

In computer graphics, sometimes each HSV and RGB parameter is represented by an integer from 0 to 255 instead of a real number. In this case, the transforms do not cover all the points in the target space and some distortion is caused by rounding. For example:

  • the HSV point (0, 255, 255) is mapped to the RGB point (255, 0, 0) and
  • the HSV point (1, 255, 255) is mapped to the RGB point (255, 6, 0),

but no HSV points map to the 5 RGB points in between: (255, k, 0), k=1 to 5.

Complementary colors

Main article: Complementary color

We regard two colors as complementary if when mixed together they produce a shade of grey. Given a color (H, S, V) in HSV color space, there exists a complement (H', S', V') such that when (H, S, V) and (H', S', V') are mixed in equal proportions, the saturation of the resulting color is 0. Then,

H^\prime =  \begin{cases}H - 180, & \mbox{if } H \ge 180 \\H + 180, & \mbox{if } H < 180 \end{cases}
S^\prime = {VS \over V(S - 1) + 1}
V^\prime = V(S - 1) + 1 \,

See also


External Links

This page uses Creative Commons Licensed content from Wikipedia (view authors).
Advertisement | Your ad here

Around Wikia's network

Random Wiki