HEX to HSL Converter

Convert HEX to HSL

Convert HEX codes like #FF5733 into CSS HSL like hsl(11, 100%, 60%)—fast, private, and right in your browser.

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

---

Quick start

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

Single color

Input:

#22D3EE

Output:

hsl(188, 86%, 53%)

Palette / batch conversion

Input:

#FF0055
#22D3EE
#111827

Output:

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

Small rounding differences are normal. Hue is typically rounded to the nearest degree, and percentages to whole numbers.

---

What HEX means

HEX is a compact way to write RGB colors using hexadecimal (base‑16) digits.

Most commonly, HEX looks like:

• #RRGGBB

Each pair is one channel:

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

Example:

• #FF5733 represents the RGB channels:
  • FF (red)
  • 57 (green)
  • 33 (blue)

Shorthand HEX

You’ll also see 3‑digit shorthand:

• #fff expands to #ffffff

Same color—just shorter.

---

What HSL means (Hue, Saturation, Lightness)

HSL describes a color using three values:

• Hue (H): the “color family” around the color 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)

Why people like HSL:

• It’s easier to reason about “make this lighter” or “desaturate it”
• It’s great for building tints/shades by stepping Lightness
• It can be a convenient “editing view” for theme colors and tokens

---

How HEX → HSL conversion works

For each line you paste, the converter does:

1. Parse HEX → RGB
   • #RRGGBB becomes three channels (0–255)
2. Normalize to 0–1
   • Each channel becomes a fraction (0–1)
3. Compute H, S, L
   • Lightness is based on the max/min channel values
   • Saturation depends on how far the color is from gray at that lightness
   • Hue is the angle of the dominant channel relationship
4. Format as CSS HSL
   • hsl(h, s%, l%)

Accuracy notes (so you can trust the output)

• Inputs are treated as standard sRGB colors (the same assumption browsers use for typical HEX/CSS colors).
• Grays have zero saturation. When S = 0%, Hue is mathematically “undefined”; most tools return 0° by convention.
• HSL is not perceptually uniform (equal steps don’t always look equally different). For color-critical work, consider perceptual spaces like OKLCH—but for UI theming, HSL is often perfectly practical.

---

Common mistakes (and quick fixes)

Extra spaces

✅ #FF0055

🚫 #FF0055

Missing the #

✅ #111827

🚫 111827

Invalid length

HEX should be either 3 or 6 hex digits (plus the #):

✅ #fff, #ffffff

🚫 #ffff, #fffffff

Non-hex characters

HEX digits must be 0–9 or A–F:

✅ #12ABEF

🚫 #12ABEG

---

Practical uses (when HSL is the right tool)

• Design tokens: keep HEX as the final token, but use HSL to explore variations quickly
• Theme building: generate hover/active states by stepping Lightness (and slightly lowering Saturation)
• Palette cleanup: normalize a set of colors (e.g., align hues, reduce oversaturation)
• Documentation: show both HEX and HSL so designers and developers can communicate changes clearly

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

---

Privacy and safety

This converter runs client-side in your browser:

• No file uploads
• No palette data stored on a server
• Results are deterministic (same input → same output)

That makes it safe to use with internal brand palettes, UI themes, or design-system tokens.