HSL to RGB Converter – Free, Instant & Online

Convert HSL to RGB in One Click

Type in any HSL colour value and get the exact RGB numbers instantly — no formulas, no guessing. The tool also shows you a live colour swatch and the same colour in every other format (HEX, HSV, CMYK) so you always leave with exactly what you need.

How to Use the HSL to RGB Converter

1. Enter your HSL values in the fields above — H (hue, 0–360), S (saturation, 0–100%), and L (lightness, 0–100%).
2. The RGB result appears immediately. No button to press.
3. Click the RGB value to copy it straight to your clipboard.
4. Check the live swatch to confirm the colour looks right before you paste it anywhere.

Worked Example: HSL to RGB Conversion

Say your design file gives you a vivid sky blue: HSL(200, 80%, 55%).

Paste those three numbers into the tool and you get:

That R 51, G 178, B 229 value is ready to drop straight into CSS, a canvas element, or any graphics library that expects red/green/blue channels between 0 and 255.

What Do the RGB Channels Actually Mean?

RGB describes a colour as three light intensities: Red, Green, and Blue, each on a scale from 0 (none) to 255 (full). Mixing those three values produces every colour your screen can show. So rgb(51, 178, 229) means a little red, a lot of green, and even more blue — which your eye reads as that clear sky blue.

How to Convert HSL to RGB in Code

If you need this conversion inside an app, here are the simplest ready-to-run snippets.

Python

import colorsys

h, s, l = 200 / 360, 80 / 100, 55 / 100
r, g, b = colorsys.hls_to_rgb(h, l, s)   # note: Python uses HLS order
print(int(r * 255), int(g * 255), int(b * 255))
# Output: 51 178 229

Python's built-in colorsys module takes values in the 0–1 range and uses HLS order (hue, lightness, saturation) — just keep that swap in mind.

JavaScript

function hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [
    Math.round(f(0) * 255),
    Math.round(f(8) * 255),
    Math.round(f(4) * 255)
  ];
}

console.log(hslToRgb(200, 80, 55));
// Output: [51, 178, 229]

This single function works in any modern browser or Node.js environment — no libraries needed.

How the Conversion Works

HSL (Hue, Saturation, Lightness) describes colour the way humans think about it: the colour wheel position, how vivid it is, and how bright it is. RGB is how screens actually produce it: mixing red, green, and blue light.

Converting between them is a well-defined mathematical formula from the W3C CSS Color spec. The hue angle is split into 60° sectors across the colour wheel; saturation and lightness together determine how much of each primary channel to mix. The tool runs this formula entirely in your browser — your colour values are never sent to any server.

When to Use HSL → RGB (and When Not To)

• Use it when your CSS or design tool gives you HSL values but your graphics library, game engine, or canvas API expects rgb() integers.
• Use it when you're generating colours programmatically (e.g. stepping hues around the colour wheel) and need the final values in RGB.
• Skip it if you're working purely in CSS — modern browsers accept hsl() natively in stylesheets, so no conversion is needed there.
• Skip it for print work. Screens use RGB; printers use CMYK. If you're preparing artwork for print, convert to CMYK instead.

Need to go in the other direction? The same tool lets you convert RGB to HSL — just enter your RGB values in the input instead.

The tool runs 100% in your browser. No sign-up, no upload, no data stored anywhere. Your colours stay private.

Takeaway: The next time a design hands you an HSL code but your code needs RGB, paste it above and copy the result in under a second.