How do you convert a HEX color to HSV?
You decode the HEX code into red, green and blue, then describe that color by hue (its angle on the color wheel, 0 to 360), saturation (how far from gray, 0 to 100%) and value (how bright its strongest channel is, 0 to 100%). #1E90FF becomes hsv(209.6, 88.2%, 100%). This tool does both steps in your browser.
The reason to bother: HEX is how colors travel in CSS and brand guides, but the color pickers in most design and paint apps are built around a hue ring and a saturation/brightness square. Those apps often call the model HSB, with B for brightness. It's the same thing.
Reading the result
The output is a single line in the form hsv(H, S%, V%):
- H is a hue angle in degrees. 0 is red, 120 green, 240 blue, and 360 wraps back to red.
- S is saturation. 0% is a gray, 100% means the weakest channel is zero.
- V is value. 100% means at least one channel is at full strength (FF).
All three are rounded to one decimal place. That's more precise than most pickers need, but it lets you see that #808080 is hsv(0, 0%, 50.2%) rather than exactly 50%, because 128 out of 255 is 50.2%.
Converting #FF6347 by hand
Here's what the tool computes for #FF6347 (the CSS color tomato):
- Split into pairs and convert from base 16:
FF= 255,63= 99,47= 71. - Divide each by 255: red 1.000, green 0.388, blue 0.278.
- Value is the largest of the three: 1.000, so V = 100%.
- The smallest is 0.278. The difference (max minus min) is 0.722. Saturation is that difference divided by the max: 0.722 / 1.000, so S = 72.2%.
- Red is the largest channel, so hue = 60 × ((green − blue) / difference) = 60 × (0.110 / 0.722), about H = 9.1°.
Result: hsv(9.1, 72.2%, 100%), a red pushed slightly toward orange. When green is the largest channel the formula adds 2 inside the brackets (adds 120°), and when blue is largest it adds 4 (240°). A negative hue gets 360 added.
HSV and HSL are different
This trips people up constantly. HSL is the model CSS supports through hsl(), defined in CSS Color Module Level 4. HSV is not part of CSS at all. The hue is identical in both, but the other two numbers mean different things, so you can't paste HSV values into hsl().
| HEX | HSV (this tool) | HSL (CSS) |
|---|---|---|
#1E90FF |
hsv(209.6, 88.2%, 100%) | hsl(210, 100%, 56%) |
#FF6347 |
hsv(9.1, 72.2%, 100%) | hsl(9, 100%, 64%) |
#663399 |
hsv(270, 66.7%, 60%) | hsl(270, 50%, 40%) |
#FFFFFF |
hsv(0, 0%, 100%) | hsl(0, 0%, 100%) |
In HSV, a fully vivid color sits at V = 100%. In HSL, the same vivid color sits at L = 50%, and 100% lightness is always white. If you need a CSS value, keep the HEX or use the color picker, which reports hsl() directly.
A few more conversions
| HEX | HSV |
|---|---|
#FFA500 (orange) |
hsv(38.8, 100%, 100%) |
#2E8B57 (seagreen) |
hsv(146.5, 66.9%, 54.5%) |
#ABC |
hsv(210, 16.7%, 80%) |
#000 |
hsv(0, 0%, 0%) |
Shorthand codes are expanded by doubling each digit, so #ABC is read as #AABBCC.
What the input accepts
Type one HEX code and press Convert. The # is optional, letters can be upper or lower case, and spaces around the code are trimmed. Anything else gets the message "Enter a valid 3- or 6-digit HEX color, e.g. #1e90ff." That includes 5-digit typos like #1e90f, letters past F, CSS color names, and the 4- and 8-digit forms that carry transparency. The tool converts one color at a time and doesn't show a preview swatch.
If you're starting from decimal channel values instead of HEX, the RGB to HSV converter takes rgb(255, 99, 71) style input. To go the other way after adjusting a color in HSB sliders, use HSV to HEX. And if you just want the plain channel numbers, HEX to RGB stops after step 1.
Last updated