HSL
HSL describes a color by hue (0–360°), saturation (0–100%), and lightness (0–100%). It is the format CSS recommends for human-readable palettes because nudging the hue keeps the same lightness, unlike RGB where every channel matters.
HSL to HSV Color Converter
hsl(16, 100%, 60%) = hsv(16, 79%, 100%)
Convert HSL color values to HSV color values exactly, via the canonical 8-bit sRGB representation. Every result you see is the same number the W3C CSS spec would produce — no proprietary adjustments, no perceptual fudging. Try the live converter below, or scan the reference table for twenty-five named colors and their HSL ↔ HSV pairs.
hsl(H, S%, L%) with hue 0–360, saturation and lightness 0–100
hsv(H, S%, V%) with hue 0–360, saturation and value 0–100
Preview
#FF6933
Try
How to convert HSL color to HSV color
Paste or type your color
Enter the HSL color above. Convertitive accepts hsl(h, s%, l%) with hue 0–360, saturation and lightness 0–100.
Read the HSV value
The result appears the moment your input parses. For example, hsl(16, 100%, 60%) (Convertitive's coral accent) becomes hsv(16, 79%, 100%).
Copy and share
Click the copy button to grab the result. The preview swatch lives-updates so you can sanity-check the conversion at a glance.
HSL to HSV reference table
Twenty-five well-known colors with their HSL and HSVrepresentations side by side. The swatches are rendered directly from the computed RGB, so what you see is exactly what you will ship.
| Name | HSL | HSV | |
|---|---|---|---|
| Black | hsl(0, 0%, 0%) | hsv(0, 0%, 0%) | |
| White | hsl(0, 0%, 100%) | hsv(0, 0%, 100%) | |
| 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%) | |
| Yellow | hsl(60, 100%, 50%) | hsv(60, 100%, 100%) | |
| Cyan | hsl(180, 100%, 50%) | hsv(180, 100%, 100%) | |
| Magenta | hsl(300, 100%, 50%) | hsv(300, 100%, 100%) | |
| Silver | hsl(0, 0%, 75%) | hsv(0, 0%, 75%) | |
| Gray | hsl(0, 0%, 50%) | hsv(0, 0%, 50%) | |
| Maroon | hsl(0, 100%, 25%) | hsv(0, 100%, 50%) | |
| Olive | hsl(60, 100%, 25%) | hsv(60, 100%, 50%) | |
| Green | hsl(120, 100%, 25%) | hsv(120, 100%, 50%) | |
| Teal | hsl(180, 100%, 25%) | hsv(180, 100%, 50%) | |
| Navy | hsl(240, 100%, 25%) | hsv(240, 100%, 50%) | |
| Purple | hsl(300, 100%, 25%) | hsv(300, 100%, 50%) | |
| Orange | hsl(39, 100%, 50%) | hsv(39, 100%, 100%) | |
| Pink | hsl(350, 100%, 88%) | hsv(350, 25%, 100%) | |
| Gold | hsl(51, 100%, 50%) | hsv(51, 100%, 100%) | |
| Tomato | hsl(9, 100%, 64%) | hsv(9, 72%, 100%) | |
| Coral | hsl(16, 100%, 66%) | hsv(16, 69%, 100%) | |
| Salmon | hsl(6, 93%, 71%) | hsv(6, 54%, 98%) | |
| Indigo | hsl(275, 100%, 25%) | hsv(275, 100%, 51%) | |
| Chocolate | hsl(25, 75%, 47%) | hsv(25, 86%, 82%) | |
| Crimson | hsl(348, 83%, 47%) | hsv(348, 91%, 86%) |
Frequently asked questions
- How do I convert HSL color to HSV color?
- Paste your HSL value into the input above. Convertitive parses it, maps it through 8-bit sRGB, and re-emits it in HSV. For example, hsl(16, 100%, 60%) becomes hsv(16, 79%, 100%).
- What is the exact HSV value of hsl(16, 100%, 60%)?
- hsl(16, 100%, 60%) in HSL equals hsv(16, 79%, 100%) in HSV.
- Why might my HSL → HSV round-trip produce a slightly different value?
- HSL and HSV store hue/saturation/lightness as rounded percentages, which costs about ±0.5% of perceived saturation on extreme values. For most UI work the difference is invisible.
- Does this support transparency or alpha?
- Not yet. The current version handles fully opaque colors only. RGBA/HSLA inputs are silently ignored beyond the first three channels. Alpha support is on the roadmap.
- Are color names supported?
- Not directly as input — but the reference table on every page shows twenty-five common CSS named colors with their HSL and HSV equivalents. Copy the value you want into the calculator above.
- Why does the swatch sometimes look wrong on my screen?
- Browsers handle color profiles differently. On most modern displays the rendered swatch matches the stored sRGB exactly. On wide-gamut displays without an active sRGB profile, very saturated colors may render slightly more vivid than the math implies.
- Can I use these results in CSS directly?
- Yes. Every output above is a valid CSS color expression. HEX values include the # prefix; RGB/HSL/HSV outputs are in the standard function form CSS accepts.
- Are the conversions WCAG-accurate?
- The conversions are mathematically exact within IEEE 754 double precision. WCAG contrast ratios require an additional sRGB-to-linear-luminance step that is not part of HEX/RGB/HSL/HSV conversions — Convertitive will ship a dedicated contrast checker later.
About HSL and HSV
HSV
HSV (also called HSB) describes a color by hue (0–360°), saturation (0–100%), and value (0–100%). It is the format inside almost every color picker — including the one in Figma, Sketch, and Adobe — because moving the V slider down toward 0 reliably darkens any color without changing its hue.