HSL to HEX Converter
Convert HSL (Hue, Saturation, Lightness) colors to HEX codes for web development. This converter translates the intuitive HSL format to the web-standard HEX format instantly.
Understanding the Conversion
HSL describes colors by hue, saturation, and lightness, while HEX uses hexadecimal RGB values:
| HSL Component | Effect | Hue (0-360°)Determines color Saturation (0-100%)Determines vibrancy Lightness (0-100%)Determines brightness
HSL to HEX Examples
ColorHSLHEX Redhsl(0, 100%, 50%)#FF0000 Sky Bluehsl(200, 80%, 60%)#4DA8D9 Limehsl(80, 70%, 50%)#8CD926 Purplehsl(280, 60%, 40%)#6B29A3
Creating Color Variations
One advantage of HSL is easy variation creation:
Base: hsl(220, 70%, 50%)HEX Result Lighter (+20% L)Pastel version Darker (-20% L)Deep version | Muted (-30% S) | Subdued version |
CSS Usage
``css
/* HSL for design, HEX for compatibility */
:root {
--primary: hsl(220, 70%, 50%);
}
.legacy {
color: #2662BF;
}
``
Use this converter when you've designed with HSL but need HEX for broader compatibility.