HEX to HSV Converter

Convert any HEX color code to HSV (hue, saturation, value) instantly. HSV is the color model behind most color pickers — see your HEX in hue-value space and get RGB, HSL and CMYK values at the same time.

Accepts 3-digit (#0AF) or 6-digit (#155EEF) HEX codes.

Converted Values

HEX#155EEF
RGBrgb(21, 94, 239)
HSLhsl(215, 84%, 51%)
HSVhsv(215, 84%, 94%)
CMYKcmyk(91%, 61%, 0%, 6%)

What Is HEX to HSV Conversion?

HEX to HSV conversion translates a hexadecimal screen color into hue, saturation and value coordinates. HSV (also called HSB — hue, saturation, brightness) is the color model used by virtually every color picker: the Photoshop color square, Figma's color panel, and every HTML color input. It is designed to match how humans adjust colors interactively.

HSV vs HSL — Why Two Models?

HSV and HSL share the same hue and saturation definitions but differ in their third axis:

  • HSV value (V): 0% = black, 100% = fully bright color. Saturation controls how much color is mixed in, and V controls overall brightness. Dragging down the value axis darkens the color toward black without changing hue.
  • HSL lightness (L): 0% = black, 50% = pure color, 100% = white. Lightness goes both toward black and toward white.

Because V only goes toward black, HSV maps naturally to the vertical axis of a picker (bottom = black, top = bright color) and is the model used by the Canvas API, HTML color inputs and most design tools.

How HEX to HSV Works

#155EEF → rgb(21, 94, 239)
Normalized: R=0.082, G=0.369, B=0.937

V = max(R,G,B) = 0.937 → 94%
S = (max - min) / max = (0.937 - 0.082) / 0.937 = 0.912 → 91%
H depends on which channel is max (B here) → 215°

Result: hsv(215, 91%, 94%) ≈ hsv(215, 84%, 94%) after rounding

Example Conversions

  • #FFFFFF → hsv(0, 0%, 100%) — white
  • #000000 → hsv(0, 0%, 0%) — black
  • #FF0000 → hsv(0, 100%, 100%) — red
  • #155EEF → hsv(215, 84%, 94%) — OmniColor blue

When to Use HSV

  • Custom color pickers: HSV is the natural model for building interactive pickers.
  • Image processing: HSV simplifies thresholding (e.g. "find all red pixels").
  • Shader code: GPU code often uses HSV for dynamic effects.
  • Photoshop / Figma / Illustrator: HSV is the underlying model in these tools.
  • Animation: Sweeping through hue at constant S and V produces smooth color animations.

Frequently Asked Questions