The HSV Color Model in Graphic Design

Check your software's color picker

by
Jacci Howard Bear
Writer
A graphic designer, writer, and artist who writes about and teaches print and web design.
our editorial process
Jacci Howard Bear
Updated on November 11, 2019
reviewed by
Jessica Kormos
Jessica Kormos
Lifewire Tech Review Board Member
Jessica Kormos is a writer and editor with 15 years' experience writing articles, copy, and UX content for Tecca.com, Rosenfeld Media, and many others.
our review board
Article reviewed on Jul 29, 2020
Jessica Kormos

The RGB (red, green, blue) color model is the most popular way to mix and create colors. If you deal with commercial printers, you know about CMYK (cyan, magenta, yellow, key). You might have noticed HSV (hue, saturation, value) in the color picker of your graphics software. These are schemes that describe the way colors combine to create the spectrum we see.

A row of colored pencils in water.
Myriam Zilles / Pixabay

Unlike RGB and CMYK, which use primary colors, HSV is closer to how humans perceive color. It has three components: hue, saturation, and value. This color space describes colors (hue or tint) in terms of their shade (saturation or amount of gray) and their brightness value. Some color pickers, like the one in Adobe Photoshop, use the acronym HSB, which substitutes the term "brightness" for "value," but HSV and HSB refer to the same color model.

How to Use the HSV Color Model

The HSV color wheel sometimes appears as a cone or cylinder, but always with these three components:

Hue

Hue is the color portion of the model, expressed as a number from 0 to 360 degrees:

  • Red falls between 0 and 60 degrees.
  • Yellow falls between 61 and 120 degrees.
  • Green falls between 121 and 180 degrees.
  • Cyan falls between 181 and 240 degrees.
  • Blue falls between 241 and 300 degrees.
  • Magenta falls between 301 and 360 degrees.

Saturation

Saturation describes the amount of gray in a particular color, from 0 to 100 percent. Reducing this component toward zero introduces more gray and produces a faded effect. Sometimes, saturation appears as a range from 0 to 1, where 0 is gray, and 1 is a primary color.

Value (or Brightness)

Value works in conjunction with saturation and describes the brightness or intensity of the color, from 0 to 100 percent, where 0 is completely black, and 100 is the brightest and reveals the most color.

Uses of HSV

Designers use the HSV color model when selecting colors for paint or ink because HSV better represents how people relate to colors than the RGB color model does.

The HSV color wheel also contributes to high-quality graphics. Although less well-known than its RGB and CMYK cousins, the HSV approach is available in many high-end image editing software programs.

Selecting an HSV color begins with picking one of the available hues and then adjusting the shade and brightness values.

Was this page helpful?