HEX to HSL Converter
Convert HEX colors to HSL format instantly. HSL — hue, saturation, and lightness — is the most human-readable color format, making it ideal for theming, brightness adjustments, and color palette design in CSS.
name, hex, rgb, hsl, hwb, cmyk, ncol
| Format | Value | |
|---|---|---|
| HSL | hsl(12, 100%, 67%) | |
| Name | — | |
| Hex | #ff7a59 | |
| RGB | rgb(255, 122, 89) | |
| HWB | hwb(12, 35%, 0%) | |
| CMYK | cmyk(0%, 52%, 65%, 0%) | |
| NCol | R20, 35%, 0% | |
| OKLCH | oklch(72.9% 0.1696 35.11) |
Lighter / Darker:
hsl(14, 100%, 95%)
hsl(12, 100%, 86%)
hsl(12, 100%, 77%)
hsl(12, 100%, 68%)
hsl(12, 100%, 59%)
hsl(12, 100%, 50%)
hsl(12, 100%, 41%)
hsl(12, 100%, 32%)
hsl(12, 100%, 23%)
hsl(12, 100%, 14%)
hsl(12, 100%, 5%)
Pick a Color:
Related Color Converters
How to Use This Tool
Type or paste a HEX color code into the input field — with or without the # prefix. The converter instantly outputs the HSL equivalent, showing hue in degrees (0–360), saturation as a percentage, and lightness as a percentage. Click the HSL value to copy it directly to your clipboard in hsl() format, ready to paste into your CSS stylesheet. The shade bar on the right uses HSL notation, letting you explore lighter and darker variations of your color.