RGB to HSV Converter

Convert red, green and blue into hue, saturation and value: the coordinates your design tool's color picker is really using.

Example conversion

rgb(220, 20, 60) converts to hsv(348, 91%, 86%)

About RGB to HSV conversion

Open the color picker in Photoshop, Figma, Illustrator, GIMP or Affinity and you are looking at HSV, even if the fields are labelled HSB. The square gradient you drag around is saturation left to right and value bottom to top; the rail beside it is hue. Converting RGB to HSV gives you the coordinates of that picker: hue as an angle from 0 to 360 degrees, saturation and value as percentages.

HSV models how pigment behaves rather than how light adds up. Value is "how bright is the brightest channel", and saturation is "how far from grey is this". Turn saturation to zero and you slide to grey; turn value to zero and you get black. That maps neatly onto the mental model of mixing paint with white or black, which is why picker interfaces settled on it.

When should you use RGB to HSV?

Entering a color into a design tool - matching a known RGB value using the HSB fields in the picker.
Reproducing a picker position - documenting exactly where in the gradient square a color sits.
Image processing - many algorithms, from skin-tone detection to chroma keying, threshold on hue and saturation rather than RGB.
Building color pickers - HSV is the natural coordinate system for the classic square-plus-hue-rail interface.
Adjusting vividness - saturation in HSV changes how intense a color is without touching its brightness.

How the conversion works

Scale the channels to 0-1 and find the largest, max, and the smallest, min. Then:

Value is simply max - the brightest channel decides how bright the color is.
Saturation is (max - min) / max, which is 0 when all channels are equal and 1 when one channel is at full and another at zero. Black is the exception, where saturation is defined as 0 to avoid dividing by zero.
Hue comes from which channel is largest, measured in 60-degree sectors: red at 0, green at 120, blue at 240.

Hue is calculated the same way as in HSL - the two models share that axis exactly. Only the third dimension differs, which is where the two are routinely confused.

RGB vs HSV

Structure - RGB is a cube of three light channels; HSV is a cylinder of hue angle, saturation radius and value height.
Where you meet HSV - inside color pickers and image editing software, usually labelled HSB.
Not CSS - unlike HSL, hsv() is not a CSS function. For stylesheets convert to HSL or hex instead.
HSV vs HSL - at 100% value a color is at its most vivid, not white. In HSL, 100% lightness is always white. That single difference trips people up constantly.
Same gamut - HSV expresses exactly the same colors as RGB, just addressed differently.

Named CSS colors in RGB and HSV

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

Is HSV the same as HSB?

Yes. HSB stands for hue, saturation and brightness and is the same model under a different name - Adobe uses HSB, most programming libraries say HSV. The numbers are identical.

Why do HSL and HSV give me different numbers for one color?

They agree on hue but define the rest differently. Pure red is hsl(0, 100%, 50%) and hsv(0, 100%, 100%). HSL puts the fully saturated hue in the middle of its lightness scale with white at the top; HSV puts it at the top of its value scale and never reaches white without lowering saturation.

Can I use HSV values in CSS?

Not directly - CSS has hsl() but no hsv(). Convert to HSL or hex first; the RGB to HSL converter handles the common case.

What does saturation 0 mean in HSV?

A grey. With no saturation the hue is irrelevant and value alone sets how light the grey is: value 0 is black, value 100% is white.

Which model should I use for image processing?

HSV is the usual choice for anything that isolates a color by hue - chroma keying, object tracking, masking - because it separates "which color" from "how bright". For measuring how different two colors look to a person, use LAB instead.

Menu