HSL to HEX Converter

Convert HSL to HEX

Convert HSL values like hsl(188, 86%, 53%) into clean HEX codes like #22D3EE—fast, private, and right in your browser.

• Paste a single HSL color or a whole palette
• Use one color per line for batch conversion
• Copy your HEX results instantly

---

Quick start

1. Paste your HSL color(s) into the input.
2. Use one color per line.
3. Copy the HEX results.

Single color

Input:

hsl(188, 86%, 53%)

Output:

#22D3EE

Palette / batch conversion

Input:

hsl(340, 100%, 50%)
hsl(188, 86%, 53%)
hsl(221, 39%, 11%)

Output:

#FF0055
#22D3EE
#111827

Small rounding differences are normal. HEX channels are integers (0–255), so the final color may involve minor rounding.

---

What HSL means (Hue, Saturation, Lightness)

HSL represents a color using three values:

• Hue (H): the “color family” around a wheel (0–360°)
  • 0° = red, 120° = green, 240° = blue
• Saturation (S): how vivid the color is (0% gray → 100% vivid)
• Lightness (L): how light/dark the color is (0% black → 100% white)

HSL is popular because it maps to the way humans often edit color:

• “Make it lighter” → raise Lightness
• “Make it more muted” → lower Saturation
• “Shift it toward teal” → adjust Hue

---

What HEX means

HEX is a compact RGB token widely used in CSS and design systems:

• #RRGGBB

Each pair is one color channel:

• RR = red
• GG = green
• BB = blue

Why HEX is still everywhere:

• Easy to store in JSON/YAML (design tokens)
• Copy/paste friendly
• Supported across tools and browsers

---

How HSL → HEX conversion works

For each input line, the converter does:

1. Parse HSL
   • Hue in degrees, Saturation/Lightness as percentages
2. Convert HSL → RGB
   • Compute an intermediate chroma based on Lightness + Saturation
   • Determine the RGB “sector” from Hue
   • Add a lightness offset to reach final RGB values
3. Convert RGB → HEX
   • Clamp and round RGB channels to 0–255
   • Format as #RRGGBB

Accuracy notes (so you can trust the output)

• Results assume standard sRGB (the same baseline used for typical CSS color math).
• When a color is fully gray (S = 0%), Hue is mathematically “undefined”; many tools treat it as 0° by convention.
• HSL is not perceptually uniform (equal steps don’t always look equally different). For color-critical work, spaces like OKLCH are often better—but HSL is very practical for UI theming and quick edits.

---

Common mistakes (and quick fixes)

Extra spaces

✅ hsl(188, 86%, 53%)

🚫 hsl(188, 86%, 53%)

Missing % signs

Saturation and Lightness are percentages:

✅ hsl(221, 39%, 11%)

🚫 hsl(221, 39, 11)

Hue outside 0–360

Use a normal degree range:

✅ hsl(340, 100%, 50%)

🚫 hsl(420, 100%, 50%)

---

Practical uses

• Convert designer-friendly HSL edits into HEX tokens for CSS variables
• Generate theme states (hover/active) by nudging Lightness and Saturation
• Build palettes systematically (keep Hue stable, step Lightness)
• Document brand colors in an editable format, then store as HEX

A common workflow is: edit in HSL → ship in HEX.

---

Privacy and safety

This converter runs client-side in your browser:

• No uploads
• No palette data stored on a server
• Deterministic results (same input → same output)

That makes it safe for internal brand palettes, product themes, and design-system tokens.