HSL Color Picker

How to use the HSL Color Picker

1. Drag in the color square or type hsl(210, 100%, 56%).
2. Use the H, S and L sliders to adjust one property at a time.
3. Click the HSL or HSLA value to copy it.

HSL Color Picker features

• Separate hue, saturation and lightness sliders, plus opacity for HSLA
• Accepts hsl(), hsla() and the modern hsl(h s l / a) syntax
• HSV/HSB shown alongside HSL, plus HEX, RGB, CMYK and OKLCH
• Tints, shades, tones and color harmonies for every color
• Contrast against white and black, and a color blindness preview
• Saved colors kept in your browser

What is HSL color?

HSL describes a color the way people tend to think about it: which color it is, how intense it is and how light or dark it is. The three values are:

• Hue (0–360°): the position on the color wheel. 0° is red, 120° is green and 240° is blue, with every other hue in between.
• Saturation (0–100%): how colorful it is. 0% is a gray, 100% is the most vivid version of the hue.
• Lightness (0–100%): 0% is always black, 100% is always white, and 50% is the pure color.

So hsl(210, 100%, 56%) is a bright blue, hsl(210, 100%, 85%) is a pale version of the same blue, and hsl(210, 20%, 56%) is a dusty, grayish blue. Only one number changes each time, which is what makes HSL so convenient.

Why designers and developers like HSL

With HEX or RGB, making a color a little lighter means changing all three numbers at once. With HSL you just raise the lightness. That makes it easy to build related colors by hand:

• Hover and active states: lower the lightness by 5–10% for a darker hover color.
• Light backgrounds: keep the hue, drop saturation a little and raise lightness to 92–97% for subtle tinted backgrounds.
• Theme variations: keep saturation and lightness and change only the hue to get a set of colors that feel equally strong.
• CSS variables: store the hue in a variable and derive a whole palette from it, for example hsl(var(--brand-hue) 80% 45%).

HSL hue reference

HSL vs HSV (HSB)

HSL and HSV share the same hue, but they define brightness differently. In HSV (also called HSB), 100% value is the pure color, and white needs 0% saturation as well. In HSL, the pure color sits at 50% lightness and 100% lightness is always white. The same color therefore has different saturation numbers in each model: dodgerblue is hsl(210, 100%, 56%) but hsv(210, 88%, 100%).

Design apps such as Photoshop and Figma use HSV for their color squares, while CSS uses HSL. This picker shows both, so you can move between them without converting by hand.

HSL and HSLA in CSS

Every browser supports HSL. Add transparency with HSLA or the modern slash syntax:

color: hsl(210, 100%, 56%);
background: hsla(210, 100%, 56%, 0.5);
border-color: hsl(210 100% 56% / 50%);

A limitation worth knowing

HSL lightness is a mathematical value, not how bright a color actually looks. Yellow at 50% lightness looks much brighter than blue at 50% lightness. If you need colors that look evenly light across different hues, for example in a design system or a chart, use OKLCH instead. The Tailwind Palette Generator and Color Palette Generator work in OKLCH for exactly this reason.

Related tools

To generate a full set of lighter and darker variants of an HSL color in one go, use the Shades & Tints Generator. To convert HSL to HEX, RGB, CMYK and other formats in bulk, use the Color Converter.

HSL Color Picker: frequently asked questions