HSV to HSL Converter
Type or paste a HSV color: hsv() or hsb(), with commas or spaces; the hue may end in ° or deg. Saturation and value need the % sign.
hsl(0, 100%, 50%)HSV:
hsv(0, 100%, 100%)HSL:
hsl(0, 100%, 50%)CSS Usage:
background-color: hsl(0, 100%, 50%);color: hsl(0, 100%, 50%);border: 1px solid hsl(0, 100%, 50%);Popular Examples:
How to Convert HSV to HSL
HSV to HSL converts between two similar but distinct color models. For example, hsv(0, 100%, 100%) becomes hsl(0, 100%, 50%). Both use Hue, but differ in the second and third parameters: HSV uses Saturation (purity) and Value (brightness), while HSL uses Saturation and Lightness (where 50% = pure color, 0% = black, 100% = white). Use this to convert Photoshop color picker values to CSS hsl().
Why Use This Converter?
- Instant real-time conversion
- Free online tool - no registration required
- Live color preview
- CSS code examples
- One-click copy to clipboard