HSL to RGB Color Converter

What this tool does

HSL is a way of thinking about a colour; RGB is the way a screen actually makes it. You might choose a colour by its hue, saturation, and lightness because those are easy to reason about, but a display does not work in those terms, and plenty of tools and languages want the colour as red, green, and blue numbers instead. Converting from one to the other is the step that gets you there.

That is what this does. You give it hue, saturation, and lightness values, and it returns the same colour as RGB, three numbers for the red, green, and blue a screen would mix to show it. It is quick and exact, taking a colour from the model you reason in down to the form the screen actually uses.

How to use it

1. Enter your HSL values. Type the hue, saturation, and lightness into their fields, the hue from 0 to 360 and the other two as percentages, or choose a colour with the picker.
2. Read the RGB result. The tool returns the red, green, and blue amounts as three numbers between 0 and 255, right away.
3. Use the numbers. Take the RGB numbers into your code or design tool, ready to use as they are or to extend into rgba.

Type the three HSL numbers in, or set a colour with the picker and read its RGB values from the result, whichever suits the way you are working.

How it works

RGB is the screen's own language, so this conversion translates your colour into it in a single step. From the hue, saturation, and lightness, the tool works out how much red, green, and blue light would produce that colour, a calculation handled by TinyColor. There is no intermediate model to pass through, since RGB is the destination itself.

Nothing about the colour shifts in the process. HSL and RGB are two coordinate systems describing the same colour, so the conversion only relocates it from one to the other. The difference is that the RGB numbers are the exact amounts of light the screen will emit, where the HSL numbers were a more human description of the same result.

What RGB actually is

RGB stands for red, green, and blue, the three colours of light a screen combines to create everything it shows. Every channel takes a number from 0 to 255, with 0 meaning that light is off and 255 meaning it is fully on. So 255, 0, 0 is pure red, 0, 0, 0 is black, and 255, 255, 255, with every channel full, is white.

It makes colour by adding light, which is why turning channels up makes a result brighter. From a dark screen, each channel you raise contributes its colour, building toward white when all three are at full. Every monitor, phone, and television creates colour this way, which is what makes RGB the screen's native model rather than just one more notation to write a colour in.

How HSL becomes RGB

The two come at a colour from opposite directions. HSL describes it perceptually, by where it sits on the wheel and how saturated and light it is, which suits choosing and adjusting. RGB describes it physically, as the amounts of red, green, and blue light that make it. Both fix the identical colour, but only one of them is what the screen can act on.

Translating means turning the perceptual description into light amounts. The hue decides which of the three channels lead, the lightness sets how bright the whole colour is, and the saturation governs how far the channels spread apart from a neutral grey. From those relationships the tool produces the three RGB numbers. Because the result is just the same colour expressed in the screen's terms, the conversion is exact.

Why convert HSL to RGB

Often it is about what a tool expects. Many programming environments, graphics libraries, and design applications take colours as red, green, and blue numbers rather than as HSL, so when your colour starts as hue, saturation, and lightness, converting it to RGB is simply the step that lets you use it where you are working.

It is also the gateway to a few other formats. The rgba form that adds transparency is built on RGB numbers, so reaching it means having the RGB form first, and the hex code is just these same numbers written in another base. Whenever a colour worked out in HSL has to meet a tool or format that thinks in red, green, and blue, this conversion is the bridge.

RGB, the screen's native form

It is worth appreciating that converting HSL to RGB is not crossing into a different colour world, the way converting to ink would be. RGB and HSL describe the very same screen colours; they just organise them differently. HSL groups them by qualities a person finds intuitive, while RGB lists the raw light the hardware emits. The conversion moves between two views of one thing.

That is why the step is exact and free of any loss or approximation. There is no narrowing of range and no judgement involved, unlike the leap to CMYK or Pantone, because both formats can express exactly the same set of colours. You are simply translating a colour from the form you find easiest to reason about into the form the screen was built to display, with the result identical down to the last detail.

Questions people ask

What are the RGB numbers?

They are the red, green, and blue light a screen mixes to make a colour, each from 0 to 255. Zero means none of that light and 255 means full strength.

Does HSL convert straight to RGB?

Yes, in one step. RGB is the screen's native form, so the hue, saturation, and lightness are translated directly into red, green, and blue amounts, with nothing in between.

Is anything lost converting HSL to RGB?

No. HSL and RGB are two descriptions of the same colour, so translating between them preserves it exactly. The colour is unchanged, only its form.

Is RGB the same as a hex code?

They describe the same colour: RGB writes the three numbers in plain form, while hex packs them into base sixteen. RGB is often the easier of the two to adjust by hand.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. RGB color model, the additive model used by screens. Wikipedia. https://en.wikipedia.org/wiki/RGB_color_model
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor