HSL to HEX Converter
What is HSL to HEX Converter
This tool converts HSL values (Hue, Saturation, Lightness) to HEX color codes. Enter the hue (0–360°), saturation (0–100%), and lightness (0–100%) and get the corresponding HEX code. This is useful when you've designed a palette in an HSL-based tool and need the HEX string for a CSS file or design spec.
How to use
- Enter the Hue (0–360), Saturation (0–100), and Lightness (0–100) values in the HSL fields.
- The HEX code and RGB values update instantly.
- Click the copy button next to HEX to copy the #RRGGBB code.
- Switch between all 6 color converters using the mode links at the top.
When to use it
Picked a color in an HSL color picker but your Tailwind theme needs HEX? Enter hsl(217, 91%, 60%) and copy #3B82F6 straight into your tailwind.config.js. It saves you from eyeballing the conversion when you tune a custom color and then have to hand it to CSS.
Frequently asked questions
What is hsl(0, 100%, 50%) in HEX?
hsl(0, 100%, 50%) is #ff0000 — pure red. Hue 0° with full saturation and 50% lightness gives the purest red.
What is hsl(0, 0%, 100%) in HEX?
hsl(0, 0%, 100%) is #ffffff — white. 100% lightness is always white regardless of hue or saturation.
What is hsl(0, 0%, 0%) in HEX?
hsl(0, 0%, 0%) is #000000 — black. 0% lightness is always black.
Why might my HSL to HEX result differ slightly from other tools?
Rounding in intermediate calculations can produce a 1-digit HEX difference (e.g., #3B82F6 vs #3B82F7). This is a ±1 rounding difference and is visually imperceptible. Our converter uses standard rounding to minimize this.
Can I share this tool with my inputs pre-filled?
Yes. The URL updates automatically as you type. Copy it from the address bar or use the Share button — anyone who opens the link will see your exact inputs ready to go.
Related tools
HEX to HSL Converter
Convert HEX color codes to HSL values instantly. Free HEX to HSL converter with live preview. Perfect for CSS custom properties and theming.
Aspect Ratio Calculator
Calculate aspect ratios, find a missing width or height, and resize images or video while keeping the same proportions. Free and instant.
Base64 Decoder
Decode Base64 strings to plain text instantly in your browser. Supports full Unicode output including emojis. Free online Base64 decoder.