RGB to HSV Converter
Translate red-green-blue channels into hue, saturation and value (HSV/HSB) — the model design software uses to make colours easy to pick and adjust by eye.
H°
S%
V%
What is RGB to HSV conversion?
HSV — Hue, Saturation, Value, and often labelled HSB (Brightness) in tools like Photoshop and Figma — is an alternative way to describe the exact same colour an RGB triplet represents. Instead of three light channels, HSV uses a colour wheel: hue is the angle on that wheel from 0° to 360°, saturation is how vivid the colour is (0–100%), and value is how bright it is (0–100%).
The point of HSV isn't precision — RGB already gives you that — it's intuition. Picking a hue and then dialling saturation and value up or down mirrors how people actually think about colour, which is why colour pickers are built around it. This converter takes your RGB numbers and works out the corresponding wheel position so you can keep editing in whichever model suits the task.
RGB and HSV describe the same colour, so the change is conceptual rather than visual. You can convert back with our HSV to RGB converter whenever you need the channel values again.
How to convert RGB to HSV
- 1
Enter the RGB channels
Provide red, green and blue as whole numbers between 0 and 255.
- 2
Read the HSV result
Hue appears in degrees (0–360°); saturation and value appear as percentages (0–100%).
- 3
Adjust by eye
Nudge the hue, saturation or value to refine the colour the way a colour picker would.
- 4
Copy what you need
Grab the HSV values for your design tool, or convert them onward to another format.
Why work in HSV
Matches how we see colour
Choosing a hue first, then tuning vividness and brightness, is far more natural than juggling three light channels.
Easy tints and shades
Lower the value for a darker shade or drop saturation for a softer tint while the hue stays put.
Same as HSB
HSV and HSB are identical, so these numbers line up with the picker in Photoshop, Figma and similar apps.
Build harmonious palettes
Rotating the hue by fixed angles is the basis of complementary and triadic colour schemes.
Worked example
The same blue from our RGB to HEX example, expressed in HSV.
rgb(0, 112, 220)hsv(209°, 100%, 86%)Reading the three HSV components
- Hue (0–360°) is the base colour: 0° red, 120° green, 240° blue, wrapping back to red at 360°.
- Saturation (0–100%) is intensity — 0% is a shade of grey, 100% is fully vivid.
- Value (0–100%) is brightness — 0% is black regardless of the other components.
- A greyscale colour has no meaningful hue, so its hue is conventionally reported as 0°.
HSV versus HSL — not the same thing
HSV is often confused with HSL (Hue, Saturation, Lightness), which CSS supports directly. They share a hue but differ in the third axis: HSV's value tops out at a fully bright pure colour, whereas HSL's lightness peaks at white. The numbers don't interchange, so make sure your design tool is showing HSV/HSB before pasting these values.
Frequently asked questions
Yes — HSV (Value) and HSB (Brightness) are two names for the identical model. Adobe and several other tools say HSB, but the hue, saturation and third value are calculated the same way.
No. HSV is just a different coordinate system for the same colour. The pixels on screen look identical; only the way you describe and adjust them changes.
Pure greys, black and white have no colour cast, so their hue is undefined. By convention it's reported as 0°, with saturation at 0% telling you there's no actual colour there.
Yes. The mapping is reversible — feed the hue, saturation and value into an HSV to RGB tool to recover the original channel numbers.
No. CSS hsl() uses lightness, not value, so the third number behaves differently and the two aren't interchangeable even though they share the hue angle.
Convert the RGB to HSV first. Then hold the hue fixed, and step the value from 20% up to 100% for shades and tints. You can also lower saturation slightly for softer, muted variants. Working in HSV makes each step predictable and intentional.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.