RGB to HSL Converter

What is an RGB to HSL conversion?

RGB describes a color as three channel values — red, green, and blue, each from 0 to 255 — the format a color picker, a screenshot tool, or a canvas pixel readout hands you directly. HSL describes the same color as hue (a position on the color wheel), saturation (distance from grey), and lightness (distance from black or white). An RGB to HSL conversion takes rgb(64, 147, 230) and works out what hue, saturation, and lightness produce that exact set of channel values.

The reason to convert in this direction specifically is that raw channel numbers rarely tell you much on their own. rgb(64, 147, 230) does not obviously read as “a mid-toned blue” the way hsl(210, 77%, 58%) does — HSL puts the color's hue and tone into numbers a person can reason about and describe, without changing the color itself.

Enter an rgb() value, or set the Red, Green, and Blue fields directly, and this page returns the matching hsl() along with a swatch to confirm the color.

How to convert RGB to HSL

1. Enter the RGB value. Type it into the text field as rgb(64, 147, 230) or as bare numbers like 64, 147, 230 — or set the Red, Green, and Blue number fields underneath directly. Both drive the same result live, with nothing to submit.
2. Read the HSL value. The swatch and the hsl() result update instantly. Click the value to copy it to your clipboard.
3. Check the other formats. The Other formats row shows the same color as a hex code and as rgb(), also click-to-copy, and there is a nearest-named-color link plus a link to the full color picker.

Making sense of raw channel values

This direction earns its keep whenever RGB numbers arrive from a source that only speaks channels: an eyedropper tool, a browser's color picker, a screenshot you sampled a pixel from, or a canvas readout like getImageData that hands back red, green, and blue integers with no further comment. None of those tell you whether the color is warm or cool, muted or vivid, dark or light — HSL does, because hue, saturation, and lightness are exactly those judgments expressed as numbers.

It is also useful for comparing sampled colors to each other. Two RGB triples that look similar as numbers can be quite different in tone, while HSL makes it immediate: the same hue at a different lightness is a shade of the same color, whereas a different hue at similar saturation and lightness is a genuinely different color at a similar intensity. That kind of comparison is what HSL is for and RGB is not.

And once you have the hue, saturation, and lightness, it is a much shorter step to describe the color in a design review, a bug report, or documentation — “a muted teal around 45% lightness” communicates something that rgb(74, 158, 152) does not.

How accurate is an RGB to HSL conversion?

Since RGB and hex are just two ways of writing the same bytes, converting RGB to HSL is mathematically identical to converting hex to HSL, and it is exact at full precision: converting every one of the 16,777,216 possible sRGB colors to HSL and back returned the identical color in every case, 0 failures out of 16,777,216. The math behind it was also checked against Python's colorsys module across more than 60,000 colors, including every grey and a sweep of pure hues, with no disagreement on hue, saturation, or lightness.

Where accuracy actually gets spent is the display step. This page, like every HSL display, rounds the result to whole degrees and whole percents. Measured across all 16,777,216 colors, taking a color's RGB values to rounded HSL and back to RGB returns the exact original color for only 1,775,570 of them, 10.58%; the remaining 89.42% come back with at least one channel off — by 1 for 54.38% of colors, by 2 for 32.06%, by 3 for 2.89%, by 4 for 0.09%, and by 5 for just 108 colors out of 16.7 million. The single worst case measured is #02E4E6, which is rgb(2, 228, 230), displays as hsl(181, 98%, 45%), and converts back to #02DFE3.

That gap is guaranteed by counting rather than being a flaw: rounded HSL only has 360 × 101 × 101 = 3,672,360 distinct triples, against 16,777,216 possible RGB colors, so at least 78.11% of colors must share a rounded label with another color. If you are converting a lot of sampled pixels, this is worth knowing directly — two pixels with slightly different RGB values can and often will display the same rounded hue, saturation, and lightness.

One edge case worth knowing when sampling real pixels: for a true grey, where red, green, and blue are equal, hue has no defined direction on the color wheel, and this tool follows the standard convention of reporting it as 0. The practical rule: use the HSL reading to describe or nudge a sampled color, but if you need to reproduce that exact pixel later, keep the original RGB or hex values rather than reconstructing them from the rounded HSL you read off screen.

Why is this free?

The conversion runs entirely in your browser — the RGB values you enter never reach a server, there is nothing to upload, and there is no backend call to fund. That means no account, no watermark, and no usage cap on how many colors you convert.