Using the converter
Type the hue in degrees and the saturation and value as percentages, such as 220, 75, 80. Percent and degree signs are optional, and hsv(220, 75%, 80%) or hsb(220, 75%, 80%) work too.
The answer is an rgb() value. The rows give the hex code and the same colour in HSL and CMYK.
The HSV to RGB formula
Write saturation S and value V as fractions from 0 to 1. Chroma is C = V × S, the gap between the strongest and weakest channel. The middle channel is X = C × (1 − |(H ÷ 60) mod 2 − 1|), and m = V − C is the amount added to all three.
Which channel gets C and which gets X depends on the hue, in six sectors of 60°. Add m to each, multiply by 255 and round.
The six hue sectors
| Hue | Red, green, blue before adding m | Runs from |
|---|---|---|
| 0° to 60° | C, X, 0 | Red to yellow |
| 60° to 120° | X, C, 0 | Yellow to green |
| 120° to 180° | 0, C, X | Green to cyan |
| 180° to 240° | 0, X, C | Cyan to blue |
| 240° to 300° | X, 0, C | Blue to magenta |
| 300° to 360° | C, 0, X | Magenta to red |
A worked example
Take hsv(220, 75%, 80%). C = 0.8 × 0.75 = 0.6. H ÷ 60 = 3.667, and 3.667 mod 2 = 1.667, so X = 0.6 × (1 − 0.667) = 0.2. Then m = 0.8 − 0.6 = 0.2.
220° falls in the cyan to blue sector, so the channels start as (0, X, C) = (0, 0.2, 0.6). Adding m gives (0.2, 0.4, 0.8), and × 255 that is rgb(51, 102, 204).
HSV values in RGB
| HSV | RGB | Hex |
|---|---|---|
| hsv(0, 0%, 100%) | rgb(255, 255, 255) | #FFFFFF |
| hsv(0, 0%, 50%) | rgb(128, 128, 128) | #808080 |
| hsv(0, 100%, 100%) | rgb(255, 0, 0) | #FF0000 |
| hsv(120, 100%, 50%) | rgb(0, 128, 0) | #008000 |
| hsv(240, 100%, 100%) | rgb(0, 0, 255) | #0000FF |
| hsv(220, 75%, 80%) | rgb(51, 102, 204) | #3366CC |
| hsv(32, 100%, 100%) | rgb(255, 136, 0) | #FF8800 |
| hsv(300, 50%, 75%) | rgb(191, 96, 191) | #BF60BF |
| hsv(180, 25%, 90%) | rgb(172, 230, 230) | #ACE6E6 |
| hsv(45, 80%, 60%) | rgb(153, 122, 31) | #997A1F |
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.
Questions
What happens with a saturation of 0?
C is 0, so all three channels equal V × 255. The colour is a grey, and the hue makes no difference.
What if the hue is over 360?
Hue goes round in a circle, so 400° is the same as 40° and −20° is the same as 340°.
Why did my numbers come out as rgb() of different values?
If the three numbers go in without hsv(), this page reads them as HSV. Check the order is hue, saturation, value.
Sources
Added and reviewed . What's new