Free tools
HSL to RGB Converter
Free HSL to RGB converter. Enter hue, saturation, and lightness values and instantly get the red, green, and blue values with a live color preview.
CSS value:
rgb(255, 87, 51) Please enter valid values: H 0–360, S 0–100, L 0–100.
Convert HSL to RGB with Our Free Online Tool
Enter hue (0–360°), saturation (0–100%), and lightness (0–100%) and instantly see the red, green, and blue values. A live color preview updates as you type.
When Do You Need HSL to RGB?
Many design tools output colors in HSL, while CSS, canvas APIs, and image processing libraries often expect RGB. This converter bridges that gap instantly.
HSL to RGB Conversion Formula
For achromatic colors (S = 0): R = G = B = L × 255. Otherwise, compute intermediate values q and p from L and S, then apply a piecewise hue function to each of the three channels shifted by 120°.
Common HSL to RGB Conversions
| H (°) | S (%) | L (%) | R | G | B |
|---|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 0 | 0 |
| 0 | 0 | 100 | 255 | 255 | 255 |
| 0 | 100 | 50 | 255 | 0 | 0 |
| 120 | 100 | 50 | 0 | 255 | 0 |
| 240 | 100 | 50 | 0 | 0 | 255 |
| 60 | 100 | 50 | 255 | 255 | 0 |
| 0 | 0 | 50 | 128 | 128 | 128 |
| 14 | 100 | 60 | 255 | 87 | 51 |
| 204 | 70 | 53 | 52 | 152 | 219 |
| 145 | 63 | 49 | 46 | 204 | 113 |
Frequently Asked Questions
What's the difference between HSL and RGB?
HSL describes colors in terms humans understand: hue (the color), saturation (intensity), and lightness (brightness). RGB describes the technical mixture of red, green, and blue light. HSL is better for creating color variations; RGB is how screens actually display colors.
How do I enter HSL values?
Enter three values: Hue (0-360, or include 'deg'), Saturation (0-100, or include '%'), and Lightness (0-100, or include '%'). Examples: '180, 50%, 50%' or '180deg 50 50'. The tool accepts various formats.
When would I need RGB instead of HSL?
Use RGB when: working with image editing software, creating colors with transparency (rgba), writing low-level graphics code, or when your platform/framework specifically requires RGB values. Many JavaScript canvas operations and design tools prefer RGB.
Are the RGB values always whole numbers?
RGB values are integers from 0 to 255. The conversion from HSL may produce decimals internally, but they're rounded to whole numbers since that's the standard RGB format. The live preview shows the actual resulting color.
Can I convert multiple colors quickly?
Yes. After converting one color, just change the HSL values and the RGB output updates instantly. Use this to create color palettes by keeping hue constant and varying lightness, or keeping lightness constant and shifting hue.