Skip to content
Calculator Tools
CSS & Design Calculators

HSL to HEX Converter

Convert HSL colour values to hex and RGB — the format that makes tints and shades easy.

Enter values

Results update as you type.

Result

Hex

#3C83F6

HSL makes a palette easy: hold hue and saturation, move lightness for tints and shades.

RGB
rgb(60 131 246)
HSL
hsl(217 91% 60%)
Lighter tint
hsl(217 91% 80%)
Darker shade
hsl(217 91% 40%)
Complementary hue
hsl(37 91% 60%)

About the HSL to HEX Converter

Convert HSL colour values to hex and RGB — the format that makes tints and shades easy.

Also known as: hsl rgb converter, hsl color converter, hue saturation lightness.

How to use this calculator

  1. Enter hue, saturation, lightness.
  2. The result updates instantly as you type — press Calculate (or Enter) at any time.
  3. Review the breakdown shown under the main result.
  4. Use Copy result or Share to save the answer or send a link with your inputs.

Formula

HSL is converted to RGB through chroma, then written as hex

Worked example

Using the values pre-filled in the calculator above:

  • Hue = 217 °
  • Saturation = 91 %
  • Lightness = 60 %

the calculator returns:

  • Hex: #3C83F6
  • RGB: rgb(60 131 246)
  • HSL: hsl(217 91% 60%)
  • Lighter tint: hsl(217 91% 80%)