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 lighter | Increase L value |
| Make color darker | Decrease L value |
| Make more vibrant | Increase S value |
| Make more muted | Decrease S value |
| Get complementary | Add 180° to H |
HEX to HSL Conversion Examples
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 | hsl(0, 100%, 50%) |
| Green | #00FF00 | hsl(120, 100%, 50%) |
| Blue | #0000FF | hsl(240, 100%, 50%) |
| Orange | #FFA500 | hsl(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