HSL to Hex Converter
HSL to Hex converter
Convert HSL/HSLA with slider controls and picker sync into HEX + CSS outputs, then evaluate palette, shades, and WCAG contrast.
Inputs
5Live
0360
0100
0100
01
HEX
#3c7af6
Color picker and sliders stay in sync for fast hue/saturation/lightness tuning.
+9 more rows
Live update
Color preview
#3c7af6
#3cd7f6
#5b3cf6
#f63c7a
#f6b83c
#042362
#083eab
#0b59f4
#548bf7
#9dbcfb
HEX
#3c7af6HEXA
#3c7af6ffHSL
hsl(220, 91.18%, 60%)HSLA
hsla(220, 91.18%, 60%, 1)CSS RGB
rgb(60, 122, 246)CSS RGBA
rgba(60, 122, 246, 1)Contrast on white
3.957:1 (Pass AA for large text only)Contrast on black
5.307:1 (Pass AA for normal text)Palette
#3c7af6, #3cd7f6, #5b3cf6, #f63c7a, #f6b83cShades
#042362, #083eab, #0b59f4, #548bf7, #9dbcfbFormula
Convert HSL to RGB then RGB to HEX Symbol legend
| Symbol | Meaning | Unit | Copy |
|---|---|---|---|
H,S,L | Input HSL channels | deg and percent | |
R,G,B | Intermediate RGB channels | 0 to 255 |
- Compute chroma and match values from HSL.
- Resolve intermediate RGB channels.
- Encode channels as hex bytes and append alpha when needed.
Example
Worked example: HSL 240,100,50
- 1 HSL maps to pure blue in RGB
- 2 RGB is 0,0,255
- 3 Hex output is #0000ff
HSL 240,100,50 converts to #0000ff plus CSS, palette, shades, and contrast metrics.
How
- Enter hue, saturation, and lightness.
- Tune hue, saturation, lightness, and alpha with sliders.
- Copy HEX/HEXA plus CSS rgb/rgba/hsla outputs, then review palette + contrast checks.
Avoid
- Using saturation or lightness outside 0 to 100.
- Entering hue as radians rather than degrees.
- Forgetting to set alpha when exporting transparent overlays.
FAQ
Can hue exceed 360?
Yes, hue wraps cyclically and is normalized.
Can I input decimals for HSL?
Yes, decimal HSL values are accepted.
Is result always six-digit hex?
Hex output is always six-digit, and HEXA is provided when alpha is used.
Can I use a color picker with sliders?
Yes. Picker and HSL sliders stay synchronized for quick adjustments.
Switch
Switch12
No match.