ToolNimba
Home
Unit Converters Math & Numbers Finance & Money Health & Fitness Text Tools SEO Tools Developer Tools Color Tools Generators Image Tools Education & Grades Date & Time Construction & Home YouTube Tools
Blog All tools (A to Z)

🎨 HSV Converter: HSV to RGB, HEX and Back

Shihab Mia By Shihab Mia · Updated 2026-07-29

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, design tool or code 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, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta, 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 regardless of hue or saturation, and 100 is the brightest version of that hue.

HSV was designed in the 1970s to match how people actually think about adjusting color, an approach sometimes credited to computer graphics pioneer Alvy Ray Smith. Picking a hue, then deciding how strong and how bright it should be, is far more intuitive than guessing three RGB channel numbers by trial and error. That is why color pickers in Photoshop, GIMP, Figma and most design software expose HSV (often labeled HSB) as a set of sliders or a color wheel with a triangle. Screens, however, still draw in RGB, so the value you choose in HSV has to be converted to red, green and blue, and then usually to a six-digit hex string, before a browser or display can render it.

HSV and HSL look similar and share the same hue angle, but they treat the third channel very differently. In HSV, raising Value toward 100 gives the pure, fully bright hue, and you reduce Saturation to move toward white; the color never gets any lighter than the pure hue itself. In HSL, Lightness at 100 is always white and at 50 is the pure hue, so the model is symmetric around a middle grey. The practical effect is that the same visual color usually has different S numbers (and a different third number) in the two systems, so an S of 50 in HSV is not the same shade as an S of 50 in HSL. Neither model is more correct: HSV maps well to a paint-mixing or spotlight-brightness mental model, while HSL is easier for building light and dark variants of one hue around a fixed midpoint.

HSV also shows up constantly in image processing and computer vision, not just design. Converting a photo from RGB to HSV and thresholding on the Hue channel is a standard way to isolate an object of a known color (a red stop sign, a green screen, a specific product on a shelf) while ignoring differences in lighting, because lighting mostly changes Value, not Hue. Libraries like OpenCV use HSV internally for exactly this reason, though OpenCV represents an 8-bit HSV image with Hue scaled to 0 to 179 (not 0 to 360) and Saturation and Value scaled to 0 to 255 (not 0 to 100), which trips up a lot of people copying formulas from a math reference into code.

Unlike HSL, HSV has no dedicated CSS function. Modern CSS supports hsl() and hsla() directly in stylesheets, but there is no hsv() or hsb() keyword a browser understands, so any HSV color a designer picks has to be converted to RGB or HEX before it can be used in CSS, an image, or an SVG fill. That conversion step is exactly what this tool automates in both directions, so you are not doing sextant math by hand every time a design spec hands you H, S and V numbers.

When to use it

  • Converting an HSV or HSB value from Photoshop, GIMP or Figma 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.
  • Setting up a color threshold for image processing or computer vision, where isolating a hue range is easier in HSV than in RGB.
  • Teaching or learning how the HSV color model maps onto RGB, hex and screen colors.
  • Checking a design spec written in HSV against a brand hex code to confirm they are actually the same color.

How to use the HSV Color Converter

  1. Enter a hue from 0 to 360, a saturation from 0 to 100, and a value from 0 to 100.
  2. Read the matching RGB triple and HEX code, and check the live swatch.
  3. To go the other way, type a hex code or rgb(...) value, or use the color picker, and the HSV fields update.
  4. Use the copy buttons to grab the HSV, RGB or HEX string for your project.
  5. If you are working in OpenCV or another 8-bit image library, remember to rescale H, S and V to that library's 0 to 179 / 0 to 255 ranges after reading the standard values here.

Formula & method

Let S and V be fractions of 1. C = V x S (chroma). H' = H / 60. X = C x (1 - |H' mod 2 - 1|). m = V - C. Pick (R',G',B') by the sextant of H' (for example H' in [0,1): (C, X, 0)), then R = (R'+m) x 255, G = (G'+m) x 255, B = (B'+m) x 255. To go from RGB to HSV: let R', G', B' be R/255, G/255, B/255, Cmax = max(R',G',B'), Cmin = min(R',G',B'), and Delta = Cmax - Cmin. Value = Cmax. Saturation = 0 if Cmax is 0, otherwise Delta / Cmax. Hue is computed from Delta and which channel is Cmax, then multiplied by 60 and taken mod 360.
HSV to RGB, step by stepHue0 to 360Saturation0 to 100Value0 to 100C, X, mRGBand HEXExample: hsv(210, 50, 80) becomes rgb(102, 153, 204), hex #6699CC

Worked examples

Convert HSV(210, 50, 80) to RGB and HEX.

  1. S = 50 / 100 = 0.5, V = 80 / 100 = 0.8
  2. C = V x S = 0.8 x 0.5 = 0.4
  3. H' = 210 / 60 = 3.5, which falls in the [3,4) sextant: (R',G',B') = (0, X, C)
  4. X = C x (1 - |3.5 mod 2 - 1|) = 0.4 x (1 - 0.5) = 0.2
  5. m = V - C = 0.8 - 0.4 = 0.4
  6. 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.

  1. S = 1.0, V = 0.5
  2. C = V x S = 0.5 x 1 = 0.5
  3. H' = 120 / 60 = 2, sextant [2,3): (R',G',B') = (0, C, X)
  4. X = C x (1 - |2 mod 2 - 1|) = 0.5 x (1 - 1) = 0
  5. m = V - C = 0.5 - 0.5 = 0
  6. R = 0, G = (0.5 + 0) x 255 = 128, B = 0

Result: rgb(0, 128, 0) which is hex #008000, a dark green

Convert hex #FF8040 (a common orange) to HSV.

  1. RGB = (255, 128, 64), so R' = 1.0, G' = 0.502, B' = 0.251
  2. Cmax = 1.0 (red channel), Cmin = 0.251 (blue channel), Delta = 0.749
  3. Value = Cmax = 1.0, so V = 100
  4. Saturation = Delta / Cmax = 0.749 / 1.0 = 0.749, so S = 75
  5. Since Cmax is R: Hue = 60 x (((G'-B')/Delta) mod 6) = 60 x (((0.502-0.251)/0.749) mod 6) = 60 x 0.335 = 20.1

Result: hsv(20, 75, 100), a warm orange

Common colors in HSV, RGB and HEX

ColorHSVRGBHEX
Redhsv(0, 100, 100)rgb(255, 0, 0)#FF0000
Orangehsv(30, 100, 100)rgb(255, 128, 0)#FF8000
Yellowhsv(60, 100, 100)rgb(255, 255, 0)#FFFF00
Greenhsv(120, 100, 100)rgb(0, 255, 0)#00FF00
Cyanhsv(180, 100, 100)rgb(0, 255, 255)#00FFFF
Bluehsv(240, 100, 100)rgb(0, 0, 255)#0000FF
Magentahsv(300, 100, 100)rgb(255, 0, 255)#FF00FF
Whitehsv(0, 0, 100)rgb(255, 255, 255)#FFFFFF
Grey (mid)hsv(0, 0, 50)rgb(128, 128, 128)#808080
Blackhsv(0, 0, 0)rgb(0, 0, 0)#000000

RGB formula by hue sextant (C = chroma, X = second largest component, m = V - C)

H' rangeSextant(R', G', B')
0 to 1Red to yellow(C, X, 0)
1 to 2Yellow to green(X, C, 0)
2 to 3Green to cyan(0, C, X)
3 to 4Cyan to blue(0, X, C)
4 to 5Blue to magenta(X, 0, C)
5 to 6Magenta to red(C, 0, X)

HSV channel ranges: math reference vs OpenCV 8-bit images

ChannelStandard rangeOpenCV (8-bit) range
Hue (H)0 to 360 degrees0 to 179
Saturation (S)0 to 100 percent0 to 255
Value (V)0 to 100 percent0 to 255

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 the standard HSV model, 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.
  • Reusing OpenCV HSV ranges outside OpenCV. OpenCV stores 8-bit HSV images with Hue from 0 to 179 and Saturation and Value from 0 to 255, to fit each channel in one byte. Pasting an OpenCV hue value straight into a design tool that expects 0 to 360 will give a hue roughly twice too small (or too large the other way), so always convert scales when moving between code and design.
  • 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.
  • Assuming CSS has an hsv() function. CSS supports hsl() and hsla() natively, but there is no hsv() or hsb() function in any browser. An HSV color picked in design software must first be converted to RGB or HEX (or to HSL) before it can be used in a stylesheet.
  • 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 before lightness is added back in, computed as Value times Saturation in the HSV to RGB conversion.
Achromatic
Having no hue, meaning saturation is 0. Achromatic colors are the greys between black and white.
Color wheel
A circular arrangement of hues from 0 to 360 degrees, used to visualize how HSV picks a base color before adjusting saturation and value.
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.

How do I convert RGB to HSV by hand?

Divide each RGB channel by 255, find the maximum (Cmax) and minimum (Cmin) of the three, and take Delta = Cmax - Cmin. Value equals Cmax. Saturation is 0 if Cmax is 0, otherwise Delta divided by Cmax. Hue depends on which channel is largest and is scaled by 60 degrees per step, then taken modulo 360. Paste a hex or RGB value into this tool to see the result without doing the arithmetic yourself.

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 third-channel 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.

Does CSS support HSV or HSB colors directly?

No. CSS has a native hsl() function but no hsv() or hsb() function in any browser. If a design spec gives you HSV values, convert them to RGB, HEX or HSL first (this tool does that instantly) before using them in a stylesheet.

Why does OpenCV give different HSV numbers than this converter?

OpenCV stores 8-bit HSV images with Hue scaled to 0 to 179 and Saturation and Value scaled to 0 to 255, so each channel fits in a single byte, instead of the standard 0 to 360 and 0 to 100 ranges used here and in most design tools. Divide OpenCV's hue by roughly 0.5 (or multiply by 2) to compare it with the values on this page.

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.

Why is HSV useful for image processing and not just design?

Separating hue from brightness makes it easier to detect an object of a known color under changing light, because shadows and highlights mostly change Value while Hue stays close to constant. That is why computer vision libraries commonly convert a photo to HSV before thresholding on color, instead of thresholding directly on RGB.

Sources