HSL to HSV converter

Type an HSL color and get HSV — what Photoshop and Figma call HSB — as you type. Any other format works too. It runs in your browser; nothing is sent anywhere.

HSL color

HSV (HSB)

HSV has no CSS function. In CSS, paste the HSL, HEX or OKLCH below; use HSV in design tools.

Other ways to write it

All formats

Name and Tailwind

Contrast (WCAG)

Text on white

Text on black

The HSL to HSV formula

Hue is the same in both. Only the other two numbers change: HSV's value is the brightest channel, HSL's lightness is halfway between the brightest and the darkest. With S and L as fractions (60% = 0.6):

V = L + S × min(L, 1 − L)
S_v = 0 if V = 0, else 2 × (1 − L / V)
H stays the same

This walkthrough follows the color in the converter. The last line is the converter's answer, rounded to one decimal like the Color API.

hsl(210 90% 60%)

HSV to HSL: the formula back

L = V × (1 − S_v / 2)
S_l = 0 if L is 0 or 1, else (V − L) / min(L, 1 − L)
H stays the same

Worked back: hsv(210, 75%, 96%) gives L = 0.96 × (1 − 0.375) = 0.6, then S = (0.96 − 0.6) / min(0.6, 0.4) = 0.9, so hsl(210 90% 60%). Paste an hsv() or hsb() into the converter and read HSL under All formats.

HSL vs HSV: same hue, a different “100%”

In HSL, full saturation at 50% lightness is the pure color, and 100% lightness is always white.
In HSV, 100% saturation at 100% value is the pure color, and white is 0% saturation at 100% value.
So pure red is hsl(0 100% 50%) and hsv(0, 100%, 100%), while a pastel like hsl(0 100% 75%) is hsv(0, 50%, 100%): the same saturation number means different things.
Where you meet each: HSL is the one CSS has (hsl()). HSV, also called HSB, is in Photoshop's color picker and in Figma's, which offers HSL too.

Neither is perceptual. Both are a reshuffle of RGB: yellow hsl(60 100% 50%) and blue hsl(240 100% 50%) have the same “lightness” and look nothing alike. For palettes and tints that step evenly, use OKLCH — the converter shows it under All formats.

HSL to HSV: common values

Click a row to load it into the converter.

Color	HSL	HSV
Red	hsl(0 100% 50%)	hsv(0, 100%, 100%)
Orange	hsl(30 100% 50%)	hsv(30, 100%, 100%)
Yellow	hsl(60 100% 50%)	hsv(60, 100%, 100%)
Lime	hsl(120 100% 50%)	hsv(120, 100%, 100%)
Green	hsl(120 100% 25%)	hsv(120, 100%, 50%)
Cyan	hsl(180 100% 50%)	hsv(180, 100%, 100%)
Blue	hsl(240 100% 50%)	hsv(240, 100%, 100%)
Magenta	hsl(300 100% 50%)	hsv(300, 100%, 100%)
Maroon	hsl(0 100% 25%)	hsv(0, 100%, 50%)
Light red	hsl(0 100% 75%)	hsv(0, 50%, 100%)
Medium green	hsl(120 50% 50%)	hsv(120, 66.7%, 75%)
Sky blue	hsl(210 90% 60%)	hsv(210, 75%, 96%)
Rebecca purple	hsl(270 50% 40%)	hsv(270, 66.7%, 60%)
Pale blue-gray	hsl(200 30% 90%)	hsv(200, 6.5%, 93%)
Gray	hsl(0 0% 50%)	hsv(0, 0%, 50%)
White	hsl(0 0% 100%)	hsv(0, 0%, 100%)
Black	hsl(0 0% 0%)	hsv(0, 0%, 0%)

HSL and HSV (HSB): questions

Is HSB the same as HSV? How is HSB different from HSL?

HSB and HSV are two names for one model: hue 0–360°, saturation 0–100%, brightness (value) 0–100%. Photoshop and Figma say HSB. It differs from HSL in the third number: in HSB, 100% brightness at full saturation is the pure color, while HSL needs 50% lightness for that and reaches white at 100%. The hue is identical in both.

Should I use HSL or HSV?

For CSS, HSL — browsers don't read hsv(). In a design tool's color picker, HSV/HSB is what the square next to the hue slider is laid out in. For colors that need to look evenly light, neither: use OKLCH, which the converter also shows.

Is there an hsv() function in CSS?

No. CSS has hsl() and hwb(). HWB is HSV in disguise: whiteness = (1 − S) × V and blackness = 1 − V, so hsv(210, 75%, 96%) is hwb(210 24% 4%).

Why is my HSV 0.1 off from another converter?

Rounding. This page rounds to one decimal, the same as the Color API's /v1/convert, starting from the exact color you typed. Tools that round HSL to whole numbers first, or go through 0–255 RGB, can land a tenth or so away.

Does converting between HSL and HSV lose anything?

No. Both describe the same sRGB colors and the two formulas are exact inverses; only the displayed rounding differs. Alpha isn't part of HSV notation, so it's kept in the HEX, RGB and HSL outputs instead.

Chrome extension

Got the color from a web page?

Pick it straight off any page with KD Color: HEX, RGB, HSL and OKLCH in one click.

Add to Chrome

Color API

Do it in code

curl "https://color.koval.tools/v1/convert?value=%233D99F5"

One call returns HEX, RGB, HSL, HSV, CMYK, Lab, LCH and OKLCH. No key needed to try it. Convert docs · Pricing

More converters

HEX to RGB · RGB to HEX · HEX to CMYK · RGB to CMYK · All converters . See all color tools.