HEX to HSL Converter
Type or paste a HEX color: 3, 6 or 8 digits, with or without the #. A pasted CSS line works too.
hsl(0, 100%, 50%)HEX:
#FF0000HSL:
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 HEX to HSL
HEX to HSL conversion transforms a hex color (e.g. #FF0000) into Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). For example, #FF0000 becomes hsl(0, 100%, 50%). HSL is far more intuitive than HEX for CSS theming — you can darken a color by reducing Lightness, or create muted tones by lowering Saturation, without touching the hue. Values here are rounded to whole numbers, so converting them back can differ by a few steps per channel: #1E90FF gives hsl(210, 100%, 56%), and that turns back into #1F8FFF.
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