Convert HEX to HSL

Use our powerful tool to convert HEX color codes to HSL values. Enter your HEX code below to see the conversion and the corresponding color.

Share:

Quick Tips

  • HEX colors always start with a "#" symbol (e.g., #FF5733).
  • Our tool accepts HEX codes with or without the "#" prefix.
  • Both 3-digit shorthand (e.g., #FFF) and 6-digit (e.g., #FFFFFF) HEX codes are accepted.
  • In HSL, Hue ranges from 0-360, while Saturation and Lightness are 0-100%.
  • HSL makes it easier to intuitively adjust colors compared to HEX.
  • The Hue value represents the base color, independent of its saturation or lightness.

How to use

  1. Enter your HEX color code in the input field. You can include or omit the "#" symbol.
  2. Click the "Convert" button or press Enter.
  3. The tool will instantly display the corresponding HSL values.
  4. You'll see a color preview to confirm the conversion.
  5. To copy the HSL value, click on the displayed HSL result.
  6. To convert another color, simply enter a new HEX code and repeat the process.

Additional Features:

  • The tool accepts both 3-digit shorthand (e.g., #FFF) and 6-digit (e.g., #FFFFFF) HEX codes.
  • If you enter an invalid HEX code, the tool will display an error message.
  • You can use the color preview to visually confirm the converted color.

Remember, HSL values are displayed in the format: hsl(hue, saturation%, lightness%). This format is directly usable in CSS and many design applications.

Related Tools