Hex to HSL Converter

Type or pick a color to get its HEX, RGB and HSL values, lighten or darken it by lightness points and copy the result.

Embed

Embed this tool

Copy this code into your website, blog or class page. The tool runs inside your page.

1. Embed code

<iframe src="https://metal188.com/hex-to-hsl/?embed=1&ref=embed" width="100%" height="640" style="border:0;max-width:100%" title="Hex to HSL Converter" loading="lazy" allow="fullscreen; autoplay"></iframe>
<p>Tool by <a href="https://metal188.com/hex-to-hsl/" rel="nofollow">Hex to HSL Converter – Accessible Web Kit</a></p>

2. Optional: resize the frame to fit the tool (add once per page)

<script>addEventListener('message',function(e){if(e.origin!=='https://metal188.com')return;var h=e.data&&e.data.tkEmbedHeight;if(!h)return;document.querySelectorAll('iframe').forEach(function(f){if(f.contentWindow===e.source)f.style.height=h+'px'})})</script>

Please keep the credit link below the tool.

The Hex to HSL converter takes one color in hex form and shows its HSL values, along with its RGB values and contrast on white and black. Type a hex code such as #336699 and the result table shows the matching value, hsl(210, 50%, 40%). The tool also reads RGB, HSL and any of the 148 CSS color names, so you can start from whichever format you have, including rgb to hsl and hsl to rgb. It runs in your browser and nothing you enter is uploaded. Use it when you need a color in HSL for CSS, or when you want a lighter or darker shade of the same hue.

How to use the Hex to HSL converter

Type a color into the field labelled “Color (hex, RGB, HSL or name)”. You can enter a hex code with or without the #, such as 336699 or #369, or an rgb() or hsl() value, or a color name such as rebeccapurple. You can also pick a color with the color picker next to the field.
Read the result table. It shows HEX, RGB, HSL (whole numbers) and HSL (1 decimal). Use the 1 decimal row when you need more precision.
Click the Copy button beside the HSL row to copy the value for your code or design file.
To make the color lighter or darker, enter a number from -100 to 100 in the field “Lighten (+) or darken (−) by, in lightness points”. A positive number lightens the color and a negative number darkens it. Check the table called “After the change” for the new values.
Check the rows “Contrast on white” and “Contrast on black” if the color will hold text. A ratio of 4.5:1 or more is the WCAG AA level for normal-size text.
Press Reset to go back to the starting color, #336699, with no lightness change.

The address bar keeps the color and the lighten or darken value, so you can bookmark a result and return to it. The Reset button restores #336699 with no change.

How to convert hex to HSL

Hex to HSL is a two-step conversion: first read the hex code as red, green and blue values, then work out hue, saturation and lightness from those values. Each pair of hex digits is a base-16 number from 00 to FF, which is 0 to 255 in decimal. So #336699 means red 51, green 102 and blue 153.

Next, divide each value by 255 to get numbers between 0 and 1: 0.2, 0.4 and 0.6. Take the largest (max) and smallest (min) of these. Here max is 0.6 and min is 0.2.

Lightness: L = (max + min) / 2 = 0.4, which is 40%.
Saturation: S = (max − min) / (1 − |2L − 1|) = 0.4 / 0.8 = 0.5, which is 50%.
Hue: blue is the largest channel, so the hue is 60 × (4 + (R − G) / (max − min)) = 60 × (4 − 0.5) = 210°.

The result is hsl(210, 50%, 40%). If max equals min, the color is a grey, so the hue is 0 and the saturation is 0. To convert rgb to hsl by hand, use the same steps starting from the three decimal values.

What is HSL?

HSL stands for hue, saturation and lightness. It describes a color with three numbers instead of the mix of red, green and blue used in RGB. Hue is an angle on the color wheel in degrees: 0 is red, 120 is green, 240 is blue, and 360 comes back to red. Saturation and lightness are percentages. Saturation at 0% is a grey and at 100% is the full intensity of the hue. Lightness at 0% is black, 50% is the pure color, and 100% is white.

Because lightness is its own number, you can change how light a color is without changing its hue or saturation. The lighten and darken field does this. For #336699 lightened by 10 points, the result is hsl(210, 50%, 50%), which is #4080bf. Darkened by 20 points, it is hsl(211, 50%, 20%), which is #1a334d. The hue moves by one degree in the darker result because RGB values are stored as whole numbers from 0 to 255, so some rounding happens during the conversion.

Frequently asked questions

How do I convert hex to HSL?

Enter the hex code in the color field and read the HSL row in the result table. To do it by hand, convert each hex pair to a number from 0 to 255, divide by 255, and apply the lightness, saturation and hue formulas above.

What is HSL used for?

HSL is one way to write a color in CSS. The tool outputs the comma form, such as hsl(210, 50%, 40%), which every browser’s CSS accepts. Its separate hue, saturation and lightness values make it easy to adjust a color.

How do I lighten or darken a color in HSL?

Enter a number in the “Lighten (+) or darken (−) by, in lightness points” field. A positive number raises the lightness and a negative number lowers it. The hue and saturation stay the same, and the “After the change” table shows the new values.

How do you convert RGB to HSL?

Enter the value as rgb(51, 102, 153) in the color field, and the tool shows the HSL result. To do it by hand, divide each channel by 255 and use the steps in the section on converting hex to HSL.

How do I convert HSL back to RGB?

Enter the HSL value, such as hsl(210, 50%, 40%), in the color field and the RGB and HEX rows appear. Because the HSL values shown as whole numbers are rounded, the result can differ from the original by 1 on a channel. Use the 1 decimal row for a more exact round trip.

Why does my contrast result look slightly different from a rounded value?

Contrast ratios are cut to two decimals, not rounded. A ratio of 4.499 shows as 4.49, so it does not pass the 4.5 level.

Color Contrast Finder: use it when you need to find a color that meets a contrast level against a background.
Color Palette Contrast Checker: use it when you want to check the contrast of several colors in a palette at once.
Color Contrast Guidelines: use it when you want to understand the contrast rules that the results are measured against.
Color Contrast Checker: use it when you want to check the contrast between two specific colors.
Image Contrast Checker: use it when the color you converted sits on a photo or an uploaded image.