HSV is a color model that describes a color by hue, saturation and value, where value is the largest of the red, green and blue channels. HSV stands for Hue, Saturation, Value, and some software calls the same model HSB, for brightness. It was described by Alvy Ray Smith in 1978, and it is the model behind the square-plus-slider layout of many color pickers. CSS has no hsv() function, so you convert HSV to RGB, hex or hsl() before using it in a stylesheet.
HSV tilts the RGB cube onto its black corner and measures positions around that diagonal. Smith called the resulting solid a hexcone, a hexagonal pyramid with black at the tip.
The key difference from HSL is how white is reached. In HSV, white needs saturation 0 and value 100%. Pure blue is saturation 100% and value 100%. In HSL, pure blue sits at lightness 50% and white needs lightness 100%.
Python ships HSV in its standard library as colorsys, with every component scaled to 0 to 1.
import colorsys
r, g, b = 59 / 255, 130 / 255, 246 / 255
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print('hsv', round(h * 360, 1), round(s * 100, 1), round(v * 100, 1))
h, l, s = colorsys.rgb_to_hls(r, g, b)
print('hls', round(h * 360, 1), round(l * 100, 1), round(s * 100, 1))
print([round(x * 255) for x in colorsys.hsv_to_rgb(240 / 360, 1, 1)])
print([round(x * 255) for x in colorsys.hsv_to_rgb(240 / 360, 1, 0.5)])
print([round(x * 255) for x in colorsys.hsv_to_rgb(0, 0, 1)])hsv 217.2 76.0 96.5
hls 217.2 59.8 91.2
[0, 0, 255]
[0, 0, 128]
[255, 255, 255]The same color, #3b82f6, has hue 217.2 in both models. Its HSV saturation is 76.0% and its value is 96.5%, while HSL gives it saturation 91.2% and lightness 59.8%.
HSV and HSL share the same hue but differ in their other two axes. HSV value is the largest RGB channel, while HSL lightness is the average of the largest and smallest channel. The two saturation numbers therefore differ for the same color, as the run above shows (76.0% against 91.2%).