HSL to HEX Converter

Convert HSL to a HEX code

The HSL to HEX Converter turns hue, saturation, and lightness values into a hex color code, with sliders and a live preview so you can dial in the exact color you want. It's the most intuitive way to build a color, because HSL maps to how we actually think about color.

Why HSL is intuitive

HSL stands for Hue, Saturation, and Lightness. Hue is the color itself (0–360° around the color wheel), saturation is how vivid it is (0% grey to 100% pure), and lightness is how bright (0% black to 100% white). Unlike hex or RGB, HSL lets you tweak one quality at a time — making a color lighter or more muted — which is perfect for building palettes and states like hover.

How to use it

1. Drag the hue, saturation, and lightness sliders.
2. Watch the live preview and the HSL string update.
3. Copy the resulting hex code for your CSS.

HSL vs HEX vs RGB

Format	Strength
HSL	Intuitive editing — adjust hue/saturation/lightness
HEX	Compact, the CSS default
RGB	Direct channel control, easy opacity with rgba()

Building color variations

HSL shines when you need related colors. Keep the hue and saturation fixed and change only the lightness to create a tint (lighter) or shade (darker) of the same color — ideal for hover states, borders, and backgrounds that belong to the same family. Shift the hue slightly for analogous colors, or by 180° for a complement.

Tips

• Lower the saturation for softer, more professional tones.
• Keep lightness consistent across a palette for visual balance.
• Use the hex output directly in CSS, or keep the HSL string — CSS supports both.

Private and free

All conversion runs in your browser — nothing is uploaded. The tool is completely free with no sign-up.