HSL to Hex color converter online
HSL/HSLA to Hex: CSS function syntax in, #RRGGBB or 8-digit hex with alpha out.
Styles live in HSL but the design spec is hex — this bridge saves manual conversion.
Transparent hsla becomes 8-digit hex when alpha matters; split opacity separately if the target cannot read alpha hex.
How to convert
- Paste HSL/HSLA
- Confirm swatch
- Copy hex
When this helps
- CSS variables in HSL, deliverable needs hex.
- Quick hex swatches from theme tokens.
- Catch channel mistakes before handoff.
Scenarios
- Tailwind arbitrary HSL → hex for a vendor
- Docs table standardized on hex
Tips
- Saturation and lightness are usually percentages.
- Hue may include `deg` or plain numbers.
- Invalid syntax shows an error — fix to valid CSS.
Examples
| Input | Output | Note |
|---|---|---|
| hsl(9 100% 60%) | Near #FF5733 | Modern space-separated syntax |
| hsla(..., 0.5) | 8-digit hex | With alpha |
HSL to Hex FAQ
- Support `hsl(a b c / d)`?
- Common modern forms are parsed when possible; fall back to comma syntax if needed.
- Slightly off vs. eyedropper?
- Hex rounding — usually negligible for UI work.