HSL to RGB converter
Convert HSL to RGB in one step. Paste a HSL value and the RGB equivalent updates instantly, with a live preview so you can see exactly what you’re working with.
Try hsl(16, 100%, 60%)
Updates as you type
How to use this tool
- 1Paste or type your HSL value into the input on the left.
- 2Read the RGB equivalent on the right. It updates as you type.
- 3Click the copy button next to the RGB value to put it on your clipboard.
About this tool
HSL is human-friendly; RGB is what shaders, canvas APIs, and image-processing libraries expect. This converter rounds each channel to the nearest integer between 0 and 255.
Related tools
HEX to RGB converter
Convert HEX colors to RGB instantly. Paste a value, copy the result. Works for design, web, and print workflows.
RGB to HEX converter
Convert RGB colors to HEX instantly. Paste a value, copy the result. Works for design, web, and print workflows.
HEX to HSL converter
Convert HEX colors to HSL instantly. Paste a value, copy the result. Works for design, web, and print workflows.
HSL to HEX converter
Convert HSL colors to HEX instantly. Paste a value, copy the result. Works for design, web, and print workflows.
HEX to CMYK converter
Convert HEX colors to CMYK instantly. Paste a value, copy the result. Works for design, web, and print workflows.
CMYK to HEX converter
Convert CMYK colors to HEX instantly. Paste a value, copy the result. Works for design, web, and print workflows.
Frequently asked questions
How do I convert HSL to RGB?
Paste your HSL value in the field above. The RGB equivalent updates as you type, with a live color preview and copy button.
Is the HSL to RGB conversion accurate?
Yes. The conversion uses the standard sRGB color math browsers and design tools use, so the result matches what Figma, Photoshop, and CSS produce.
Do you store the colors I convert?
No. Conversion happens entirely in your browser. Nothing is sent to a server and no values are saved.
Can I use HSL values with or without a hash / parentheses?
You can paste a full CSS string like `hsl(16, 100%, 60%)`, or just the numbers separated by spaces or commas.
When should I use RGB instead of HSL?
RGB is best when you need to manipulate individual color channels in code, work with image data, or pass values into APIs that expect numbers.
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.