HEX to HSV Converter
Take any hex colour code and read it as hue, saturation and value (HSV/HSB) so you can adjust it intuitively in design software — same colour, friendlier controls.
H°
S%
V%
What is HEX to HSV conversion?
A hex code such as #0070DC is a precise but unintuitive way to describe a colour — it's great for storing and sharing, less great for tweaking. HSV (Hue, Saturation, Value, called HSB in many design apps) describes the very same colour using a colour-wheel angle plus two percentages, which is exactly how on-screen colour pickers work. This tool reads your hex code and reports where it sits on that wheel.
Internally it's a two-step idea: the hex is first decoded into red, green and blue channels, then those channels are mapped onto the hue/saturation/value model. The colour never changes — you're just switching to coordinates that make it easy to say "same hue, a bit darker" or "less saturated" without hunting through hex digits.
Need the code back? The trip is reversible: run the HSV values through our HSV to HEX converter to return to a hex string.
How to convert HEX to HSV
- 1
Paste your hex code
Enter a value like #0070DC; both full #RRGGBB and #RGB shorthand work.
- 2
Read hue, saturation, value
Hue shows in degrees (0–360°) and saturation and value as percentages (0–100%).
- 3
Tune it in your design tool
Match these to the HSB sliders in Photoshop or Figma and adjust the colour by eye.
- 4
Convert onward if needed
Take the HSV values into another format, or back to hex once you're happy.
Why read a hex code as HSV
Intuitive editing
Hue plus two sliders is far easier to reason about than six hexadecimal characters.
Quick darker or lighter
Drop the value for a deeper shade or raise it to lighten, all while keeping the same hue.
Lines up with HSB pickers
Design tools that show HSB use these exact numbers, so they map straight across.
Plan colour schemes
Knowing the hue angle makes it simple to rotate to complementary or analogous colours.
Worked example
Reading a familiar blue hex code as hue, saturation and value.
#0070DChsv(209°, 100%, 86%)From hex digits to a colour wheel
The hue you get out is an angle: imagine the rainbow bent into a circle, with red at 0°, green at 120° and blue at 240°. Saturation measures how far the colour is from grey, and value measures how far it is from black. So #0070DC lands in the blue arc of the wheel at full saturation and high brightness — numbers that tell you far more about the colour at a glance than the hex string does.
A note on HSV and HSL
- HSV here means Hue, Saturation, Value — identical to the HSB shown in Adobe tools.
- It is not the same as the HSL (Lightness) model that CSS supports natively.
- Both share the hue angle, but their third component scales differently and the values don't swap.
- Confirm your tool says HSV or HSB before pasting these numbers in.
Frequently asked questions
No. HSV is just a different way of describing the same colour. The on-screen result is identical; only the coordinate system changes.
Yes. HSV (Value) and HSB (Brightness) are the same model under two names, so these numbers line up with Adobe's HSB sliders.
Yes. Shorthand is expanded to its full six-digit form before the colour is mapped to HSV, so you get the correct result.
Greys, black and white have no colour cast, so their saturation is 0%. In that case the hue is undefined and is conventionally reported as 0°.
Yes. The conversion is reversible — pass the hue, saturation and value into an HSV to HEX tool to get a hex string back.
Keep hue fixed and nudge saturation or value to generate shades and tints. For analogous hues, add or subtract 30° from the hue angle while keeping saturation and value the same — this produces colours that sit next to each other on the colour wheel and look harmonious together.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.