DevTilt

HEX to HSL Converter

Go from hex to hsl() in one step. The engine converts through RGB internally — you only see the HSL result.

Result

Type a hex color to see hsl() output.

How to convert HEX to HSL

  1. Type or paste a hex color.
  2. hsl() output updates automatically.
  3. Copy the result.
  4. Use HSL to HEX for the reverse conversion.

What is HEX to HSL Converter?

Hex codes from design tools don't reveal how to create a lighter variant or complementary shade. Converting to HSL exposes the hue angle and lightness percentage — the values you actually adjust when building accessible color scales or dark mode themes.

Why use DevTilt's HEX to HSL Converter?

  • Converts #RRGGBB and #RGB hex input
  • Outputs H, S, L with hsl() CSS function
  • Live color preview swatch
  • Shows hue angle for palette planning

Common use cases

  • Building a dark mode palette from light mode hex tokens
  • Creating accessible color steps from a single brand hex
  • Planning hue rotations for a data visualization color scale
  • Converting Figma hex exports to HSL for CSS custom properties

FAQ

No. This route converts hex → HSL directly using the shared color engine.
Yes. #abc expands to #aabbcc before conversion.
Yes. Nothing leaves your device.
Different tools round hue, saturation, and lightness differently. This page uses the same math as other DevTilt color routes — compare against CSS hsl() specs, not a specific design app's internal model.
8-digit #RRGGBBAA inputs convert through RGB including alpha when present. Opaque 6-digit hex produces hsl() without alpha.