RGB to HSV Color Converter

What this tool does

Open the colour picker in almost any image editor and you are looking at HSV, whether or not you know its name. The hue strip down the side and the square you drag within are HSV made visual. So when your colour begins as RGB values and you want to work with it inside that kind of picker, you need it expressed as HSV.

That is what this does. You give it red, green, and blue values, and it returns the same colour as HSV, three numbers for hue, saturation, and value, the form a picker-style interface is built around. Below the tool there is a clear account of what those numbers mean and how HSV differs from the near-identical HSL.

How to use it

1. Enter your RGB values. Put in the red, green, and blue amounts, each from 0 to 255, or choose a colour using the picker.
2. Read the HSV result. The tool gives the hue in degrees and the saturation and value as percentages, right away.
3. Carry it across. Drop the HSV numbers into your editor's colour picker, or use them as a base to work from.

Type the three numbers in, or set a colour with the picker and read its HSV values from the result, whichever suits how you are starting.

How it works

RGB is the form this conversion starts from, so the values feed straight into it with nothing to decode first. The red, green, and blue amounts are recast as a hue angle, a saturation, and a value, the work done by TinyColor, which converts between RGB and HSV reliably in both directions.

The colour does not change in the process. HSV is simply another set of coordinates for the colour the RGB values already name, so the conversion is a change of description, not of colour. What it buys you is a set of numbers shaped around the way picker tools let you choose and fine-tune a colour by eye.

What HSV actually is

HSV stands for hue, saturation, and value, and it sometimes goes by HSB, where the B for brightness means the same as value. The hue is the colour itself, an angle from 0 to 360 degrees around the wheel. The saturation, from zero to one hundred percent, is how pure the colour is, from grey up to fully colourful. The value, also a percentage, is how bright it is, from black up to the colour at full force.

The model earns its keep by matching how colour pickers are laid out. You choose a hue from a strip, then drag around a square whose two axes are saturation and value, and that square is HSV flattened into a plane. That is why the model feels instantly familiar the moment you meet it in software: it is shaped around the act of picking a colour by hand rather than around the physics of light.

How RGB becomes HSV

RGB and HSV describe the same colour from different starting points. RGB gives the amounts of red, green, and blue light a screen emits. HSV gives qualities you can judge by eye: which colour it is, how pure it is, and how bright it is. Both nail down the identical colour, with coordinates aimed at different jobs.

Deriving the HSV numbers means reading the three RGB channels together. The value comes from the strongest channel, since that sets how bright the colour can be. The saturation comes from how far the weakest channel trails the strongest, and the hue comes from which channel leads and by how much. RGB is already the input the formula wants, so the step is clean, and the colour is untouched, only its description reshaped into the form a picker prefers.

Why convert RGB to HSV

The usual reason is that you are working in a tool whose picker speaks HSV. If your colour arrives as RGB values, from a stylesheet, a data file, or a brand guide, converting it lets you enter the colour exactly into that picker and carry on, instead of nudging sliders to creep back toward it.

It also suits certain adjustments. Because value runs cleanly from black up to the full colour, raising or lowering brightness behaves in a predictable way, which is handy for shading and highlighting. Anyone bringing a colour from numbers into an image editor, or tuning it inside a picker-driven interface, will find HSV the form that fits the work.

HSV and HSL pull apart

This is the part most worth pinning down, because the two models look so alike yet behave differently. They agree on hue and saturation, but their third value diverges. In HSL, the L is lightness, and pushing it all the way up always lands on white, with the pure colour sitting halfway. In HSV, the V is value, and pushing it all the way up lands on the pure, fully coloured version, not white.

That single difference ripples through the numbers. A colour at maximum lightness in HSL is white; the same colour at maximum value in HSV is its brightest, most vivid self. So one RGB colour produces different saturation and brightness figures in the two systems, and you cannot swap the numbers between them. HSV tends to show up in image editors and pickers, HSL more often in CSS, so which one you want depends on where the colour is going. Confusing the two is a frequent cause of colours coming out wrong.

Questions people ask

What do the letters in HSV mean?

They stand for hue, saturation, and value. The hue is the colour's position on the wheel, the saturation is how pure it is, and the value is how bright it is. The same model is also written HSB.

Where do HSV and HSL part ways?

They agree on hue and saturation but split on the third number. Pushed to maximum, HSL lightness turns white while HSV value turns the pure colour, so the two sets of figures cannot be swapped between systems.

Why do colour pickers use HSV?

Because it mirrors how you pick a colour by eye: a hue strip plus a square that varies saturation and brightness. That square is HSV laid out flat, which makes the model feel natural inside a picker.

Is HSV the same as HSB?

Yes. HSB stands for hue, saturation, and brightness, and brightness is just another word for value, so HSV and HSB are the same model written with different letters.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. HSL and HSV, the hue-saturation colour models and how they differ. Wikipedia. https://en.wikipedia.org/wiki/HSL_and_HSV
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor