HSV to RGB Converter
Read hue, saturation and value off a color picker and turn them into RGB values you can paste into code.
Example conversion
hsv(348, 91%, 86%)
converts to
rgb(220, 20, 60)
About HSV to RGB conversion
You found the color in a picker. The tool shows H, S and B - or H, S and V, same thing - and now you need the numbers your code, your stylesheet or your colleague actually understands. HSV to RGB reads the picker's coordinates and returns the three channels: red, green and blue from 0 to 255.
It is a lossless, purely geometric conversion. HSV is a different way of addressing the same sRGB cube, so every hue, saturation and value triple has exactly one RGB equivalent. Whatever your picker was showing, the RGB result is that color precisely - no gamut compromise, no approximation.
When should you use HSV to RGB?
- Getting a color out of a design tool - Photoshop, Figma and Illustrator report HSB, but developers need RGB or hex.
- Implementing a color picker - the interface works in HSV, the output has to be RGB.
- Generating palettes in code - stepping hue at fixed saturation and value produces evenly spread colors that then need to be emitted as channels.
- Working with image libraries - OpenCV, Pillow and similar tools convert to HSV for masking and back to RGB for output.
- Driving hardware - LED controllers and displays take RGB, while the animation logic is often nicer to write in HSV.
How the conversion works
Saturation and value are scaled to 0-1. The chroma is C = V x
S - how far the color is from grey. The hue angle picks one of six
60-degree sectors, which determines which channel sits at the top, which is
partway up and which is at the bottom. The intermediate channel gets X
= C x (1 - |(H / 60 mod 2) - 1|). Finally m = V - C is
added to all three to raise them to the right brightness, and each is
multiplied by 255.
Compare that with HSL, where the match value is L - C / 2:
the difference in that one term is exactly why the same hue and saturation
produce different colors in the two models.
HSV vs RGB
- Mental model - HSV thinks in "which color, how vivid, how bright"; RGB thinks in "how much of each light".
- Ranges - hue 0-360 degrees plus two percentages, versus three integers from 0 to 255.
- Tooling - HSV lives in design software; RGB lives everywhere else.
- Rounding - HSV values are usually rounded to whole numbers, so a round trip can move a channel by one step.
- Coverage - identical. Neither model can express a color the other cannot.
Named CSS colors in HSV and RGB
The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.
Frequently asked questions
My tool says HSB, not HSV. Can I use this converter?
Yes. HSB (hue, saturation, brightness) and HSV (hue, saturation, value) are the same model with different names - Adobe products say HSB, most code libraries say HSV. Enter the numbers exactly as shown.
Why does value 100% not give me white?
Because in HSV, value is the brightness of the hue, not a slider towards white. At value 100% and saturation 100% you get the most vivid version of the hue. White requires value 100% and saturation 0%. If you want a model where 100% is always white, that is HSL.
What happens when value is 0?
You get black, regardless of hue and saturation. With no brightness there is nothing for the other two axes to describe.
Can I go from HSV straight to a hex code?
Yes - switch the "To" model to HEX in the converter above, or read the hex value from the "this color in every model" panel underneath it.
Which is better for generating a palette, HSV or HSL?
HSV suits palettes built around a picker's look - keep value high and step the hue for a set of vivid, equally bright colors. HSL suits palettes built as tints and shades of one color, because lightness runs cleanly from black through the hue to white.