What are the (HSV|HSI|HSL) color spaces? (Hue, Saturation, Value, Intensity, Lightness)



HSV (known also as HSB) and HSL (also known as HSI) is a human color space (ie more comprehensible for the human as opposed to a physical colorspace that was created for a device (monitor, printing)).

They are based on the following coordinates:

Coordinates Value
Hue (H) Angle of the Radial wheel with a value from from 0 to 360
Saturation (S) Linear Saturity Scale from 0 to 1
Lightness/Intensity (L,I) Linear Lightness Scale from 0 (black) to 1 (white) - measure based
Value/Brightness (V,B) Linear Brightness Scale from 0 to 100 - perception based

The HS* color spaces are simple geometric transformations of the RGB cube into cylindrical form.

The variables are assigned to cylindrical coordinates in an attempt to be more intuitive and perceptually relevant than the RGB cartesian (cube) representation.


Hsv Cone

The visual represents a cylinder where:

Hslsphere 1)

Color Picker

color picker to discover this space. 2) where:

  • the first scale is the hue (from 0 to 360)
  • the second scale is the saturation (from 0 to 1)
  • the third scale is the lightness (from 0 to 1)

Note that moving the value of one scale does not move the others. They are independant.


To Rgb

From an hsv coordinates to a rgb coordinates.

function hsv2rgb(h, s, v) {
  var c = v * s;
  var h1 = h / 60;
  var x = c * (1 - Math.abs((h1 % 2) - 1));
  var m = v - c;
  var rgb;

  if (typeof h == 'undefined') rgb = [0, 0, 0];
  else if (h1 < 1) rgb = [c, x, 0];
  else if (h1 < 2) rgb = [x, c, 0];
  else if (h1 < 3) rgb = [0, c, x];
  else if (h1 < 4) rgb = [0, x, c];
  else if (h1 < 5) rgb = [x, 0, c];
  else if (h1 <= 6) rgb = [c, 0, x];

  var r = 255 * (rgb[0] + m);
  var g = 255 * (rgb[1] + m);
  var b = 255 * (rgb[2] + m);

  return [r, g, b];


Javascript / CSS

Javascript / CSS 3) has the hsl function to define a color:

hsl(hue, saturation, lightness)



Discover More
Monet Femme Ombrelle 1886 Logo
CIELChab (a.k.a. LCh or HCL ) ColorSpace

CIELChab is a colorspace based on the following coordinates: L: lightness: in the range [0, 100] C is the Polar_coordinate_systempolar coordinates of chroma, relative saturation in [0, 230] H is...
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
Monet Femme Ombrelle 1886 Logo

A color is: a light wave in a range called the visual spectrum (that our eye see) the absence of light or mixed (achromatic colors (white, black, gray) in computer a data type that denotes a color....
Color - (Lightness|Value|Tone) (White, Gray, Black scale)

Lightness, also known as value or tone, is a property (coordinate) placed on a linear scale where: White is the highest possible value (the lightest) Black is the lowest value (the darkest) Gray...
Color Saturation
Color - (Saturation|Chroma|Intensity) (Purity of a hue)

The third descriptive quality of colour is saturation, also known as chroma or intensity. It defines the degree of purity of a hue. Saturation: is a (comparative|relative) property is linear and...
Hue Scale
Color - Hue (Wavelength, type of color) (Shades of red, orange, yellow, green, blue, and purple)

A Hue is a color of the rainbow. They can be highly simplified as being the color name that gives a particular wavelength (thenwithout white, black or gray) It is one of the main properties describing...
Color - RGB (Red Green Blue Additive Model)

Red Green Blue (RGB) is a color space (model) that specify a color by setting the amount of each of its three primary colors Red, Green, Blue (RGB). Red Green Blue is an additive model where primary...
Pure Hue Tint Tone Shade
Color - Shade (Darken)

A shade is a a color function that increases darkness (ie decrease lightness). You can darken/shade with two methods: shade: a mixture with the black color. darken: decreasing the lightness directly...
Monet Femme Ombrelle 1886 Logo
Color - Software / Library

This page lists software / application and library around the manipulation and creation of color. How to work with color in d3: working...
Monet Femme Ombrelle 1886 Logo
Color Difference / Distance

How to calculate the color differences and/or a distance between two colors ?

Share this page:
Follow us:
Task Runner