Skip to content
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Convert HEX color to HSL

Convert a hexadecimal color to HSL (hue, saturation, lightness), the most intuitive format for creating lighter or darker variants of the same color.

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

HSL

hsl(173, 82%, 24%)

Calculates hue (0-360 degrees), saturation and lightness from the RGB channels, following the standard HSL color model.

Use cases

  • Creating variants of a color by adjusting only the lightness.
  • Defining a CSS color system with hsl().
  • Understanding the composition of a brand color.

How it works

  1. 1

    Type the HEX code

    Enter the hex code, with or without the hash.

  2. 2

    Copy the HSL

    The hsl(h, s%, l%) value is calculated instantly.

Frequently asked questions

Why use HSL instead of HEX?

HSL makes it easy to create lighter or darker shades of the same color by changing only the lightness value, which is hard to do by eye with HEX.

How do I use the HSL value in CSS?

Paste it directly into any color property: background-color: hsl(210, 80%, 50%); All modern browsers support it natively, no need to convert it to HEX first.

Related tools

← Colors & design