Hex to HSV Color Converter
Convert a CSS hex color to HSV (hue, saturation, value/brightness) for use in design and image software.
How to use this tool
- Enter a hex color code.
- Read the hue (0–360°), saturation (0–100%), and value/brightness (0–100%).
- HSV is the same as HSB; 'V' and 'B' both stand for brightness.
Convert a hex color to HSV (also called HSB — Hue, Saturation, Brightness), the model used in color pickers in Photoshop and many design apps.
Formula
Parse hex to normalized r, g, b (0–1). Then:max = max(r, g, b), min = min(r, g, b), d = max − min
V = max (value/brightness)S = d / max (or 0 if max = 0)
Hue sector (same as HSL):
• R max: H = ((g−b)/d + 6) mod 6
• G max: H = (b−r)/d + 2
• B max: H = (r−g)/d + 4
Then H = H/6 × 360°
How it works
HSV (Hue, Saturation, Value) represents colors as an angle on the color wheel (hue), a measure of how much white light is mixed in (saturation), and an overall brightness ceiling (value). Unlike HSL, where maximum saturation sits at 50% lightness, HSV places maximum saturation and value at the pure vivid hue — which makes HSV the preferred model in color-picker wheels used by image editing software such as Photoshop and GIMP.
A common mistake is confusing HSV's Value (brightness ceiling, 0–100%) with HSL's Lightness — they measure different things. Pure white is HSV (0°, 0%, 100%) but HSL (0°, 0%, 100%); pure red is HSV (0°, 100%, 100%) but HSL (0°, 100%, 50%). Swapping the models when communicating with designers or entering values into software produces noticeably wrong colors.
Worked example
Convert hex #ff0000 (pure red) to HSV
- Parse: r = 1.0, g = 0.0, b = 0.0; max = 1.0, min = 0.0, d = 1.0.
- V = max = 1.0 → 100%; S = d/max = 1.0/1.0 = 1.0 → 100%.
- R is max: H = ((0−0)/1 + 6) mod 6 = 6 mod 6 = 0; H = 0/6 × 360 = 0°.
hsv(0, 100%, 100%)
Common mistakes to avoid
- Confusing HSV (hue, saturation, value) with HSL (hue, saturation, lightness) -- a pure fully-saturated color is S=100% V=100% in HSV but S=100% L=50% in HSL.
- Entering an 8-digit hex (with alpha) instead of a 6-digit hex -- the extra two digits represent alpha and are not part of the HSV calculation.
- Expecting HSV output to match exactly the sliders in Photoshop or Illustrator -- some tools label the model as HSB (hue, saturation, brightness) but use identical formulas.
Key terms
- HSV
- Hue-Saturation-Value, a cylindrical color model where Value is the maximum channel brightness (0 = black, 100% = full brightness), used widely in design software color pickers.
- Value (V)
- The brightest possible intensity of the color, equal to the largest of the three normalized RGB channels; 0% is always black regardless of hue or saturation.
- Saturation (HSV)
- The ratio of chromatic range to the maximum channel value; 0% means no color (gray), 100% means the minimum channel is zero (fully vivid hue).
- HSV vs HSL
- Both share the same hue and use saturation, but differ in the third axis: HSV uses brightness (ceiling), while HSL uses lightness (midpoint); pure red is (0°,100%,100%) in HSV but (0°,100%,50%) in HSL.
Frequently asked questions
- What is the difference between HSL and HSV?
- In HSV, Value=100% with Saturation=0% gives white. In HSL, Lightness=100% always gives white regardless of saturation. HSV is more common in design software color pickers.
- Is HSV the same as HSB?
- Yes. HSV (Hue, Saturation, Value) and HSB (Hue, Saturation, Brightness) are identical models with different naming conventions.