HEX to HSL Converter
Convert HEX color codes to HSL (Hue, Saturation, Lightness) format. HSL is a more intuitive color model that makes it easier to understand and modify colors compared to HEX or RGB.
Understanding HSL
HSL represents colors using three components that match how humans perceive color:
- Hue (H): The color itself, measured as an angle from 0-360° on the color wheel (red=0°, green=120°, blue=240°)
- Saturation (S): Color intensity from 0% (gray) to 100% (full color)
- Lightness (L): How light or dark, from 0% (black) to 100% (white)
Why Use HSL?
HSL is preferred for color manipulation because:
| Task | HSL Approach | Make color lighterIncrease L value Make color darkerDecrease L value Make more vibrantIncrease S value Make more mutedDecrease S value Get complementaryAdd 180° to H
HEX to HSL Conversion Examples
ColorHEXHSL Red#FF0000hsl(0, 100%, 50%) Green#00FF00hsl(120, 100%, 50%) Blue#0000FFhsl(240, 100%, 50%) Orange#FFA500hsl(39, 100%, 50%) | Purple | #800080 | hsl(300, 100%, 25%) |
CSS HSL Syntax
``css
.element {
color: hsl(220, 80%, 50%);
background-color: hsl(220, 80%, 95%);
}
``
Adjusting Colors with HSL
Creating color variations is simple:
- Lighter shade: Keep H and S, increase L
- Darker shade: Keep H and S, decrease L
- Pastel: Keep H, reduce S, increase L