HSL to HSV Converter

How to use the HSL to HSV Converter

Type or paste an HSL color into the HSL field, like hsl(9, 100%, 64%).

The converter computes the matching HSV value as you type and shows it in the HSV field.

Read hue, saturation and value from the hsv(h, s%, v%) result.

Type those numbers into the HSB or HSV fields of your image editor or picker.

Convert HSL to HSV (HSB)

HSL and HSV look alike, and that is exactly why an HSL to HSV converter is handy. Both start with the same hue angle, but they define saturation differently and use a different third axis, so you cannot copy the numbers across.

You meet HSL in CSS. You meet HSV, also called HSB, in the color pickers of Photoshop, GIMP, Affinity and many UI libraries. This tool translates one into the other.

Lightness versus value

Model	Third axis	Pure hue sits at	White sits at
HSL	Lightness: 0% black, 100% white	S 100%, L 50%	L 100% (any S)
HSV	Value: 0% black, 100% brightest	S 100%, V 100%	S 0%, V 100%

So in HSL you get pure red at 50% lightness, while in HSV pure red needs 100% value. Saturation also shifts, because each model measures it against a different reference.

Direct HSL to HSV formula

With S and L as fractions, hue is unchanged and:

V   = L + S_L × min(L, 1 − L)
S_V = 0              if V = 0
S_V = 2 × (1 − L / V) otherwise

Worked example

For hsl(9, 100%, 64%): V = 0.64 + 1 × 0.36 = 1.00 and S_V = 2 × (1 − 0.64 / 1) = 0.72. The HSV equivalent is hsv(9, 72%, 100%).

hsl(9, 100%, 64%)    →  hsv(9, 72.2%, 100%)
hsl(120, 50%, 50%)   →  hsv(120, 66.5%, 74.9%)
hsl(0, 0%, 50%)      →  hsv(0, 0%, 50.2%)

Why 72.2% instead of 72%? The tool converts through 8-bit RGB first. hsl(9, 100%, 64%) becomes rgb(255, 99, 71), and from those whole numbers saturation is (255 − 71) / 255 = 72.2%. Likewise the direct formula gives 66.7% and 75% for the second line, and the rounded RGB value gives 66.5% and 74.9%. The difference is under half a percent and matches what a picker would show for that exact pixel color.

Edge cases worth knowing

Grays, white and black have no hue. The tool reports hue 0 for them, so hsl(120, 100%, 100%) comes out as hsv(0, 0%, 100%).
Any HSL lightness of 100% is white, which in HSV means saturation 0.
Saturation above 100% and hues outside 0–360 are clamped or wrapped before converting.

Need the reverse? Use HSV to HSL. If you start from pixel values, RGB to HSV skips a step, and HSL to HEX gives you a code that every picker accepts.

Frequently asked questions

Is HSV the same as HSB?

Yes. HSB (hue, saturation, brightness) is another name for HSV (hue, saturation, value). Adobe tools say HSB, while many programming libraries say HSV.

Why is the hue the same in HSL and HSV?

Both models compute hue identically from the largest and smallest RGB channels, so the angle on the color wheel does not change. Only saturation and the third component differ.

Why does 50% lightness become 100% value?

In HSL a fully saturated hue sits halfway between black and white, at 50% lightness. In HSV the same color is at maximum brightness, because value measures the strongest RGB channel rather than the average of the strongest and weakest.

Why is HSL saturation different from HSV saturation?

HSL saturation is chroma relative to what is possible at that lightness, while HSV saturation is chroma relative to value. The same color can therefore read 100% in HSL but 72% in HSV, as with hsl(9, 100%, 64%).