Skip to Content

What is the HSV color setting?

By: Author Color With Leo

The HSV (hue, saturation, value) color setting is a cylindrical color model that describes colors in terms of hue, saturation, and value. It is an alternative to the more commonly known RGB (red, green, blue) additive color model. In HSV, colors are specified by their hue (the color type, such as red, blue, or yellow), saturation (the intensity or purity of the color), and value (the brightness or lightness of the color). The HSV model allows for intuitive color selection, as these three properties resemble how humans perceive color.

Understanding HSV

The HSV color space can be visualized as a cylinder. The central vertical axis represents the range of values from black (bottom) to white (top). The angle around the central axis corresponds to hue, with red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°. Distance from the central axis represents saturation, with colors becoming less saturated as they approach the axis.

HSV Component Range Description
Hue (H) 0° to 360° The color type ranging from red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, to magenta at 300°.
Saturation (S) 0% to 100% The intensity or purity of the color ranging from unsaturated at 0% to fully saturated at 100%.
Value (V) 0% to 100% The brightness or lightness of the color ranging from black at 0% to white at 100%.

For any given hue and saturation, lowering the value results in a darker color, while increasing the value results in a lighter color. Decreasing saturation makes the color more dull or grayish. The extremes of the cylinder are black (bottom), white (top), fully saturated colors (surface of cylinder), and unsaturated grays (central axis).

Advantages of HSV

There are several advantages to using the HSV color model compared to RGB:

  • Perceptual color relationships – HSV aligns closely with how humans perceive color, describing colors intuitively based on hue, saturation, and brightness.
  • Color selection – Selecting a color in HSV is more natural than RGB. You simply choose a hue, make it more or less saturated, and adjust the brightness.
  • Image processing – Tasks like adjusting colors, saturation, and brightness are simpler in HSV than in RGB.
  • Color mixing – Mixing colors using HSV to achieve different hues and shades can be more intuitive.
  • Grayscale conversion – Converting to grayscale is straightforward by setting saturation to 0 in HSV, vs. adjusting all channels equally in RGB.

For these reasons, HSV can provide a more user-friendly way to select, manipulate, and work with colors in many applications.

HSV Color Picker

HSV color pickers allow users to select colors in a graphical HSV cylinder or triangle. Some key features of HSV color pickers include:

  • A hue slider or wheel to select the base color
  • A saturation slider to control color intensity
  • A value or brightness slider
  • A color preview box showing the selected HSV color
  • An optional RGB readout of the equivalent color
  • A color swatch palette for saving custom colors

Here is an example HSV color picker:

Example HSV color picker This color picker allows the user to select a hue using the vertical slider on the right. The saturation can be adjusted using the top horizontal slider, while the bottom slider controls value/brightness. The selected HSV color is previewed in the large box and its hex RGB value is shown below. Saved custom colors appear as swatches on the bottom.

Graphical HSV pickers provide an intuitive way to select colors compared to entering numeric HSV or RGB values. The ability to visually adjust hue, saturation, and brightness makes fine-tuning a color much easier.

HSV Color Wheel

An HSV color wheel is another useful tool for visualizing and selecting colors. It provides an overview of the full hue range in a circular format.

A typical HSV color wheel contains:

  • Pure fully saturated hues around the outer edge
  • Less saturated colors toward the middle
  • Whites, grays, and blacks near the center

Here is an example HSV color wheel:

HSV color wheel This color wheel shows the hue range around the circle from red (0°) to magenta (300°). Saturation increases toward the edge, with the center being mostly unsaturated whites, grays, and blacks. The brightness can be adjusted by adding white or black.

An HSV color wheel is useful for:

  • Seeing relationships between different hues and shades
  • Understanding color mixing by selecting complementary colors from opposite sides of the wheel
  • Identifying harmonious color schemes by selecting colors adjacent on the wheel
  • Quickly previewing the full spectrum of colors

Together with HSV sliders, an HSV color wheel gives the flexibility to move between precise color selection and an overview of the entire color space.

Using HSV in Code

In code, HSV colors can be defined using various color models and syntaxes:

  • HSV – Directly specify HSV values from 0-360, 0-100%, 0-100%
  • HSB – Hue, Saturation, Brightness – same as HSV
  • HSL – Hue, Saturation, Lightness – similar to HSV
  • Hex RGB – Convert HSV to equivalent hex RGB string like #FFA500
  • RGB – Convert to regular RGB integers from 0-255

For example, to set a color in CSS using HSL:

.element {
  background-color: hsl(120, 60%, 70%); /* Green */ 
}

Or using hex RGB with 50% brightness:

const red = '#FF0000'; // Hue 0°, 100% saturation

function lighten(color, amount) {
  const rgb = hexToRgb(color);
  rgb.blue = Math.round(100 * amount);
  rgb.green = Math.round(100 * amount); 
  rgb.red = Math.round(100 * amount);
  
  return rgbToHex(rgb); 
}

const lightRed = lighten(red, 0.5); // '#FF7F7F'

Most programming languages have color libraries or utilities that support creating, converting, and manipulating HSV colors.

HSV Color Space Distortions

While useful, the conceptual HSV cylinder has some idiosyncrasies in its implementation that can distort the uniformity of the color space:

  • Hue wrapping – At 360° hue wraps back to 0°, which can cause discontinuities in gradients
  • Uneven hue distribution – Some hue ranges occupy more visual space on screen
  • Uneven saturation – Fully saturated colors vary in perceived saturation
  • Bilinear brightness – Mid grays are darker than they should be

Other cylindrical models like HSI (hue, saturation, intensity) and HSL (hue, saturation, lightness) address some of these issues and can have more perceptually accurate representations.

Despite some distortions, HSV remains popular due to its logical separation of hue, saturation, and value. Careful design and testing across color ranges can minimize the perceptual unevenness in many cases.

Converting Between HSV and RGB

Converting between HSV and RGB color models is straightforward using simple math formulas. Here are the conversions in each direction:

HSV to RGB

R = HSVtoRGB(H,S,V)

C = S * V 
X = C * (1 - |(H/60°) mod 2 - 1|)
m = V - C

if H is between 0° and 60°
    R = C, G = X, B = 0
else if H is between 60° and 120°  
    R = X, G = C, B = 0
else if H is between 120° and 180°
    R = 0, G = C, B = X  
else if H is between 180° and 240°
    R = 0, G = X, B = C
else if H is between 240° and 300°
    R = X, G = 0, B = C
else /* H is between 300° and 360° */ 
    R = C, G = 0, B = X
    
(R,G,B) = ((R+m),(G+m),(B+m))

RGB to HSV

HSV = RGBtoHSV(R,G,B) 

Cmax = max(R,G,B) 
Cmin = min(R,G,B)
Δ = Cmax - Cmin

H = undefined
if Δ == 0 
    H = 0
else if Cmax == R
    H = 60° * ((G-B)/Δ mod 6) 
else if Cmax == G 
    H = 60° * ((B-R)/Δ + 2)
else /* Cmax == B */
    H = 60° * ((R-G)/Δ + 4)

if Cmax == 0
    S = 0
else
    S = Δ/Cmax 
    
V = Cmax

These formulas directly convert each HSV component to the equivalent in RGB color space and vice versa. Most programming languages provide HSV/RGB conversion functions in their standard libraries.

Applications of HSV

Some common uses and applications of the HSV color model include:

  • Graphical design – HSV allows intuitive color selection and modification during logo, scene, and ui design.
  • Image editing – Tools like Photoshop use HSV for color adjustment operations like hue shifts, saturation, brightness.
  • Computer vision – HSV can simplify tasks like color-based segmentation, object detection, tracking.
  • GIS/Mapping – Thematic maps use HSV to create sequential and qualitative color schemes.
  • Visual arts – Artists may mix paints and match colors using HSV relationships.
  • UI design – HSV color pickers provide intuitive color selection in ui libraries and frameworks.

Overall, the perceptual basis of HSV makes it a versatile tool for creating, manipulating, and understanding color across many domains.

Conclusion

The HSV cylindrical color model describes colors in terms of hue, saturation, and value. This aligns with human color perception and allows intuitive color selection compared to RGB. HSV enables simpler color adjustment and conversions in applications like image editing, data visualization, and design. Despite some distortions in its implementation, HSV remains popular for its logical separation of color properties. HSV color pickers, wheels, and formulas make working with color more accessible no matter the programming language or software used. For both artists and scientists, HSV provides a powerful framework for harnessing the endless possibilities of color.