An Overview of HSV Color Notation

An Overview of HSV Color Notation
Page content

A Brief Look at Color Models and Color Space

Color models are a way of describing colors in a numerical form. This is achieved by placing values to three or four colors and by adding or subtracting from each value altering the colors. Our most commonly used and well-known color models are RGB and CMYK. Color space is when you take a color model and define what conditions the color is going to be viewed at.

A very good example of what a color space is, lies in sRGB (Standard RGB) which was the collaborative effort of Hewlett-Packard and Microsoft for use on the Internet. sRGB took the standard RGB color model and applied gamma correction, to match it to what CRT monitors were transferring at the time, allowing for colors to be accurately represented over the Internet.

Both color models and color space are representable in three dimensional space. Color models, like RGB for example, take each color and makes it an axis on the graph. Color space on the other hand represents the color model as hue and the other two axis as saturation and brightness, which ends up giving a lot more options for color picking.

In this HSV color notation, we will explore what HSV color space is. How it has been used and how it has paved the way for more robust and modern systems of color picking in image editing software.

History of HSV Color Space

A 3D representation of HSV Color Space

HSV color space was one of two color spaces created in the 1970s by computer graphics researchers, in order to find a better way to represent the RGB model, to match it closer to how humans actually perceive color. Researchers wanted to transform the RGB color model’s geometry from a cube representation to a cylindrical model, which was closer to how a person would see and pick colors. This was especially helpful for artists since it’s easier to define colors with hue and saturation rather than whether or not the color is additive or subtractive.

HSV Represented as a 3D Graph

HSV is represented as a cylinder which is a complete departure from the RGB cube. Researchers determined that it was easier to arrange hues on a radial slice around a body of neutral colors, that starts at black from the bottom and becomes white at the very top and center of the cylinder. Below is a representation of value and hue on the angular face of the cylinder.

Value and hue graph using HSV color space.

Saturation is represented on this model by starting at the axis as saturated color and the further you go out it becomes more and more unsaturated. Below is an image that shows what the HSV cylinder would look like if it was cut in half vertically. As you can see, colors become more saturated the closer you get to the axis.

Value and saturation graph of HSV color space

Primary red is the start of the angular dimension which represents hues at 0°, primary green begins at 120°, primary blue at 240° until it finally loops back to red at the 360° mark. Below shows the HSV cylinder if it were cut in half horizontally.

The center of the HSV color space representing hue.

HSV color space is often presented using these graphs as you can adjust sliders in DTP software to get various slices of the whole cylinder.

Uses of HSV Color Space

HSV color space was designed for graphic artists in mind and is used as a model for selecting colors in color picking and image editing software. HSV is represented by three sliders which allows you to navigate colors by picking points on the 3D model individually or seeing a 2D slice of the model. Since Photoshop 4.0 adopted a system of using Hue, Luminosity, Saturation, and Color blend modes, other image editing software has followed in its footsteps. Today, you can still find HSV color notation used by some image editing software such as the popular freeware GIMP, but most software has adopted more sophisticated models.

Disadvantages of HSV Color Space

HSV was developed in the late 1970s, for what was available at the time, and was used in most mid-end computers in the 1990s. Its design sacrificed perceptual relevance for computation speed which made it less taxing on systems.

If you take a look at the image below you will see a color photo on the left. To the middle image is a representation of the photograph using HSV color space with all but the value taken from the image. The image loses a lot of its depth, particularly around the lightest parts of the image. The image on the left is the CIELAB color space with the L* (lightness) removed. The differences between the two color spaces are obvious since CIELAB’s representation ends up being a lot closer to the source material because it was designed to be closer to how we see color in real life.

HSV and modern color space compared.

Another way of putting it, is that by using the HSV model, white and the blue primary both share the same value of 0 even though we perceive blue to have a fraction of the luminosity that white does.

Credits

All images are used for promotional purposes only and are listed in the order they appears.

RGB Color Model by Mike Horvath, https://en.wikipedia.org/wiki/File:RGBCube_b.svg

HSL - HSV Color Models by Jacob Rus, https://en.wikipedia.org/wiki/File:Hsl-hsv_models.svg (edited)

Fire Breather (original) by Luc Viatour, https://en.wikipedia.org/wiki/File:Fire_breathing_2_Luc_Viatour.jpg

Fire Breather HSV by Luc Viatour; “lightness” components extracted by Wikimedia user Jacobolus https://en.wikipedia.org/wiki/File:Fire-breather_HSV_V.jpg

Fire Breather CIELAB L* by Luc Viatour; “lightness” components extracted by Jacobolus https://en.wikipedia.org/wiki/File:Fire-breather_CIELAB_L*.jpg

All images are licensed under the Creative Commons ShareAlike 3.0 License.

Sources:

Israel Institute of Technology: HSV Space, https://visl.technion.ac.il/labs/anat/hsvspace.pdf

Office of Information for the University of California: Information on the HSV Color Space, https://dcssrv1.oit.uci.edu/~wiedeman/cspace/me/infohsv.html

University of Southern Californa iLab: HSV and HSV2 Color Space, https://ilab.usc.edu/wiki/index.php/HSV_And_H2SV_Color_Space