Using the converter
Paste a hex code such as #3366CC, with or without the #, in 3 or 6 digits. You get the three numbers to type into an HSV or HSB colour picker.
The steps show the hex pairs turned into RGB first, then RGB into HSV.
From hex to HSV in two stages
A hex code is three pairs of hex digits, one each for red, green and blue. Each pair is a number from 0 to 255, worked out as the first digit × 16 + the second, with A to F standing for 10 to 15.
Divide each by 255. Value is the largest of the three. Saturation is the gap between the largest and smallest, divided by the largest. The hue is an angle that depends on which channel leads, with red at 0°, green at 120° and blue at 240°.
A worked example
For #3366CC, 33 is 3 × 16 + 3 = 51, 66 is 102 and CC is 12 × 16 + 12 = 204. Divided by 255 that's 0.2, 0.4 and 0.8.
Value is 0.8, so 80%. The gap is 0.8 − 0.2 = 0.6, and 0.6 ÷ 0.8 = 0.75, so saturation is 75%. Blue leads, so the hue is 60 × ((0.2 − 0.4) ÷ 0.6 + 4) = 220°. The result is hsv(220, 75%, 80%).
Hex codes in HSV and HSL
| Colour | Hex | HSV | HSL |
|---|---|---|---|
| Red | #FF0000 | hsv(0, 100%, 100%) | hsl(0, 100%, 50%) |
| Orange | #FFA500 | hsv(39, 100%, 100%) | hsl(39, 100%, 50%) |
| Yellow | #FFFF00 | hsv(60, 100%, 100%) | hsl(60, 100%, 50%) |
| Lime | #00FF00 | hsv(120, 100%, 100%) | hsl(120, 100%, 50%) |
| Green | #008000 | hsv(120, 100%, 50%) | hsl(120, 100%, 25%) |
| Cyan | #00FFFF | hsv(180, 100%, 100%) | hsl(180, 100%, 50%) |
| Blue | #0000FF | hsv(240, 100%, 100%) | hsl(240, 100%, 50%) |
| Navy | #000080 | hsv(240, 100%, 50%) | hsl(240, 100%, 25%) |
| Purple | #800080 | hsv(300, 100%, 50%) | hsl(300, 100%, 25%) |
| Magenta | #FF00FF | hsv(300, 100%, 100%) | hsl(300, 100%, 50%) |
| Pink | #FFC0CB | hsv(350, 25%, 100%) | hsl(350, 100%, 88%) |
| Brown | #A52A2A | hsv(0, 75%, 65%) | hsl(0, 59%, 41%) |
| White | #FFFFFF | hsv(0, 0%, 100%) | hsl(0, 0%, 100%) |
| Silver | #C0C0C0 | hsv(0, 0%, 75%) | hsl(0, 0%, 75%) |
| Grey | #808080 | hsv(0, 0%, 50%) | hsl(0, 0%, 50%) |
| Black | #000000 | hsv(0, 0%, 0%) | hsl(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.
Reading HSV in a colour picker
Most pickers put hue on a strip or ring. Beside it is a square where saturation runs left to right and value runs bottom to top, so the top right corner is the pure hue and the whole bottom edge is black.
To make a darker shade of the same colour, keep the hue and saturation and lower the value. To make a paler tint, lower the saturation.
Questions
Is HSV the same as HSB?
Yes. Some programs say brightness, others value. The numbers are the same.
Can I use HSV in CSS?
No, CSS has no hsv() function. Use hsl(), or hwb(), which CSS Color 4 also defines. [Hex to HSL](/hex-to-hsl) gives the hsl() value.
Why does my picker show 0 to 255 instead of percentages?
Some programs store saturation and value as 0 to 255 rather than percentages. Multiply a percentage by 2.55 to match those, and check the program's own range for hue.
Sources
Added and reviewed . What's new