HEX to HSV (HSB) converter

Enter a HEX code, with or without the #, and get HSV values, the model behind the color pickers in Photoshop and Figma.

Loading the tool…

Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.

How to use it

  1. Enter hex code.
  2. The result appears straight away and updates as you edit.
  3. Copy the result, or copy a link that keeps the same values to share it.

How it is calculated

Each pair of HEX digits is read as a base-16 number: R = RR, G = GG, B = BB, from 0 to 255; a 3-digit code doubles each digit. Then (RGB kept unrounded): With max and min of R/255, G/255, B/255 and d = max - min: V = max, S = d / max (0 when max = 0), and H comes from the largest channel: 60 × ((G - B) / d mod 6), 60 × ((B - R) / d + 2) or 60 × ((R - G) / d + 4).

Example

Inputs: HEX code = #1E90FF. Result: HSV code: hsv(209.6, 88.2%, 100%); Hue (H): 209.6 °; Saturation (S): 88.2 %.

#1E90FF
hsv(209.6, 88.2%, 100%)

Limits and caveats

  • Transparency (#RRGGBBAA or #RGBA) is not read; enter the 6 or 3 digit color part.
  • Values in the code are rounded to one decimal, so converting back can shift an RGB channel by 1.
  • All values are treated as sRGB, the default web color space, not Display P3 or Adobe RGB.

Questions about this tool

Why convert HEX to HSV?

It lets you enter a brand color in a picker that works in H, S and B, or change its brightness without touching the hue.

Does it accept 3-digit codes like #0AF?

Yes. A 3-digit code is expanded by doubling each digit, so #0AF becomes #00AAFF. The # is optional.

Is HSV the same as HSB?

Yes. They are two names for one model; V (value) and B (brightness) mean the same thing, and Photoshop labels it HSB.