HEX to HSL Converter
Convert hex color codes to HSL instantly, with the formula and copy-ready CSS.
The formula
Convert hex to RGB and scale to 0–1. Lightness = (max + min) / 2. Saturation = (max − min) / (1 − |2L − 1|). Hue depends on which channel is largest, measured in degrees around the wheel. #3B82F6 → hsl(217 91% 60%).
Common colors
| Color | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| #000000 | rgb(0, 0, 0) | hsl(0 0% 0%) | oklch(0% 0 0) | |
| #FFFFFF | rgb(255, 255, 255) | hsl(0 0% 100%) | oklch(100% 0 0) | |
| #FF0000 | rgb(255, 0, 0) | hsl(0 100% 50%) | oklch(62.8% 0.258 29.2) | |
| #00FF00 | rgb(0, 255, 0) | hsl(120 100% 50%) | oklch(86.6% 0.295 142.5) | |
| #0000FF | rgb(0, 0, 255) | hsl(240 100% 50%) | oklch(45.2% 0.313 264.1) | |
| #FFFF00 | rgb(255, 255, 0) | hsl(60 100% 50%) | oklch(96.8% 0.211 109.8) | |
| #00FFFF | rgb(0, 255, 255) | hsl(180 100% 50%) | oklch(90.5% 0.155 194.8) | |
| #FF00FF | rgb(255, 0, 255) | hsl(300 100% 50%) | oklch(70.2% 0.322 328.4) | |
| #808080 | rgb(128, 128, 128) | hsl(0 0% 50%) | oklch(60% 0 0) | |
| #FFA500 | rgb(255, 165, 0) | hsl(39 100% 50%) | oklch(79.3% 0.171 70.7) | |
| #800080 | rgb(128, 0, 128) | hsl(300 100% 25%) | oklch(42.1% 0.193 328.4) | |
| #008080 | rgb(0, 128, 128) | hsl(180 100% 25%) | oklch(54.3% 0.093 194.8) |
Frequently asked questions
What is HSL?
Hue (0–360° around the wheel), saturation (0–100% colourfulness) and lightness (0% black to 100% white). It is easier to reason about than RGB but its lightness is not perceptual: hsl(60 100% 50%) yellow looks far brighter than hsl(240 100% 50%) blue.
Does converting to HSL lose accuracy?
Rounded HSL values can shift a color by one unit in a channel when converted back. Keep the hex as the source of truth.
More converters: HEX to RGB · RGB to HEX · HEX to RGBA · HSL to HEX · RGB to HSL · HEX to OKLCH · All formats at once