HEX to HSL Converter for CSS Theming

Summary

Paste a HEX code and get the hsl() CSS value with a color preview.

How it works

1. Enter or paste a HEX color (e.g. #3498db)
2. Copy the HSL output shown below
3. Use it directly in your CSS hsl() function

Use cases

• Create CSS variables using HSL for easy theming
• Build dynamic color palettes by varying lightness
• Understand the hue of a brand color

Frequently Asked Questions