Skip to content
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Convert HSL color to HEX

Convert HSL values (hue, saturation, lightness) to their equivalent hexadecimal code, ready to use in CSS.

Processed on your device. Nothing is sent to any server.

HEX

#0B6F5B

Converts the HSL model to RGB and then to its hexadecimal representation, following the standard HSL color space algorithm.

Use cases

  • Converting a color defined in hsl() to HEX for compatibility.
  • Documenting a palette defined by hue and lightness.
  • Generating color variants and getting their HEX.

How it works

  1. 1

    Adjust H, S and L

    Enter the hue (0-360), saturation and lightness in percent.

  2. 2

    Copy the HEX

    The hexadecimal code is calculated instantly.

Technical details

  • Example: hsl(210, 100%, 50%) → #0080FF.
  • At 0% lightness the result is always black and at 100% white, whatever the hue; at 0% saturation you get a gray.
  • HSL isn't perceptually uniform: a yellow and a blue with the same lightness don't look equally light. Check with the contrast checker if the color will carry text.
  • Because HEX only holds whole numbers, a HEX → HSL → HEX round trip may shift a channel by one unit.

Frequently asked questions

What range does each value have?

Hue ranges from 0 to 360 degrees; saturation and lightness are expressed as a percentage, from 0 to 100.

Related tools

← Colors & design