HSL to HEX
Convert HSL color values to HEX in your browser. Accepts hsl(h, s%, l%) and hsla(h, s%, l%, a) formats. Eight-digit HEX is emitted when alpha is present.
HSL in, HEX out
Functional hsl() / hsla() notation. Hue is in degrees (0–360); saturation and lightness are percentages (0–100%). Alpha is preserved in the 8-digit HEX form.
hsl(217, 91%, 60%) hsl(0, 100%, 50%) hsla(160, 84%, 39%, 0.8) hsl(0, 0%, 0%)
#3B82F6 #FF0000 #10B981CC #000000
What you'll use this for
HSL is the designer-friendly model (hue, saturation, lightness). HEX is what most stylesheets and tools still want back — this tool bridges the two.
CSS authoring
Pick a hue in HSL (easy to reason about), convert to HEX for your stylesheet.
Design tokens
Generate variations by tweaking lightness in HSL, emit them as HEX for token files.
Theme building
Step through hue increments to build a palette, get HEX values for the design system.
Tooling
Feed HEX into design tools, JSON theme files, and color libraries that don't accept HSL strings.
How to convert HSL to HEX
Paste your HSL list
One color per line. hsl(h, s%, l%) and hsla(h, s%, l%, a) both work.
Pick options
Choose case (upper/lower) and whether to keep alpha in the 8-digit HEX form.
Click Convert
Or leave auto-convert on for live updates. Everything runs in your browser.
Copy or download
Copy to clipboard or save as .txt. Or hop to HEX to RGB for a round-trip.
Frequently asked questions
hsl(h, s%, l%) and hsla(h, s%, l%, a). The percent signs are optional. Hue is degrees (0–360); saturation and lightness are 0–100. Alpha is preserved when present.
Yes. Paste one HSL color per line. Each is converted independently and the HEX results are emitted in the same order.
Yes. No signup, no limits, no ads. Runs entirely in your browser.
With "Include alpha" on, hsla() input is converted to 8-digit #RRGGBBAA HEX. Turn it off to drop alpha and emit a 6-digit HEX instead. hsl() input has no alpha to start with.
Use HEX to RGB followed by an RGB→HSL conversion, or open Color Picker to view every format at once.
About HSL to HEX
HSL describes a color by its hue (the color wheel position in degrees), saturation (color intensity), and lightness (how dark/light). It's the model designers reach for when they want intuitive color tweaks. HEX is the wire format most stylesheets and tools expect.
Conversion pipeline
- HSL → RGB via the standard chromatic conversion (chroma, X, m).
- RGB channels (0–255) → pairs of hex digits.
- Alpha (0–1) → 8-digit HEX trailing pair (0–255).
Why use HSL?
- Easier palettes. Step hue in fixed increments for color cycles.
- Better tints / shades. Change only lightness for shades of the same color.
- Predictable contrast. Lightness maps roughly to perceived brightness.