Convert hex colors to HSV (also called HSB) — the hue/saturation/value model used by the color pickers in Photoshop, GIMP and Figma. HSV is not valid CSS, so the tool clearly separates the picker-friendly HSV numbers from the CSS-ready formats it also shows.
Settings
Generated locally in your browser — your settings and results never leave this page.
The picker model behind design tools
Open the color dialog in Photoshop, Figma or GIMP and the big square-plus-strip you drag around is HSV: hue on the strip, saturation left–right, value bottom–top. HSV never became a CSS syntax — hsl() won that seat — so translating between web colors and picker coordinates is a permanent small chore this converter automates.
Worked example: #ff8c00
Dark orange — rgb(255, 140, 0):
V = max / 255 = 100% S = (max − min) / max = 100% H = red leads, green mid = 32.9° #ff8c00 = hsv(32.9, 100%, 100%)
Compare the HSL reading of the same color — hsl(32.9, 100%, 50%): identical hue, wildly different S and the L/V axes measuring different things. V asks “how bright is the brightest channel”; L asks “how far toward white is the average of the extremes”.
Where the HSV reading is the right one
Reproducing a color in a design tool from a hex spec (type H, S, V straight into the dialog), procedural graphics code that wants “full-strength color, then darken” semantics, and communicating with anyone whose mental model was trained by those pickers — which is most designers.
The fine print
HSV shares HSL’s degenerate corners (hue undefined for grays, saturation undefined at black) and its perceptual dishonesty (equal V ≠ equal apparent brightness). It is a UI-interaction model, excellent at that job, and this page labels its output as non-CSS so the value never leaks into a stylesheet by accident.
Reference values, computed live
Picker fluency comes from seeing the mapping on colors you already know. Seven hex codes and their HSV readings, as a design-tool dialog would show them:
| Color | HEX | HSV |
|---|---|---|
| hotpink | #ff69b4 | hsv(330, 58.8%, 100%) |
| forestgreen | #228b22 | hsv(120, 75.5%, 54.5%) |
| coral | #ff7f50 | hsv(16.1, 68.6%, 100%) |
| seagreen | #2e8b57 | hsv(146.5, 66.9%, 54.5%) |
| royalblue | #4169e1 | hsv(225, 71.1%, 88.2%) |
| palevioletred | #db7093 | hsv(340.4, 48.9%, 85.9%) |
| darkorange | #ff8c00 | hsv(32.9, 100%, 100%) |
The saturation column is the one to study: it measures distance from the gray axis relative to the color’s own brightness, which is why the airy and the deep colors alike can carry high S. Where HSL would report some of these same colors at wildly different saturations, HSV keeps the picker’s geometry — the difference the two-model comparison above formalizes.
How to use the HEX to HSV Converter
- Pick the color with the native picker, or type its hex code into the twin field.
- The result updates live as you type – no convert button needed.
- Copy the HSV numbers for your design tool – note they are not CSS syntax.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
Frequently asked questions
What is HSV and where is it used?
Hue-Saturation-Value: the model behind the square color pickers in Photoshop, GIMP, Krita and Figma – hue on a strip, saturation left-to-right, value top-to-bottom. It is a picker-interaction model, not a CSS notation, which is why browsers never accepted hsv() syntax.
How does hex convert to HSV?
Via RGB: value = max channel; saturation = (max−min)/max; hue = the same wheel angle HSL uses. #1e90ff gives hsv(209.6, 88.2%, 100%) – value 100% because its blue channel is already at 255.
What is the difference between value and lightness?
Value is the brightest channel; lightness averages the extremes. A fully saturated pure color has V = 100% but L = 50% – HSV calls the pure color "brightest", HSL calls it "half way to white". Neither matches perceived lightness; that is OKLCH's job.
Is HSB the same as HSV?
Yes – B for brightness is Adobe's name for the same V axis. HSB in a Photoshop dialog and HSV in a color library are the identical model with different letters.
Why can't I paste hsv() into CSS?
The CSS specification never adopted it – hsl() covers the same colors and hwb() covers the painter intuition. Use this converter to translate picker HSV numbers into hex or hsl() that stylesheets actually accept.
Does every hex color have a unique HSV?
Every non-gray color, yes. Grays lose the hue (undefined, shown 0) and pure black also loses saturation – the classic degenerate corners every cylindrical model shares.
Which converter goes back the other way?
The HSV to HEX converter accepts hue, saturation and value – straight from a design-tool picker – and returns the exact hex plus all other formats.
