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
Use this converter to translate HEX codes to the more intuitive HSL format.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
Step Colour Contrast on white Safe for 50 #F5F9FF 1.06:1 backgrounds and fills 100 #EBF3FE 1.12:1 backgrounds and fills 200 #CEE0FD 1.34:1 backgrounds and fills 300 #B1CDFB 1.62:1 backgrounds and fills 400 #76A8F9 2.40:1 backgrounds and fills 500 #3B82F6 3.68:1 large text, borders 600 #326FD1 4.85:1 body text on white 700 #295BAC 6.59:1 body text on white 800 #204887 8.98:1 body text on white 900 #183462 12.31:1 body text on white
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.