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
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) | #FF0000 |
| Sky Blue | hsl(200, 80%, 60%) | #4DA8D9 |
| Lime | hsl(80, 70%, 50%) | #8CD926 |
| Purple | hsl(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.