Super Boring Tools

Search tools

Find a tool by name or what it does.

HSL to RGB Converter

Turn hue, saturation, and lightness into RGB and HEX. Slide or paste, copy the result.

Paste hsl() or a bare triplet, or use the sliders. Everything runs in your browser.

Adjust

Result

96
R
67
G
239
B
RGBrgb(96, 67, 239)
HEX#6043ef
HSLhsl(250, 84%, 60%)

How to convert HSL to RGB online

  1. Enter an HSL color

    Paste an hsl() value like hsl(250, 84%, 60%) or a bare triplet like 250 84 60 into the input field.

  2. Adjust the sliders

    Fine-tune hue (0 to 360), saturation, and lightness (0 to 100%) with the sliders and watch the swatch update live.

  3. Copy the RGB or HEX value

    Use the copy button next to any format row, or copy all formats at once with the button at the bottom.

Why use this tool

Sliders and paste input

Set the color with hue, saturation, and lightness sliders, or paste any hsl() string. Both stay in sync and convert as you move.

Flexible hsl() parsing

Accepts comma or space separators, an optional hsl() or hsla() wrapper, percent signs, and bare triplets like 250 84 60.

Out-of-range values handled

Hue wraps past 360 degrees, saturation and lightness clamp to 0 and 100%, and greys with zero saturation convert correctly.

RGB, HEX, and channel readout

Get the rgb() string, the 6-digit HEX code, and each red, green, and blue channel as its own 0 to 255 value.

Runs entirely in your browser

Conversion happens on your device the moment you type or slide. Nothing is uploaded and no account is needed.

About this tool

HSL describes a color by hue (the angle on the color wheel, 0 to 360 degrees), saturation (how vivid it is, 0 to 100%), and lightness (how close it sits to black or white). RGB describes the same color as red, green, and blue channels from 0 to 255, which is the form most graphics software, image formats, and legacy code expect. This converter maps any HSL value onto the standard RGB model and shows the result as an rgb() string, a HEX code, and three separate channel values, next to a live swatch of the exact color.

You can work in either direction of precision: drag the three sliders to explore, or paste a value straight from a stylesheet. The parser accepts hsl(250, 84%, 60%), the modern space-separated hsl(250 84% 60%) form, hsla() with an alpha you want dropped, and bare triplets like 250 84 60. Hue values past 360 wrap around the wheel, negative hues wrap the other way, and saturation or lightness outside 0 to 100 is clamped rather than rejected. A zero-saturation input produces a pure grey where all three RGB channels match.

It is handy whenever a design spec gives HSL but a canvas, config file, or API wants RGB or HEX. For the reverse trip, use the RGB to HSV converter, or pick colors visually on the color wheel.

Frequently asked questions

How does the HSL to RGB conversion work?
It uses the standard formula from the CSS color specification. Lightness and saturation define two anchor values, and the hue angle decides how much of each lands in the red, green, and blue channels. Each channel is then scaled to the familiar 0 to 255 range.
What input formats are accepted?
Full hsl() and hsla() strings with commas or spaces, percent signs on saturation and lightness, a deg suffix on hue, and bare triplets like 250 84 60. Alpha values in hsla() are ignored since the output formats are opaque.
What happens with values outside the normal range?
Hue wraps around the wheel, so 460 becomes 100 and -20 becomes 340. Saturation and lightness are clamped to the 0 to 100% range instead of producing an error.
Why do grey colors ignore the hue slider?
When saturation is 0% the color is achromatic, meaning it has no hue at all. Every hue angle produces the same grey, with all three RGB channels equal to the lightness value scaled to 255.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools