BYTETOOLS

RGB to HSV/HSB Converter

Convert HEX or RGB to HSV (the HSB model in Photoshop and Figma) and back, with the HSL equivalent shown beside it so you can see why they disagree.

Colour

Result

#3b82f6
217.2°
Hue
76.0%
Saturation
96.5%
Value (Brightness)

HSV next to HSL

HSV / HSBhsv(217.2, 76%, 96.5%)
HSLhsl(217.2, 91.2%, 59.8%)
HEX#3b82f6
rgb()rgb(59, 130, 246)

Both models share the same hue, but they measure the other two axes differently. HSV takes value from the brightest channel, so a fully saturated colour keeps V at 100%. HSL puts lightness halfway between the brightest and darkest channel, so that same colour sits at L 50%. That is why the saturation numbers rarely agree: S76% in HSV against S91% in HSL for this colour.

What is the RGB to HSV/HSB Converter?

HSV and HSB are the same model under two names, and it is the one Photoshop, Figma, Sketch and Procreate put in their colour pickers.

  • Two-way HEX/RGB to HSV conversion
  • Shows HSL side by side with an explanation of the difference
  • Matches the HSB numbers in Photoshop and Figma
  • Handles greys and black without producing an undefined hue
  • Copy buttons for HSV, HSL and HEX
  • Everything computed in-browser, nothing uploaded

How to use the RGB to HSV/HSB Converter

  1. 1

    Choose whether you are going from HEX/RGB to HSV, or from HSV back to HEX.

  2. 2

    Type a hex colour, or enter hue, saturation and value in the number fields.

  3. 3

    Read the HSV result, then compare it with the HSL line directly underneath.

  4. 4

    Copy the HSV, HSL or HEX value with the buttons at the bottom of the panel.

About the RGB to HSV/HSB Converter

HSV and HSB are the same model under two names, and it is the one Photoshop, Figma, Sketch and Procreate put in their colour pickers. Value is simply the brightest of the three RGB channels, and saturation is how far the darkest channel sits below it. That makes it easy to keep a colour at full intensity while sliding the hue around.

The catch is that CSS speaks HSL, not HSV, and the two produce different saturation numbers for the same colour. This converter shows both at once, so when your design tool says 76% saturation and your stylesheet says 91%, you can see that nothing is broken — the two models simply measure different things.

Conversion happens locally in your browser with no uploads and no account. Grey and black inputs are handled explicitly, so you get a clean hue of 0 rather than an undefined value.

Frequently asked questions

Is HSV the same as HSB?

Yes, they are two names for one model. HSB stands for hue, saturation, brightness and HSV for hue, saturation, value; the B and the V refer to the same axis. Adobe tends to say HSB, colour-science texts tend to say HSV.

What is the difference between HSV and HSL?

They share a hue but split the remaining two axes differently. HSV takes value from the brightest channel, so a vivid colour sits at V 100%. HSL puts lightness midway between the brightest and darkest channel, so that same colour sits at L 50% and pure white sits at L 100%.

Why does Photoshop show a different saturation than my CSS?

Because Photoshop is reporting HSB saturation and CSS hsl() wants HSL saturation. For #3b82f6 those are 76% and 91% respectively — the same colour, two different measurements. Use the HSL line from this tool for anything going into a stylesheet.

Can I write HSV colors directly in CSS?

No. CSS has hsl() and hwb() but no hsv() function. Convert to HSL or hex first, which is what this tool gives you alongside the HSV output.

What is the hue of black or grey?

Undefined, mathematically — there is no colour to take an angle from. This converter reports 0° for those cases rather than leaving a blank or an error, which is the convention most software follows.

Related tools