Convert HSV to HSL
Converting Hue, Saturation, Value (HSV) to Hue, Saturation, Lightness (HSL) is a precise, rule-based operation — both formats describe the same color with different numbers. Whether you are tuning a CSS custom property, matching a brand color across design tools, or preparing values for print, this page gives you an interactive converter, the exact HSV → HSL method, a worked example, a quick-reference table and the details that matter (rounding, gamut and print caveats).
From
To
—
—
—
Live preview
How to convert HSV to HSL
Take this real example — the color firebrick(#c2410c):
hsv(17.47, 93.81%, 76.08%) → hsl(17.47, 88.35%, 40.39%)
- Convert the HSV color to RGB using the HSV → RGB method.
- Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format.
- Convert RGB to HSL with the RGB → HSL method to finish.
HSV → RGB → HSL (RGB is the numeric bridge)
HSV to HSL conversion table
| Color | HSV | HSL |
|---|---|---|
| White | hsv(0, 0%, 100%) | hsl(0, 0%, 100%) |
| Black | hsv(0, 0%, 0%) | hsl(0, 0%, 0%) |
| Red | hsv(0, 100%, 100%) | hsl(0, 100%, 50%) |
| Lime | hsv(120, 100%, 100%) | hsl(120, 100%, 50%) |
| Blue | hsv(240, 100%, 100%) | hsl(240, 100%, 50%) |
| VersatilBox accent | hsv(17.47, 93.81%, 76.08%) | hsl(17.47, 88.35%, 40.39%) |
| Tailwind blue-500 | hsv(217.22, 76.02%, 96.47%) | hsl(217.22, 91.22%, 59.8%) |
| Tailwind emerald-500 | hsv(160.12, 91.35%, 72.55%) | hsl(160.12, 84.08%, 39.41%) |
About these formats
HSV (Hue, Saturation, Value). HSV is like HSL but with brightness ("value") instead of lightness — the model behind classic color pickers and graphics software (also called HSB). An industry convention, not a CSS space.
HSL (Hue, Saturation, Lightness). HSL is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.
Frequently asked questions
How do I convert HSV to HSL?
Convert the HSV color to RGB using the HSV → RGB method. Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format. Convert RGB to HSL with the RGB → HSL method to finish. The converter above does it instantly, including the reverse direction.
What is HSV?
HSV — Hue, Saturation, Value — is like HSL but with brightness ("value") instead of lightness — the model behind classic color pickers and graphics software (also called HSB). An industry convention, not a CSS space.
What is HSL used for?
HSL (Hue, Saturation, Lightness) is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.
Is the HSV → HSL conversion exact?
Yes. The formulas are deterministic and both formats store the same information for on-screen color; values are rounded only for display.
Why does the HSL value look different in other tools?
Small differences come from rounding (how many decimals are kept) and from out-of-gamut handling. This site follows the CSS Color 4 algorithms and shows OKLCH with 3 decimals, the same convention used by browsers and mainstream design tools.