Convert HSL to HSV
Converting Hue, Saturation, Lightness (HSL) to Hue, Saturation, Value (HSV) 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 HSL → HSV 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 HSL to HSV
Take this real example — the color firebrick(#c2410c):
hsl(17.47, 88.35%, 40.39%) → hsv(17.47, 93.81%, 76.08%)
- Convert the HSL color to RGB using the HSL → RGB method.
- Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format.
- Convert RGB to HSV with the RGB → HSV method to finish.
HSL → RGB → HSV (RGB is the numeric bridge)
HSL to HSV conversion table
| Color | HSL | HSV |
|---|---|---|
| White | hsl(0, 0%, 100%) | hsv(0, 0%, 100%) |
| Black | hsl(0, 0%, 0%) | hsv(0, 0%, 0%) |
| Red | hsl(0, 100%, 50%) | hsv(0, 100%, 100%) |
| Lime | hsl(120, 100%, 50%) | hsv(120, 100%, 100%) |
| Blue | hsl(240, 100%, 50%) | hsv(240, 100%, 100%) |
| VersatilBox accent | hsl(17.47, 88.35%, 40.39%) | hsv(17.47, 93.81%, 76.08%) |
| Tailwind blue-500 | hsl(217.22, 91.22%, 59.8%) | hsv(217.22, 76.02%, 96.47%) |
| Tailwind emerald-500 | hsl(160.12, 84.08%, 39.41%) | hsv(160.12, 91.35%, 72.55%) |
About these formats
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.
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.
Frequently asked questions
How do I convert HSL to HSV?
Convert the HSL color to RGB using the HSL → RGB method. Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format. Convert RGB to HSV with the RGB → HSV method to finish. The converter above does it instantly, including the reverse direction.
What is HSL?
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.
What is HSV used for?
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.
Is the HSL → HSV 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 HSV 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.