HSL to RGB Converter — Free Online Tool

Convert HSL to RGB instantly — enter a hue, saturation, and lightness value (or paste an hsl() string) and get the matching RGB, HEX, HSV, and CMYK values in real time, no signup required.

How It Works (HSL to RGB Conversion Formula)

The HSL to RGB formula converts a color’s hue, saturation, and lightness into red, green, and blue channel values using a chroma-based calculation.

The conversion happens in four steps:

1. Calculate chroma (C): C = (1 − |2L − 1|) × S, where L and S are expressed as decimals (0–1), not percentages.
2. Find the secondary component (X): X = C × (1 − |(H / 60°) mod 2 − 1|)
3. Find the lightness match (m): m = L − C / 2
4. Assign R′, G′, B′ based on the hue’s 60° segment, then add m to each and multiply by 255:

Hue range	R′, G′, B′
0°–60°	C, X, 0
60°–120°	X, C, 0
120°–180°	0, C, X
180°–240°	0, X, C
240°–300°	X, 0, C
300°–360°	C, 0, X

Final RGB values: R = (R′ + m) × 255, G = (G′ + m) × 255, B = (B′ + m) × 255, each rounded to the nearest whole number.

Worked example — hsl(266, 85%, 60%):

• C = (1 − |2(0.6) − 1|) × 0.85 = 0.34
• X = 0.34 × (1 − |(266/60) mod 2 − 1|) ≈ 0.2856
• m = 0.6 − 0.17 = 0.43
• Hue 266° falls in the 240°–300° segment → (R′, G′, B′) = (X, 0, C)
• R = (0.2856 + 0.43) × 255 ≈ 181… (the tool above handles this instantly — use it instead of doing this by hand)

This is the same formula browsers and design tools use internally, so the output always matches what you’d get from a browser’s computed style panel.

HSL vs RGB

HSL and RGB are two different ways of describing the same color — HSL is built for how humans think about color, RGB is built for how screens render it.

RGB (Red, Green, Blue) defines a color by the intensity of three light channels, each from 0–255. It maps directly to how a screen’s pixels emit light, which is why it’s the format browsers and image files ultimately use to display color.

HSL (Hue, Saturation, Lightness) defines a color by:

• Hue — the color itself, as a position on a 0°–360° color wheel (red, green, blue, etc.)
• Saturation — how intense or muted the color is, from 0% (gray) to 100% (fully saturated)
• Lightness — how light or dark the color is, from 0% (black) to 100% (white)

Why designers and developers reach for HSL: it’s far easier to make intuitive adjustments in HSL — darken a color by lowering lightness, mute it by lowering saturation, or shift it to a related hue by nudging the hue value a few degrees. Doing the same adjustments directly in RGB means recalculating all three channels by hand.

Why RGB (or hex, its shorthand) still matters: it’s the more universal format — used in image files, most legacy CSS, and any context expecting a direct pixel value. Converting HSL to RGB is a common step when a color was designed/tuned in HSL but needs to be handed off in a more widely-supported format.

Neither format is “more correct” — they’re the same color space represented two different ways. Converting between them, as this tool does, doesn’t lose any color accuracy.

When to Use This

• Tuning a color system in HSL, shipping in RGB/hex — build your palette with intuitive hue/lightness adjustments, then convert each final value to RGB or hex for your CSS variables, design tokens, or handoff docs.
• Matching a design tool’s HSL picker to code — Figma, Sketch, and similar tools often show HSL; convert to RGB/hex to paste directly into a stylesheet or WordPress theme customizer.
• Debugging computed styles — if a browser inspector reports an HSL value and you need the RGB/hex equivalent for a screenshot, brand doc, or ticket.

FAQ

How do I convert HSL to RGB?
Enter the hue (0–360), saturation (0–100%), and lightness (0–100%) values into the fields above, or paste a full hsl() string directly — the RGB, hex, HSV, and CMYK equivalents update instantly.

Is HSL the same color as RGB?
Yes — HSL and RGB describe the same color space using different variables. Converting between them doesn’t change the actual color, only how it’s expressed.

Can I paste a full hsl() or hsla() value into the converter?
Yes — paste any valid hsl(H, S%, L%) or hsla(H, S%, L%, A) string into the paste field and the tool will parse it and fill in the sliders automatically.

What’s the formula behind HSL to RGB conversion?
It’s a chroma-based formula: calculate chroma from lightness and saturation, derive a secondary component from the hue, then map both onto R, G, and B based on which 60° segment of the color wheel the hue falls in. See the “How It Works” section above for the full step-by-step formula.

Why would I convert HSL to RGB instead of just using HSL in my CSS?
Modern browsers support HSL directly in CSS, so conversion isn’t always required. It’s most useful when a downstream tool, image format, or older codebase only accepts RGB or hex values.