FREE WEB TOOL

HSL to RGB converter

Convert HSL hue, saturation and lightness into RGB values (0–255).

Use tool

H (0–360)S %L %

🔒 Inputs are processed locally in your browser.

Result

How to use it

Convert HSL hue, saturation and lightness into RGB channels from 0 to 255. It is useful when a color was chosen in HSL but the next tool or code path expects RGB.

Enter H for hue, S for saturation and L for lightness.
Select Convert.
Read the resulting red, green and blue channel values and copy them into your CSS or design workflow.

H: Hue angle; 0° and 360° are the same red position
S: 0–100%
L: 0–100%
Output: R / G / B: 0–255

Converting HSL 220 / 84% / 56%

Enter H=220, S=84 and L=56 to get the same color expressed as three RGB channels. This is handy when an HSL-adjusted design has to be handed to software that only accepts RGB values.

RGB is displayed as integers, so converting back to HSL can produce a very small rounding difference.

Hue is the direction around the color wheel

H is an angle: red sits near 0°, then the wheel moves through yellow, green, blue and purple before wrapping around. 360° lands on the same point as 0°.

Saturation controls colorfulness

Near 0%, the color moves toward gray. Higher values make the hue more vivid. Keeping H fixed while lowering S is a quick way to build calmer supporting colors.

Lightness controls the dark-to-light range

L=0% is black and L=100% is white. Keeping H and S fixed while adjusting L creates lighter or darker variants that still belong to the same color family.

The conversion changes notation, not intent

HSL and RGB are different coordinate systems for the same displayed color. The only small difference you may see comes from rounding the final RGB channels to integers.