RGB to HSL converter.

Scale R, G and B to 0 to 1. Lightness is the average of the largest and smallest; saturation is their difference over min(L, 1 − L) × 2; hue comes from which channel is largest and how the other two compare, times 60 degrees. For rgb(59 130 246) that's hsl(217.2 91.2% 59.8%).

Hue and saturation are what people adjust when they think about color, which makes HSL easier to tweak by hand than RGB: lighten a button by raising L, mute it by lowering S.

When R, G and B are equal there's no hue, so it's written 0 with 0% saturation. CSS treats that hue as missing, and it doesn't change the color.

rgb() or rgba(), with commas or spaces, percentages, or the three numbers alone: 59 130 246.

To one decimal, so converting back gives the same RGB. Legacy syntax writes hsl() with commas and hsla() for alpha.

No. The conversion runs in your browser.

No. The RGB to HSL converter is free and opens without a sign-in, an account or an install.

Nothing. The RGB to HSL converter holds your input in the page's memory, so closing or reloading the tab clears it, and it saves nothing in this browser.

Closest to the RGB to HSL converter: HEX to HSL converter, RGB to HEX converter, HSL to HEX converter, Color converter. Each opens on its own page, free and in the browser.

The RGB to HSL converter is one of 17 in its group. The group's page, /tools/color, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.