Free tools
HSL to Hex Converter
Free HSL to hex converter. Enter hue, saturation, and lightness values and instantly get the hex color code with a live preview.
Please enter valid values: H 0–360, S 0–100, L 0–100.
Convert HSL to Hex with Our Free Online Tool
Enter hue (0–360°), saturation (0–100%), and lightness (0–100%) values and instantly get the hex color code. A live color preview updates as you type.
HSL to Hex Conversion
The conversion first translates HSL into RGB values (each 0–255), then encodes each channel as a 2-digit hexadecimal and concatenates them with a # prefix. For achromatic colors (saturation = 0), R = G = B = L × 255.
Common HSL to Hex Conversions
| H (°) | S (%) | L (%) | Hex |
|---|---|---|---|
| 0 | 0 | 0 | #000000 |
| 0 | 0 | 100 | #FFFFFF |
| 0 | 100 | 50 | #FF0000 |
| 120 | 100 | 50 | #00FF00 |
| 240 | 100 | 50 | #0000FF |
| 60 | 100 | 50 | #FFFF00 |
| 300 | 100 | 50 | #FF00FF |
| 180 | 100 | 50 | #00FFFF |
| 0 | 0 | 50 | #808080 |
| 14 | 100 | 60 | #FF5733 |
| 204 | 70 | 53 | #3498DB |
| 145 | 63 | 49 | #2ECC71 |
Frequently Asked Questions
What are valid HSL values?
Hue is 0-360 (degrees on the color wheel: 0=red, 120=green, 240=blue). Saturation is 0-100% (0% = grayscale, 100% = fully saturated). Lightness is 0-100% (0% = black, 50% = normal, 100% = white). The tool accepts values with or without the % symbol and 'deg' for hue.
How do I use this converter?
Enter your HSL values in the three input fields. You can type values like '180' for hue, '50%' for saturation, or just numbers. The tool instantly converts to hex and shows a live color preview. Copy the hex code for use in web development.
Why convert HSL to hex?
While HSL is great for creating and adjusting colors, hex codes are more compact and universally supported in web development. Convert to hex when you have your final color ready for production code, CSS files, or design handoffs.
Can I see the color as I adjust values?
Yes. The live preview updates instantly as you type. This helps you fine-tune colors visually. Try adjusting lightness to see tints and shades, or hue to shift through the color spectrum — all while watching the hex code update.
What format does the hex output use?
The output is a standard 6-character hex code with the # prefix (e.g., #7C3AED). This format works in all web browsers, CSS files, and design tools. Both uppercase and lowercase letters are valid in hex codes.