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 |
Type | |
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.
The visual represents a cylinder where:
color picker to discover this space. 2) where:
Note that moving the value of one scale does not move the others. They are independant.
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 3) has the hsl function to define a color:
hsl(hue, saturation, lightness)
where: