RGB to HSL Color Converter

What this tool does

RGB is a fine way to specify a colour and an awkward way to change one. If you have the values 59, 130, 246 and you want that blue a touch lighter, or a little less intense, there is no obvious number to nudge. HSL fixes that, which is why moving a colour from RGB into HSL is such a useful step.

That is what this does. You give it red, green, and blue values, and it returns the same colour as HSL, three numbers for hue, saturation, and lightness that describe the colour in terms you can actually adjust. The notes below set out what those three numbers mean and why they make a colour so much easier to work with than its RGB form.

How to use it

1. Enter your RGB values. Put in the red, green, and blue amounts, each from 0 to 255, or pick a colour with the picker.
2. Read the HSL result. The tool returns the hue in degrees and the saturation and lightness as percentages, immediately.
3. Work from the numbers. Copy the HSL values into your stylesheet or design tool, and treat them as a base you can adjust.

Type the three numbers in, or move the picker and watch the values follow, depending on whether you are starting from figures or from a colour.

How it works

RGB is exactly the form this conversion needs, so the values go straight into it with nothing to unpack first. The red, green, and blue amounts are re-expressed as a hue angle, a saturation, and a lightness, a calculation carried out by TinyColor, which moves between the two descriptions cleanly.

Importantly, the colour itself does not move. HSL and RGB are two coordinate systems pointing at the same colour, so the conversion relocates it from one to the other without altering it. What you gain is a description whose three numbers map onto the qualities you would actually want to change, rather than the raw channels of light.

What HSL actually is

HSL is short for hue, saturation, and lightness, three qualities that line up with the way people naturally describe a colour. The hue is which colour it is, measured as a position in degrees around the colour wheel, so a hue near 210 is a blue and a hue near 120 is a green. The saturation says how rich or how washed out the colour looks, on a scale from zero to one hundred percent.

The lightness says how close the colour is to black at one end or white at the other, again from zero to one hundred percent, with the pure colour sitting in the middle. The appeal of laying a colour out this way is that the three qualities are independent and easy to picture. Rather than describing a colour by how much red, green, and blue light it holds, HSL describes it by its colour, its richness, and its brightness, which is a far more human way to think.

How RGB becomes HSL

RGB and HSL come at the same colour from different directions. RGB describes it physically, as amounts of red, green, and blue light. HSL describes it perceptually, by where it sits on the wheel, how rich it is, and how bright it is. Both fix the identical colour; they just use coordinates suited to different tasks.

Working out the HSL coordinates means looking at the relationship between the three RGB channels. The hue comes from which channel leads and by how much, the lightness from the midpoint between the strongest and weakest channels, and the saturation from how far apart those extremes sit. Because RGB is already the input the formula expects, the step is clean, and the colour stays exactly as it was, only its description rebuilt into a form you can adjust by hand.

Why convert RGB to HSL

The real prize is adjustment. Once a colour is in HSL, the changes you most often want become single, obvious moves. After a lighter version for a background? Raise the lightness. Want it more muted? Drop the saturation. Looking for a different but related colour? Turn the hue. Each of these is a fiddly guess in RGB and a one-number tweak in HSL.

That makes HSL the natural choice when you are building from a colour rather than just placing it. Designers move a base colour into HSL to spin off the tints and shades a palette needs, to find the slightly darker tone for a button's hover state, or to keep a family of colours consistent by holding saturation and lightness steady while varying the hue. Whenever you intend to do something to a colour rather than use it as is, HSL is usually where you want to be.

Reading the three HSL numbers

Reading an HSL value comes down to knowing what each number governs. The first, the hue, names the colour by its place on the wheel, so a hue around 30 is an orange and one around 270 is a purple. The second, saturation, tells you how intense it is, with low numbers looking grey and faded and high numbers looking rich and pure.

The third, lightness, tells you how bright it is, with fifty percent being the colour at full strength, lower values sinking toward black and higher ones rising toward white. Once the habit sets in, you can read a colour's character straight from its HSL: low saturation with high lightness is a soft pastel, while high saturation with middling lightness is a bold, pure colour. That at-a-glance readability is the quiet edge HSL holds over a set of RGB numbers.

Questions people ask

What do the three HSL numbers mean?

They are hue, saturation, and lightness. The hue is the colour's position on the wheel, the saturation is how rich or faded it looks, and the lightness is how close it sits to black or to white.

Why use HSL instead of RGB?

Because HSL is built for changing colours. Making one lighter, more muted, or shifting it to a related hue is a single number change in HSL, where in RGB it would be guesswork. RGB specifies a colour well; HSL adjusts one well.

How do I get a lighter shade from HSL?

Increase the lightness number. Since lightness stands on its own, raising it produces a lighter version of the same colour while leaving its hue untouched, which suits tints and backgrounds.

Does converting to HSL change the colour?

No. HSL and RGB describe the same colour in different terms, so the conversion only rewrites it. The colour stays identical down to the last detail.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. HSL and HSV, the hue-saturation colour models. Wikipedia. https://en.wikipedia.org/wiki/HSL_and_HSV
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor