🎨 HSV to RGB and HEX Converter
By ToolNimba Color Team · Updated 2026-06-19
HSV / HSB
Edit HSV, RGB or HEX, or use the picker. The other fields update live.
HSV (also called HSB) describes a color by its hue, saturation and value (brightness) instead of red, green and blue. This converter turns any HSV color into RGB and HEX, and works the other way too: paste a hex code or RGB triple, or use the picker, and it shows the matching HSV. A live swatch previews the color as you type, so you can dial in a shade by feel and copy the exact code your CSS or design tool needs.
What is the HSV Color Converter?
HSV stands for Hue, Saturation, Value, and HSB (Hue, Saturation, Brightness) is the same model under a different name. Hue is an angle on the color wheel from 0 to 360 degrees: 0 is red, 120 is green, 240 is blue, and it wraps back to red at 360. Saturation runs from 0 to 100 percent and controls how vivid the color is, where 0 is a shade of grey and 100 is fully colorful. Value (brightness) also runs from 0 to 100 percent, where 0 is always black and 100 is the brightest version of that hue.
HSV was designed to match how people think about adjusting color. Picking a hue, then deciding how strong and how bright it should be, is far more intuitive than guessing three RGB channel numbers. That is why color pickers in design software and many CSS workflows expose HSV or its close relative HSL. Screens, however, still draw in RGB, so the value you choose in HSV has to be converted to red, green and blue (and then to a six-digit hex string) before a browser or display can render it.
HSV and HSL look similar but treat lightness differently. In HSV, raising Value toward 100 gives the pure, fully bright hue, and you reduce Saturation to move toward white. In HSL, Lightness at 100 is always white and at 50 is the pure hue, so the same color often has different S and L numbers than its S and V numbers. Neither is more correct: HSV maps well to a paint-mixing or brightness mental model, while HSL is symmetric around a middle lightness, which some people find easier for building light and dark variants of one hue.
When to use it
- Converting an HSV or HSB value from a design tool into the hex code your CSS or HTML needs.
- Reading the HSV of an existing hex color so you can nudge its hue, saturation or brightness predictably.
- Building a set of tints and shades by holding the hue fixed and stepping the value or saturation.
- Teaching or learning how the HSV color model maps onto RGB and screen colors.
How to use the HSV Color Converter
- Enter a hue from 0 to 360, a saturation from 0 to 100, and a value from 0 to 100.
- Read the matching RGB triple and HEX code, and check the live swatch.
- To go the other way, type a hex code or rgb(...) value, or use the color picker, and the HSV fields update.
- Use the copy buttons to grab the HSV, RGB or HEX string for your project.
Formula & method
Worked examples
Convert HSV(210, 50, 80) to RGB and HEX.
- S = 50 ÷ 100 = 0.5, V = 80 ÷ 100 = 0.8
- C = V x S = 0.8 x 0.5 = 0.4
- H' = 210 ÷ 60 = 3.5, which falls in the [3,4) sextant: (R',G',B') = (0, X, C)
- X = C x (1 - |3.5 mod 2 - 1|) = 0.4 x (1 - 0.5) = 0.2
- m = V - C = 0.8 - 0.4 = 0.4
- R = (0 + 0.4) x 255 = 102, G = (0.2 + 0.4) x 255 = 153, B = (0.4 + 0.4) x 255 = 204
Result: rgb(102, 153, 204) which is hex #6699CC, a soft slate blue
Convert HSV(120, 100, 50) to RGB and HEX.
- S = 1.0, V = 0.5
- C = V x S = 0.5 x 1 = 0.5
- H' = 120 ÷ 60 = 2, sextant [2,3): (R',G',B') = (0, C, X)
- X = C x (1 - |2 mod 2 - 1|) = 0.5 x (1 - 1) = 0
- m = V - C = 0.5 - 0.5 = 0
- R = 0, G = (0.5 + 0) x 255 = 128, B = 0
Result: rgb(0, 128, 0) which is hex #008000, a dark green
Common colors in HSV, RGB and HEX
| Color | HSV | RGB | HEX |
|---|---|---|---|
| Red | hsv(0, 100, 100) | rgb(255, 0, 0) | #FF0000 |
| Green | hsv(120, 100, 100) | rgb(0, 255, 0) | #00FF00 |
| Blue | hsv(240, 100, 100) | rgb(0, 0, 255) | #0000FF |
| Yellow | hsv(60, 100, 100) | rgb(255, 255, 0) | #FFFF00 |
| White | hsv(0, 0, 100) | rgb(255, 255, 255) | #FFFFFF |
| Black | hsv(0, 0, 0) | rgb(0, 0, 0) | #000000 |
| Grey (mid) | hsv(0, 0, 50) | rgb(128, 128, 128) | #808080 |
What each HSV channel controls
| Channel | Range | Effect |
|---|---|---|
| Hue (H) | 0 to 360 | The base color as an angle on the wheel: 0 red, 120 green, 240 blue. |
| Saturation (S) | 0 to 100 | How vivid the color is. 0 is grey, 100 is fully colorful. |
| Value (V) | 0 to 100 | How bright the color is. 0 is black, 100 is the brightest hue. |
Common mistakes to avoid
- Treating HSV and HSL as interchangeable. They share a hue but differ on the third channel. HSV Value at 100 gives the pure bright hue, while HSL Lightness at 100 is always white. Plugging HSV numbers into an HSL field (or the reverse) gives the wrong color, so confirm which model your tool uses.
- Putting saturation or value on a 0 to 255 scale. In HSV, hue is 0 to 360 but saturation and value are percentages from 0 to 100, not 0 to 255. Only the RGB channels use 0 to 255. Mixing the scales produces clipped or wrong colors.
- Expecting hue to matter when saturation is zero. When saturation is 0 the color is a neutral grey and the hue has no visible effect. hsv(0, 0, 50) and hsv(200, 0, 50) are the same grey, so do not rely on hue alone to change a desaturated color.
- Forgetting that HSV is device dependent. The RGB and hex output assumes a standard sRGB screen. The same hex can look slightly different across monitors, so treat the conversion as accurate in math but approximate to the eye on uncalibrated displays.
Glossary
- Hue
- The base color expressed as an angle from 0 to 360 degrees on the color wheel.
- Saturation
- How pure or vivid a color is, from 0 (grey) to 100 percent (fully colorful).
- Value (Brightness)
- How light or dark a color is in HSV, from 0 (black) to 100 percent (brightest version of the hue).
- HSB
- Hue, Saturation, Brightness, an alternative name for the HSV model. The two are identical.
- Chroma
- The colorfulness of a hue, computed as Value times Saturation in the HSV to RGB conversion.
- sRGB
- The standard red, green and blue color space used by most screens and by hex color codes on the web.
Frequently asked questions
What is the difference between HSV and HSB?
There is no difference. HSV (Hue, Saturation, Value) and HSB (Hue, Saturation, Brightness) are two names for exactly the same color model. Adobe tools tend to say HSB while many other tools say HSV, but the numbers and the math are identical.
How do I convert HSV to RGB?
Treat saturation and value as fractions of 1, compute chroma C = V times S, find the position of the hue within a 60 degree sextant, derive the intermediate value X, then add the offset m = V - C to each channel and scale by 255. This tool runs that conversion for you the moment you enter HSV.
What is the difference between HSV and HSL?
Both start from the same hue, but the third channel behaves differently. In HSV, Value at 100 gives the pure bright hue and you lower saturation to reach white. In HSL, Lightness at 100 is always white and 50 is the pure hue. As a result the same color usually has different saturation and lightness numbers in the two systems.
Why does hue not change anything when saturation is 0?
At zero saturation the color is a neutral grey with no color content, so the hue angle has nothing to act on. hsv(0, 0, 50) and hsv(280, 0, 50) render as the identical grey. You need some saturation before a hue change is visible.
Can I convert a hex code back to HSV?
Yes. This converter is two-way: type a hex code such as #6699CC or an rgb(...) value, or use the color picker, and the HSV (HSB) fields update to match. That makes it easy to read and then adjust the hue, saturation or brightness of an existing color.
Is the HSV conversion exact?
The math is exact within rounding to whole RGB values from 0 to 255 and whole HSV values. Any small mismatch when you round-trip a color comes from that integer rounding. How the final hex looks to your eye can still vary on uncalibrated or non-sRGB displays.
Sources
- HSL and HSV , Wikipedia
- hsl() and hsv() color functions , MDN Web Docs