Convert HEX colors to HSL (and back) instantly
Color Format Converter
Accepts: hsl(H, S%, L%) or H, S%, L%
| Color | HEX | HSL | RGB |
|---|---|---|---|
Crimson | #DC143C | hsl(348, 83%, 47%) | rgb(220, 20, 60) |
Coral | #FF6B6B | hsl(0, 100%, 71%) | rgb(255, 107, 107) |
Amber | #F59E0B | hsl(38, 92%, 50%) | rgb(245, 158, 11) |
Lime | #84CC16 | hsl(84, 81%, 44%) | rgb(132, 204, 22) |
Emerald | #10B981 | hsl(160, 84%, 39%) | rgb(16, 185, 129) |
Sky | #0EA5E9 | hsl(199, 89%, 48%) | rgb(14, 165, 233) |
Indigo | #6366F1 | hsl(239, 84%, 67%) | rgb(99, 102, 241) |
Violet | #8B5CF6 | hsl(258, 90%, 66%) | rgb(139, 92, 246) |
White | #FFFFFF | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
Slate | #64748B | hsl(215, 16%, 47%) | rgb(100, 116, 139) |
Black | #000000 | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
Brand Red | #E53E3E | hsl(0, 76%, 57%) | rgb(229, 62, 62) |
The HEX to HSL Converter lets you instantly translate any hexadecimal color code into its HSL (Hue, Saturation, Lightness) equivalent — and convert HSL back to HEX or RGB. HSL is the preferred format for CSS theming because each channel is human-readable. Use the interactive sliders to build custom colors or pick from the built-in swatch palette for quick references.
HSL stands for Hue, Saturation, and Lightness. Unlike HEX or RGB, HSL is human-readable — you can intuit that hsl(0, 100%, 50%) is bright red, or that raising the Lightness value makes a color paler. This makes it much easier to create consistent color palettes and adjust shades in CSS variables.
Enter your HEX code (e.g. #3B82F6) in the HEX input field. The tool instantly shows the HSL values — hue (0–360°), saturation (0–100%), and lightness (0–100%) — along with a live color preview. You can also use the native color picker to select any color visually.
Yes. Both 3-digit (#F00) and 6-digit (#FF0000) HEX codes are accepted. The tool expands 3-digit shorthand automatically before converting, so #F00 is treated as #FF0000.
Absolutely. Use the HSL → HEX panel on the right. Enter your HSL value in the format hsl(H, S%, L%) or just H, S%, L% and the tool outputs the corresponding HEX code and RGB values with one-click copy buttons.