Using the converter
Type an RGB colour as rgb(255, 136, 0) or three numbers from 0 to 255. The HSV value appears with the hue in degrees and saturation and value as percentages, the way a colour picker shows them.
Hex codes, hsl() values and CSS names work too. Swap the boxes to go from HSV back to RGB.
The RGB to HSV formula
Divide red, green and blue by 255, so each is between 0 and 1. Call the largest M, the smallest m, and their difference the chroma C.
Value is M. Saturation is C ÷ M, or 0 for black. Hue depends on which channel is largest. If it's red, H = 60 × ((G − B) ÷ C), plus 360 if that comes out negative. If green, H = 60 × ((B − R) ÷ C + 2). If blue, H = 60 × ((R − G) ÷ C + 4).
A worked example
Take rgb(255, 136, 0). Divided by 255 that's 1, 0.533 and 0, so M = 1, m = 0 and C = 1.
Value is 1, or 100%. Saturation is 1 ÷ 1, also 100%. Red is the largest, so the hue is 60 × (0.533 − 0) ÷ 1 = 32°. The answer is hsv(32, 100%, 100%), a fully bright, fully saturated orange.
Common colours in HSV
| Colour | RGB | HSV |
|---|---|---|
| Red | rgb(255, 0, 0) | hsv(0, 100%, 100%) |
| Orange | rgb(255, 165, 0) | hsv(39, 100%, 100%) |
| Yellow | rgb(255, 255, 0) | hsv(60, 100%, 100%) |
| Lime | rgb(0, 255, 0) | hsv(120, 100%, 100%) |
| Green | rgb(0, 128, 0) | hsv(120, 100%, 50%) |
| Cyan | rgb(0, 255, 255) | hsv(180, 100%, 100%) |
| Blue | rgb(0, 0, 255) | hsv(240, 100%, 100%) |
| Navy | rgb(0, 0, 128) | hsv(240, 100%, 50%) |
| Purple | rgb(128, 0, 128) | hsv(300, 100%, 50%) |
| Magenta | rgb(255, 0, 255) | hsv(300, 100%, 100%) |
| Pink | rgb(255, 192, 203) | hsv(350, 25%, 100%) |
| Brown | rgb(165, 42, 42) | hsv(0, 75%, 65%) |
| White | rgb(255, 255, 255) | hsv(0, 0%, 100%) |
| Silver | rgb(192, 192, 192) | hsv(0, 0%, 75%) |
| Grey | rgb(128, 128, 128) | hsv(0, 0%, 50%) |
| Black | rgb(0, 0, 0) | hsv(0, 0%, 0%) |
HSV, HSB and HSL
HSV and HSB are two names for one model. Hue, saturation and value is the same thing as hue, saturation and brightness, and the numbers match.
HSL is different. Its third number, lightness, puts the pure colour at 50% and white at 100%, while HSV puts the pure colour at 100% value, and white is 0% saturation at 100% value. Their saturations differ too, so hsv(220, 75%, 80%) is hsl(220, 60%, 50%). CSS reads hsl() but has no hsv(), so use hex to HSL for a stylesheet.
Where HSV came from
Alvy Ray Smith described HSV in the August 1978 issue of Computer Graphics. He wanted a model that matched how a painter mixes, starting from a pure pigment and adding white to tint it or black to shade it.
In HSV, adding white lowers the saturation and adding black lowers the value. That is still how most colour pickers are laid out, with a hue strip beside a square of saturation and value.
Questions
Is HSV the same as HSB?
Yes. Brightness and value are two names for the same number.
Why is the hue 0 for white, grey and black?
They have no hue, because red, green and blue are equal. It is written as 0 by convention.
Does converting to HSV and back change the colour?
It can by one step in a channel, because HSV is rounded to whole degrees and percentages.
Sources
Added and reviewed . What's new