HSL to RGB Converter

About the HSL to RGB Converter

What is HSL to RGB conversion?

HSL describes a color by Hue (its position on the color wheel), Saturation (how vivid it is), and Lightness (how light or dark). RGB describes the same color as amounts of red, green, and blue from 0 to 255 — the form most code and design tools expect. This converter takes an hsl() value and gives you the matching rgb(), plus HEX, HSB/HSV, and CMYK and a live preview.

It's the tool to reach for when you've dialed in a color in HSL — which is easy to tweak by hand — and now need the RGB triple for an API, a canvas, or a graphics library. Drag the Hue, Saturation, and Lightness sliders and the RGB values follow instantly. Everything runs in your browser, so your colors stay private.

How to Use This Tool

1. Set your HSL color. Drag the Hue, Saturation, and Lightness sliders, or type exact values into the boxes.
2. Read the RGB value. The matching rgb() appears at the top of the results and updates live.
3. Or start from HEX. Paste a HEX code or use the eyedropper and the HSL sliders snap to match.
4. Take what you need. Copy RGB, HEX, HSB, or CMYK, and explore the shades, tints, and harmonies.

Common Use Cases

• Feeding graphics code: Many canvas and image libraries want RGB numbers, not an HSL string.
• Designing in HSL, shipping in RGB: Pick and adjust a color in HSL, then export the RGB values.
• Building palettes: Step the Hue around the wheel and collect the RGB triples for a scheme.
• Matching brand colors: Convert a documented HSL value to the exact RGB a tool requires.
• Checking contrast: See how the color performs as text on white and black against WCAG levels.

Need the reverse or another model? Use our RGB to HSL converter, the HSL to HEX converter, or browse all our free color tools.

Frequently Asked Questions

How do I convert HSL to RGB?

Enter your Hue (0–360), Saturation (0–100%), and Lightness (0–100%) and the RGB result appears instantly. The tool turns the HSL values into red, green, and blue channels in the 0–255 range using the standard formula.

Can I use the RGB value directly in CSS?

Yes. Paste rgb(59, 130, 246) straight into a stylesheet, or use the modern space-separated form with alpha, rgb(59 130 246 / 0.5). The HEX value the tool also gives you works everywhere too.

Why design in HSL if I need RGB?

HSL is much easier to adjust by eye — you can lighten or mute a color by changing a single number — so many people pick colors in HSL and convert to RGB only when a tool or library needs it. This converter makes that final step instant.

Is the RGB result exact?

It's exact for the HSL you enter. Each channel is rounded to a whole 0–255 value, which is how RGB works, so converting back to HSL can land a step away if your original used in-between values, but the visible color is identical.

Is this tool free and private?

Completely. There's no sign-up, and the conversion runs entirely in your browser with JavaScript, so your colors are never uploaded or logged. It works offline once the page has loaded.