HSL, HSV, RGB and Hex Colour Converter

How to Use This Tool

Change any field and the others follow. The two ramps underneath show what each model does as you push its third value to 100, which is where they part company.

The difference in one sentence

In HSV, value 100% means the brightest version of that hue — a vivid colour. In HSL, lightness 100% means white, whatever the hue, and lightness 50% is where the vivid colour lives.

So the pure blue at hsv(210, 100%, 100%) is hsl(210, 100%, 50%). The hue is the same in both; saturation usually is not; and the third value is a different quantity entirely.

Why this bites in practice

Photoshop, Figma, Sketch and most design tools show HSB, which is the same thing as HSV under a different name. CSS has never supported HSV — it only has HSL. So a designer reads "210, 90, 100" off a picker, a developer types hsl(210, 90%, 100%) into a stylesheet, and the result is white.

It fails quietly in the other direction too. A value like hsl(210, 90%, 100%) is perfectly valid CSS, so nothing errors, no linter complains, and the element simply looks wrong. The usual symptom is a colour that is far too pale, because HSL lightness above 50% is mixing toward white.

HSV never reaches white by raising V; HSL reaches it at 100 and cannot avoid it.

Which to use for what

HSL for CSS, because it is what CSS accepts. It is also convenient for building a palette: hold hue and saturation, vary lightness, and you get a tint and shade scale in one line each.
HSV for picking, because it maps onto how a colour picker is drawn — a square of saturation against value with a hue strip beside it. That is why every design tool uses it.
Hex for handoff, because it is unambiguous. If a colour is travelling between tools or people, hex removes the entire question.

A caveat about both

Neither model is perceptual. Two colours with the same HSL lightness can look very different in brightness — hsl(60, 100%, 50%) is a blazing yellow and hsl(240, 100%, 50%) is a dark blue, and HSL calls both 50%. If you are building a palette where the steps need to look even, or checking contrast, a perceptual space such as OKLCH is the right tool and these two are not.

Frequently Asked Questions

What is the difference between HSL and HSV?

The third value. In HSV, value 100% is the brightest version of the hue — a vivid colour. In HSL, lightness 100% is white regardless of hue, and the vivid colour sits at 50%. The hue is the same in both and the saturation usually differs, so the numbers are not interchangeable.

Why does my colour turn white when I paste HSL values?

Because you almost certainly copied HSV values from a design tool. HSV value 100% means vivid; HSL lightness 100% means white. Photoshop and Figma show HSB, which is HSV under another name, and CSS only accepts HSL — so the numbers have to be converted, not copied.

Is HSB the same as HSV?

Yes, exactly the same model. B stands for brightness and V for value, and they describe the identical quantity. Adobe tools tend to say HSB and most other software says HSV.

Does CSS support HSV?

No, only HSL — and more recently HWB and OKLCH. There has never been an hsv() function, which is why converting is unavoidable when working from a design tool's picker.

Which model should I use?

HSL for CSS, because that is what it accepts, and it makes tint and shade scales easy by varying lightness alone. HSV for picking colours, because it matches how pickers are drawn. Hex for passing a colour between tools or people, because it is unambiguous.

Are HSL and HSV perceptually accurate?

No. Neither reflects how bright a colour actually looks — hsl(60, 100%, 50%) is a blazing yellow and hsl(240, 100%, 50%) is a dark blue, and HSL calls both 50% lightness. For palettes with visually even steps, or for contrast work, a perceptual space such as OKLCH is the right choice.

HSL and HSV Are Not the Same Thing, and That Is Why Your Colour Looks Wrong

How the calculation works