Paul Digital
Menu

HEX to HSL Converter

Type a HEX color code to get its HSL values, plus RGB and a preview.

Enter a color

Result

HEX #FF8800
rgb(255, 136, 0)
hsl(32, 100%, 50%)

How to use it

  1. Type a color in HEX, RGB or HSL, or use the color picker.
  2. The other formats update as you type.
  3. Copy the format you need from the result.

About this tool

HSL describes a color as hue (an angle from 0 to 360 degrees around the color wheel, where 0 is red, 120 is green and 240 is blue), saturation (0% is gray, 100% is vivid) and lightness (0% is black, 100% is white).

The converter first reads the HEX code as RGB, then works out hue, saturation and lightness from the largest and smallest of the three values. To make a color lighter or darker, change only the L value and convert back.

Formula

  • Lightness = (max + min) ÷ 2 of R, G, B scaled to 0–1.
  • Saturation = (max − min) ÷ (1 − |2L − 1|). Hue depends on which of R, G or B is largest.

Examples

  • #FF0000 = rgb(255, 0, 0) = hsl(0, 100%, 50%)
  • #FF8800 = rgb(255, 136, 0) = hsl(32, 100%, 50%)
  • #00A86B = rgb(0, 168, 107) = hsl(158, 100%, 33%)
  • #1E90FF = rgb(30, 144, 255) = hsl(210, 100%, 56%)

Tips

  • Type HSL in the HSL box to convert HSL to HEX the other way.
  • Use HSL when you want to make a color lighter or darker: change only the lightness.
  • Check text and background contrast before you use a color pair on a page.

Questions and answers

What is #FF8800 in HSL?

hsl(32, 100%, 50%).

How do I convert HSL to HEX?

Type the HSL value into the HSL box. The HEX code appears in the result.

Are my colors saved or sent anywhere?

No. The conversion runs in your browser on your own device. Nothing you type is sent to Paul Digital or any other server.

More tools

Privacy

The conversion runs in your browser on your own device. Nothing you type is sent to Paul Digital or any other server. Colors may look slightly different on different screens.