Hex to HSV Converter
Convert a hex color code into HSV — hue, saturation, and value (brightness) — the model most color pickers use instead of RGB sliders.
How Hex to HSV Conversion Works
HSV describes a color by hue (0-360°), saturation (0-100%), and value (0-100%, the brightness of the most intense RGB channel). Converting from hex means decoding the red, green, and blue channels first, then finding the hue from the dominant channel, and deriving saturation and value from how the channels compare to the maximum channel. HSV is the model behind most color pickers, since dragging a single value slider brightens or dims a color without changing its hue.
Hex to HSV Example, Step by Step
#2563EB = hsv(221, 84%, 92%)
#2563EB (hex) = hsv(221, 84%, 92%)
#2563EB -> rgb(37, 99, 235) Normalize: R=0.145, G=0.388, B=0.922 Max=0.922 (blue), Min=0.145 (red) Value = Max = 0.922 -> 92% Saturation = (Max - Min) / Max = 0.843 -> 84% Hue = 221 (blue-dominant)
| Step | Description | Result |
|---|---|---|
| Decode hex to RGB | #2563EB -> rgb(37, 99, 235) | R=37, G=99, B=235 |
| Normalize channels to 0-1 | divide each by 255 | 0.145, 0.388, 0.922 |
| Compute value | value = the maximum channel | V = 92% |
| Compute saturation and hue | based on the spread between max and min channels | S = 84%, H = 221° |
Value here equals the blue channel exactly (0.922 = 92%), since blue is the maximum channel — this is why HSV's value is often described as 'how bright the brightest channel is.'
Common Mistakes With Hex to HSV
- Confusing HSV's value with HSL's lightness — the two use different formulas and rarely match for the same color.
- Assuming low value always means low saturation — the two are independent axes.
- Reading HSV and HSB as different color models — they're identical, just named differently across tool ecosystems.
Frequently Asked Questions
What does HSV stand for?
Hue (0-360°, position on the color wheel), Saturation (0-100%, how intense the color is), and Value (0-100%, how bright the color is at full intensity).
What's the HSV value of #2563EB?
hsv(221, 84%, 92%) — a blue hue around 221°, high saturation, and high value (brightness).
How is HSV different from HSL?
Both use the same hue, but HSV's 'value' measures the brightness of the most intense channel, while HSL's 'lightness' averages the lightest and darkest channels — the same color can have different saturation and brightness numbers in each model.
Why do color pickers usually show HSV instead of RGB?
HSV separates a color's identity (hue) from its intensity and brightness, so dragging one slider — like value — dims or brightens a color without shifting what color it is.
Is there a difference between HSV and HSB?
No — HSB (hue, saturation, brightness) is the exact same color model as HSV, just under a different name used by Adobe and other design-tool ecosystems.