RGB to HSV Colour Converter

How it works

Write one colour per line; there is no direction to pick, because the tool recognises the notation. rgb(154, 52, 18), the bare triple "154 52 18" and a HEX code such as #9A3412 are read as RGB and converted to HSV: this brick red becomes hsv(15, 88%, 60%) — hue 15 degrees, saturation 88 percent, value 60 percent. In the other direction, hsv(145, 70%, 55%) gives you rgb(42, 140, 83) and the green #2A8C53. Photoshop's colour picker shows the same numbers under the name HSB, so hsb(15, 88, 60) and "H15 S88 B60" are accepted too. One thing to watch: three plain numbers without a prefix or symbol are always treated as RGB. Typing "24 88 60" gives a dark green RGB colour; if you mean HSV, write hsv(24, 88%, 60%) or 24° 88% 60%. If you work with OpenCV in Python, choose the OpenCV scale as output and the values come out in the 0-179 and 0-255 ranges that library expects. Lines that cannot be read are flagged in the output while the rest are still converted.

This tool is also known as rgb to hsv, hsv to rgb, hex to hsv, rgb to hsv converter, hsv to hex, hsb to rgb, rgb to hsb.

What is HSV (HSB)?

HSV describes a colour with three answers: Hue says where it sits on the colour wheel in degrees, Saturation how vivid or greyed-out it is, and Value how bright it is. Hue 0 is red, 120 green and 240 blue; with saturation at zero the colour turns grey, with value at zero it turns black. Photoshop shows the same model as HSB. It is calculated from RGB — not a new colour space, but a way of writing RGB that matches how people describe colour.

What is Hue angle?

Hue is the colour's position on the colour wheel, written in degrees: 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta, and 360 comes back round to red — which is why the tool returns 0 for 360. Greys, white and black have no hue; the formula reports 0 for them. To tell whether two colours belong to the same family, comparing their hue angles is enough, whereas their RGB numbers can look completely unrelated.

What is RGB?

RGB writes the red, green and blue light of each pixel as three numbers from 0 to 255, and it is the only language browsers, phones and monitors understand directly. Because the numbers follow the hardware, making a colour a little lighter or duller in RGB means changing all three at once. Converting to HSV reduces that adjustment to one number; the adjusted value is then converted back to RGB or HEX for the screen.

What is the difference between HSV and HSL?

Both write hue on the same degree scale; they differ in the third value. In HSV the purest version of a colour sits at value 100 percent and saturation 100 percent, and white is saturation 0 with value 100. In HSL the pure colour sits at lightness 50 percent, and lightness 100 is white whatever the hue. As a result the same colour has a different saturation figure in the two models. CSS understands hsl() but not hsv(), while the colour pickers in design software mostly use HSV/HSB. If you need HSL, the site's colour code converter turns HEX into HSL.

Why does the same colour show different HSV numbers in different programs?

HSV has one formula but no single way of writing the result; each program spreads it over its own scale. Photoshop and GIMP show hue in degrees from 0 to 360 and saturation and value as percentages from 0 to 100 — the scale this tool uses. Python's colorsys module returns all three as fractions between 0 and 1. OpenCV halves the hue to fit 8-bit images, so it runs from 0 to 179, and stretches saturation and value to 0-255. Pillow's HSV mode keeps all three channels in 0-255.

So before you paste an HSV value from a code sample or a tutorial, check which scale it was written in. Yellow written as (30, 255, 255) in OpenCV is hsv(60, 100%, 100%) in degrees and percent; typing the OpenCV numbers straight into this box gives the wrong colour. The OpenCV scale is offered as output only, and OpenCV's own integer arithmetic can differ from it by one unit.

Where HSV helps — and where it does not

HSV splits a colour the way people think about it: which colour (hue), how vivid (saturation), how bright (value). To build lighter and darker shades of a brand colour you keep the hue and move only the value, so the colour family stays intact. In image processing, picking out one colour — a green screen, a red traffic sign — is done with an HSV range rather than an RGB one, because hue barely changes when light and shadow do.

CSS, however, has no hsv() function; on a web page you write colours as HEX, rgb() or hsl(). That is why this tool prints HEX and RGB next to every HSV value: you find the colour in a picker and copy its HEX code into your stylesheet.

• Photoshop/GIMP colour picker, design files → HSV/HSB (degrees and percent)
• Websites, CSS, slides → HEX or rgb()
• Colour masks with Python + OpenCV → OpenCV scale (0-179, 0-255)

Frequently asked questions

How do I convert RGB to HSV?

Write the colour on one line as rgb(154, 52, 18) or simply "154 52 18"; the result appears as hsv(15, 88%, 60%) with a colour swatch. If you have a HEX code (#9A3412), paste that directly.

Is HSV the same as HSB?

Yes. Value (V) and brightness (B) describe the same number; Photoshop calls the model HSB, many other programs call it HSV. This tool also reads hsb(…) and "H15 S88 B60" as HSV.

Why don't OpenCV hue values go above 180?

OpenCV stores each channel of an 8-bit image in 0-255. A 360-degree hue does not fit, so it is halved to 0-179, while saturation and value are scaled to 0-255. Choose the OpenCV scale as output format and the values are written in those ranges.

I typed three numbers and got the wrong colour — why?

Three numbers without a prefix or symbol are read as RGB. To enter HSV, use hsv(24, 88%, 60%) or add the degree and percent signs; the tool then treats the line as HSV.