Computer scienceFundamentalsEssentialsComputer graphicsMedia formats

HSV

6 minutes read

Imagine that you've just started working with colors and design, and you need to find a beautiful palette. There are many colors to choose from and criteria for their selection. In order not to get confused in this variety, you may start asking the following questions: what tones do I want? How bright should they be? How intense? The HSV model provides answers to these questions. Let's take a closer look at how this model works and how to use it in order to choose the colors you need for your design.

HSV model and its components

The model was created by Alvy Ray Smith, one of the Pixar founders, in 1978. It is a non-linear transformation of the RGB model. These two models differ from each other in that the RGB defines colors as a combination of base colors, while the color components in HSV display color information in a form more familiar to humans. Therefore many professionals consider this model to be simpler and more intuitive.

HSV color model

So, HSV stands for Hue, Saturation, Value which are the three main color characteristics that allow us to distinguish between different colors. In other words, these are the parameters that will help you answer the questions above. Let's describe each one in more detail.

Hues are the three primary colors (red, blue, and yellow) and the three secondary colors (cyan, green, and magenta) that appear in the color circle. When you refer to hue, you are referring to the visible spectrum of basic colors, where each color is 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.

So, first of all, you need to choose which primary colors will constitute your design. To do this, it is enough to select the numerical values of colors by degrees and find the desired shades.

The second step is to decide the degree of purity and intensity of colors. For this, saturation is used. Saturation describes the amount of gray in a particular color, from 0 to 100 percent. The higher the saturation of a color, the more vivid and intense it is. The lower a color’s saturation, or chroma, the closer it is to pure gray on the grayscale. Sometimes saturation appears as a range from 0 to 1, where 0 is gray, and 1 is a primary color.

The last step here is to tune the value. Color value works in conjunction with saturation and describes the brightness of the color, also from 0 to 100 percent, where 0 is black, and 100 is white.

Okay, now you know what components HSV consists of. The next thing we will discuss is the connection of HSV format with RGB.

HSV to RGB

In computer graphics, the S and V components are usually represented as an integer from 0 to 255 instead of a real number from 0 to 1. With integer coding, for each color in HSV, there is a corresponding color in RGB. However, the opposite is not true: some RGB colors cannot be expressed in HSV so that the value of each component is an integer.

Let's see how we can convert HSV to RGB. For this, we need the following formula:

HSV to RGB conversion

Where H stands for a shade in the HSV model, V is Value, S is Saturation. After the values $V_{min}$ , $V_{inc}$ and $V_{dec}$ are obtained, you need to use the following table and substitute them depending on what $H_i$ is:

$H_i$	R	G	B
0	$V$	$V_{inc}$	$V_{min}$
1	$V_{dec}$	$V$	$V_{min}$
2	$V_{min}$	$V$	$V_{inc}$
3	$V_{min}$	$V_{dec}$	$V$
4	$V_{inc}$	$V_{min}$	$V$
5	$V$	$V_{min}$	$V_{dec}$

Also, you may use online converters or such tools as OpenCV library, MatLab, etc.

This is basically what HSV is and how it works. You may use it to choose colors for your project! But there are also other ways of using the HSV model. Let's discuss them briefly below.

Where do we use HSV?

There are several fields where HSV is used. Firstly, artists and designers use the HSV color model when selecting colors for paint or ink because, as we mentioned earlier, HSV better represents how people relate to colors than the RGB color model.

Also, that is the reason why HSV sometimes performs better than other models in computer vision.

Last but not least, the HSV also contributes to high-quality graphics. Although less well-known than RGB, the HSV approach is available in many high-end image editing software programs. For example, these are two variants of a picture before and after implementing the HSV filter with reduced hue and color value:

a picture before and after implementing the HSV filter with reduced hue and color value