Enter red, green and blue values from 0–255 and get the equivalent HSV (also called HSB) — hue, saturation, and value — instantly, with a live colour swatch. HSV is the model behind most colour pickers.
How it works
The converter normalises each RGB channel to 0–1 and finds the maximum (max) and minimum (min) of the three. Value is simply max (as a percent). Saturation is the chroma relative to the max: (max − min) ÷ max, or 0 when max is 0. Hue is found from which channel is the maximum and the relative sizes of the other two, mapped onto the 0–360° wheel — the same hue calculation HSL uses. The tool rounds hue to a degree and saturation and value to whole percents.
Understanding the three HSV components
Hue (0–360°) places the colour on the spectrum. The wheel runs red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°, returning to red at 360°. Hue is the “which colour” component — it is identical in HSV and HSL.
Saturation (0–100%) in HSV measures how far the colour is from a pure gray of the same value. At 0% saturation the colour is gray regardless of hue; at 100% it is the most vivid version of that hue at the current brightness. This is different from HSL saturation, which measures distance from grey differently.
Value (0–100%) is the brightness of the most intense channel. A value of 100% means at least one RGB channel is fully on; 0% means black. This is also called Brightness, which is why HSB and HSV are the same thing. A pure white has value 100% and saturation 0%; a pure black has value 0%.
HSV vs. HSL — the practical difference
Both models share the same hue. The difference is in how they represent the gray-to-vivid and dark-to-light dimensions:
- In HSV, a colour at full saturation and full value is the most vivid possible version of that hue. Reducing value darkens it; reducing saturation grays it.
- In HSL, the same fully saturated hue at 50% lightness is the most vivid version. Increasing or decreasing lightness from there adds white or black rather than simply brightening.
In practice, HSV matches how most designers think about picking a colour from a colour picker — you choose a hue on a spectrum, then drag a cursor across a box where the x-axis is saturation and the y-axis is value. That box layout is HSV.
Worked example
Convert rgb(59, 130, 246):
- max = 246/255 → Value ≈ 96%
- Saturation = (246 − 59) ÷ 246 ≈ 76%
- Hue ≈ 217° (blue region)
- Result: HSV(217°, 76%, 96%)
| RGB | HSV |
|---|---|
| rgb(255, 0, 0) | 0°, 100%, 100% |
| rgb(0, 0, 0) | 0°, 0%, 0% |
| rgb(128, 128, 128) | 0°, 0%, 50% |
| rgb(59, 130, 246) | 217°, 76%, 96% |
The whole conversion runs in your browser — nothing is uploaded.