HSL to RGB Converter

Convert HSL to RGB

Convert HSL values like hsl(188, 86%, 53%) into CSS rgb(34, 211, 238)—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 RGB results instantly

---

Quick start

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

Single color

Input:

hsl(188, 86%, 53%)

Output:

rgb(34, 211, 238)

Palette / batch conversion

Input:

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

Output:

rgb(255, 0, 85)
rgb(34, 211, 238)
rgb(17, 24, 39)

Small rounding differences are normal. RGB channels are integers (0–255), so the conversion rounds internally.

---

What HSL means (Hue, Saturation, Lightness)

HSL describes 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)

Why people use HSL in design systems:

• It matches how we edit color (“lighter”, “more muted”, “shift hue”).
• It’s convenient for generating UI states (hover/active/disabled) by nudging Lightness and Saturation.
• It helps keep palette rules consistent (same Hue family, controlled saturation, stepped lightness).

---

What RGB means

RGB stands for Red, Green, Blue—the three light channels used by screens.

• Each channel is an integer from 0 to 255.
• rgb(0, 0, 0) is black.
• rgb(255, 255, 255) is white.

RGB is especially useful when you need numeric channel values for:

• CSS and runtime styling
• Canvas/image processing
• Programmatic color math (mixing, interpolation, gradients)

---

How HSL → RGB conversion works

For each line you paste, the converter does:

1. Parse HSL
   • Hue in degrees, Saturation/Lightness as percentages
2. Convert HSL → RGB
   • Compute a chroma value based on Saturation + Lightness
   • Use Hue to determine which RGB sector the color falls into
   • Add a lightness offset to reach final RGB
3. Format as CSS RGB
   • Clamp and round channels to integers (0–255)
   • Output rgb(r, g, b)

Accuracy notes (so you can trust the output)

• Computation assumes standard sRGB, which matches the baseline used by typical CSS/HEX/RGB workflows.
• When S = 0% (a gray), Hue doesn’t affect the result; the output is simply a neutral gray set by Lightness.
• HSL isn’t perceptually uniform (equal steps don’t always look equally different). For color-critical workflows, perceptual spaces like OKLCH can help—but HSL is very practical for UI theming.

---

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%)

Values outside 0–100%

✅ hsl(188, 86%, 53%)

🚫 hsl(188, 140%, -10%)

---

Practical uses

• Turn palette rules into real channel values for CSS and code
• Generate theme states in HSL, then export RGB for consistent implementation
• Work with canvas/WebGL where numeric channel values are the natural representation
• Debug colors: RGB makes it obvious when one channel is dominating

A common workflow is: design/edit in HSL → output RGB for implementation.

---

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)

Safe for internal brand palettes, UI themes, and design-system tokens.