Super Boring Tools

Search tools

Find a tool by name or what it does.

RGB to HSL Converter

Enter red, green, and blue values with an optional alpha and copy the matching HSL, HSLA, and HEX, next to a live swatch.

RGB channels

Each channel is 0 to 255. Everything runs in your browser. Nothing is uploaded.

Formats

HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 1)
HEX#6366f1

How to convert RGB to HSL online

  1. Enter the channels

    Type the red, green, and blue values as numbers from 0 to 255 in the three fields.

  2. Set alpha if needed

    Drag the alpha control to add transparency, or leave it at 100% for a fully opaque color.

  3. Read the HSL

    The HSL, HSLA, and HEX forms and a live swatch update instantly as you change any value.

  4. Copy what you need

    Use the copy button on any row, or Copy all formats to grab every notation in one block.

Why use this tool

Separate channel fields

Red, green, and blue each get their own input, so you can nudge one value and watch the swatch and every code update at once.

Hue, saturation, lightness

The HSL output reports hue in degrees and saturation and lightness as percentages, the form designers reason about when shifting or muting a color.

Alpha carried into HSLA

The transparency control flows into the HSLA output and the 8-digit HEX, so semi-transparent colors keep the right opacity.

HEX alongside HSL

The matching #RRGGBB HEX code sits next to the HSL forms, so you can copy whichever notation your stylesheet or design tool expects.

Values clamped and rounded

Channels outside 0 to 255 are clamped and decimals are rounded, so the output is always a valid color.

Runs entirely in your browser

Everything happens on your device; nothing is uploaded, sent to a server, or stored.

About this tool

This converter turns red, green, and blue channel values into the HSL color model of hue, saturation, and lightness. Enter each channel as a number from 0 to 255, drag the optional alpha control, and the HSL, HSLA, and HEX forms update instantly next to a live swatch. Every value has its own copy button. Channels outside the 0 to 255 range are clamped, and decimals are rounded to the nearest whole channel, so the output is always a valid color you can paste straight into CSS.

HSL describes a color by its position on the color wheel, how vivid it is, and how light or dark it is, which makes it far easier to reason about than raw red, green, and blue. Reach for this tool when you want to shift a hue, mute a saturation, or build a lighter tint without juggling three separate channels. The alpha control flows into the HSLA output as its fourth value, so semi-transparent overlays and shadows stay correct.

Everything is computed in the page, so the numbers you enter are never sent anywhere. Color work rarely stops at one conversion: to read any value back as every other notation use the color converter, to turn an HSL color into a HEX code use the HSL to HEX converter, and to go the other direction from RGB to a HEX string use the RGB to HEX converter.

Frequently asked questions

How do I convert RGB to HSL?
Enter the red, green, and blue values from 0 to 255 and the HSL value appears immediately. Hue is shown in degrees from 0 to 360, and saturation and lightness as percentages from 0 to 100.
What is the difference between HSL and HSLA?
HSLA adds a fourth value for alpha, the opacity of the color. When the alpha control is below 100% the HSLA string carries that transparency, while HSL alone describes a fully opaque color.
What happens if I enter a value above 255?
Any channel below 0 or above 255 is clamped to that range, and decimal values are rounded to the nearest whole number, so the result is always a valid 24-bit color.
Can I get a HEX code too?
Yes. The matching #RRGGBB HEX code is shown beside the HSL and HSLA forms, plus an 8-digit HEX with alpha when the opacity is below 100%. Each row has its own copy button.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server or stored.

Related tools