HSL to Hex Color Converter

What this tool does

HSL is wonderful for working out a colour and hex is what you usually have to deliver. You might dial in a shade by its hue, saturation, and lightness, then find that your stylesheet, theme file, or design tool wants it as a hex code like #2DD4BF. Turning the HSL value into hex is the step that gets your tuned colour into the format the work expects.

That is what this does. You give it hue, saturation, and lightness values, and it returns the matching hex code, the same colour packed into a single string ready to paste where you need it. It is quick and exact, taking the colour you shaped in the model best for shaping and handing it back in the model best for shipping.

How to use it

1. Enter your HSL values. Type the hue from 0 to 360 and the saturation and lightness as percentages, or set a colour with the picker.
2. Read the hex code. Out comes the matching six-character hex code, hash included, right away.
3. Copy it across. Drop the hex code into your stylesheet or design tool, where it stands in for the HSL colour exactly.

Type the three numbers in, or set a colour with the picker and read its hex code from the result, depending on whether you are starting from figures or from a colour.

How it works

This conversion has a step in the middle, because a hex code is a compact way of writing red, green, and blue, and HSL is not in those terms yet. So the hue, saturation, and lightness are first turned into RGB amounts, and those amounts are then written out in hexadecimal as the six-character code. Both stages are handled by TinyColor.

It is worth noting that this is a genuine conversion, not just a change of notation. Going from RGB to hex is only a rewrite of the same numbers, but going from HSL to hex first requires translating the perceptual hue, saturation, and lightness into the screen's red, green, and blue. The result is exact, and it is the true hex form of the colour your HSL values describe.

What a hex code is

A hex colour code is a short string, normally led by a hash, made of six characters, like #2DD4BF. Those six characters are three pairs, and each pair sets one channel of the colour: the first is red, the second green, the third blue. A pair runs from 00, meaning none of that colour, up to FF, meaning the full amount of it.

The characters are written in hexadecimal, a number system with sixteen digits that uses 0 to 9 and then A to F, which is simply a compact way to write a value from 0 to 255 in two characters. So beneath the unfamiliar look, a hex code is just the red, green, and blue amounts of a colour in a tight, screen-friendly form, which is why it slots so neatly into stylesheets and markup.

How HSL becomes a hex code

The two describe a colour from different angles. HSL describes it perceptually, as a hue with a saturation and a lightness, the way you might think about it while choosing or adjusting. A hex code describes it for the screen, as packed amounts of red, green, and blue light. Both fix the identical colour, but they are not in the same terms, so a real translation is needed.

That translation goes by way of RGB. The HSL values are first rebuilt as red, green, and blue amounts, and each of those is then written as a two-character hexadecimal pair, the three pairs joining behind a hash to form the code. Unlike rewriting RGB as hex, which only changes the base, this conversion crosses from the perceptual model into the screen's own, then compacts the result. The colour is preserved exactly throughout.

Why convert HSL to hex

Mostly it is the web asking again. Hex is the common way to write colour in CSS and HTML, and a great deal of design tooling expects it, so a colour worked out in HSL has to become hex before it can be dropped into the place you are building. The conversion is simply that handover.

There is a natural workflow behind it. HSL is the easier model for arriving at a colour, since adjusting lightness or saturation is straightforward there, while hex is the easier model for storing and sharing one, since it packs the colour into a single token. Converting HSL to hex lets you enjoy both: shape the colour in the comfortable model, then carry it into the compact one the rest of your tools already speak.

Tune in HSL, ship in hex

This pairing captures why the conversion is so common. When you are deciding on a colour, HSL is the place to be, because its three numbers move along qualities you can feel: turn the hue for a different colour, lift the lightness for a paler one, ease the saturation for a calmer one. The colour comes together quickly when the controls match the way you think.

Once it is right, though, hex is the form that travels. It drops cleanly into a stylesheet, sits tidily in a design file, and is the format most tools and teammates expect, all as a single compact code. So the everyday rhythm is to tune in HSL and ship in hex, and this tool is the bridge between the two: shape the colour one way, deliver it the other, with nothing lost in between.

Questions people ask

What is a hex colour code?

A six-character string, usually led by a hash, that stores a colour's red, green, and blue amounts in hexadecimal. Each pair is one channel, running from 00 for none up to FF for the full amount.

Does HSL convert straight to hex?

Not directly. The HSL values are first turned into RGB, then those are written out in hexadecimal as the hex code. It is a genuine conversion through RGB, not just a change of how the numbers are written.

Is the conversion exact?

Yes. Translating HSL through RGB to hex preserves the colour exactly, so the hex code you get back is a faithful representation of the HSL value you entered.

Can I edit the colour once it is hex?

Hex is awkward to adjust by hand. If you need to tweak the colour further, work in HSL and convert again, since HSL is the model built for changing a colour.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Web colors, hex triplets and how they encode red, green, and blue. Wikipedia. https://en.wikipedia.org/wiki/Web_colors
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor