About the HEX to HSV Converter
HSV, written HSB in Adobe products, describes a colour as a hue angle, a saturation percentage and a value percentage, where value means how bright the colour is at full strength. Figma, Photoshop and almost every graphical colour picker are built around exactly those three sliders, so a HEX code lifted out of a stylesheet usually has to be translated before you can dial it in by eye. Paste 3, 4, 6 or 8-digit codes here and each one comes back as an hsv() triple.
The point that catches people out is how value differs from HSL lightness. Value reaches 100 percent at the pure, fully saturated hue, so hsv(0, 100%, 100%) is vivid red. Lightness reaches 100 percent at white, so hsl(0, 100%, 100%) is plain white. If the destination is a stylesheet rather than a design file, reach for HEX to HSL, because no browser understands an hsv() function.
Codes are processed one line at a time and returned in the same order, so a whole palette can go through in a single pass. Alpha from an 8-digit code is discarded, since HSV carries no transparency channel. Going back the other way is handled by HSV to HEX, and the Color Converter shows one colour in every notation at once.
How to use
- Paste HEX codes into the left pane, one per line.
- Press Convert to read the hsv() triples.
- Copy a triple into the HSB or HSV fields of your design tool.
Common questions
- Is HSV the same thing as HSB?
- Yes, though Adobe labels the third channel brightness and calls the model HSB. The numbers themselves match HSV exactly.
- Can I write hsv() in CSS?
- No browser implements an hsv() colour function, so convert to HSL or RGB for stylesheets.
- What happens to the alpha in an 8-digit code?
- It is dropped, because the HSV model has no transparency channel. Keep the original code if the opacity matters.
- Why does grey come back with a hue of 0?
- Grey has no dominant channel, so its hue is undefined and reported as 0 with a saturation of 0 percent.