HSL to Hex Converter
Convert HSL (Hue, Saturation, Lightness) values to HEX color codes. The most intuitive way to adjust colors for designers.
What is HSL?
HSL stands for Hue, Saturation, Lightness. It's a cylindrical-coordinate representation of colors that aligns more closely with how humans perceive color. Unlike RGB which is based on light mixing, HSL describes colors in terms that designers intuitively understand.
Hue
The color type (0-360°)
0°=Red, 120°=Green, 240°=Blue
Saturation
Color intensity (0-100%)
0%=Gray, 100%=Full Color
Lightness
Brightness (0-100%)
0%=Black, 50%=Normal, 100%=White
Why Use HSL?
Intuitive Adjustments
Want a lighter blue? Just increase lightness. More vibrant? Increase saturation.
Better for Palettes
Creating color schemes is easier. Adjust hue for complementary colors, saturation for vibrancy.
Consistent Results
Changing lightness always produces predictable results, unlike RGB where you must balance three values.
Accessibility Friendly
Easier to ensure sufficient contrast by adjusting lightness values systematically.
Common HSL to HEX Conversions
| Color | HSL | HEX | Preview |
|---|---|---|---|
| White | hsl(0, 0%, 100%) | #FFFFFF | |
| Black | hsl(0, 0%, 0%) | #000000 | |
| Red | hsl(0, 100%, 50%) | #FF0000 | |
| Green | hsl(120, 100%, 50%) | #00FF00 | |
| Blue | hsl(240, 100%, 50%) | #0000FF | |
| Dodger Blue | hsl(210, 100%, 56%) | #1E90FF |
FAQ
What's the difference between HSL and HSV?
Both use Hue and Saturation, but differ in the third component. HSL uses Lightness (black to color to white), while HSV uses Value/Brightness (black to color). HSL is generally preferred for design as it's more intuitive.
Can I use HSL in CSS?
Yes! Modern CSS supports HSL: hsl(210, 100%, 50%) or with alpha: hsla(210, 100%, 50%, 0.5).
However, many design tools and legacy systems still require HEX, making this converter useful.
Why does 50% lightness give pure colors?
At 50% lightness with 100% saturation, you get the pure hue without any black or white mixed in. Below 50% adds black (darkening), above 50% adds white (lightening).