HSL Color Picker | Free Online Color Tool

HSL color picker

HSL Color Picker

Set hue, saturation and lightness and copy hsl().

What is an HSL color picker?

An HSL color picker is a tool that builds a color from HSL values.

It sets hue saturation and lightness and gives the matching HEX RGB and CMYK values to copy.

How it works

1

Drag the sliders

Set each channel to the value you want.

2

See it live

The swatch and every format update at once.

3

Copy a value

Copy any format with one click.

Why use it

Easy to adjust

Change lightness to make tints and shades.

Match colors

Hold the hue and vary saturation for sets.

Convert fast

Read the same color as HEX RGB or CMYK.

Where you use it

Web and app design

Set exact brand and UI colors.

Palettes

Build matching tints shades and themes.

Dev handoff

Copy values straight into CSS or design tools.

FAQ

What does HSL mean?

HSL stands for hue saturation and lightness.

Why use HSL over hex?

HSL is easier to tweak by eye for tints and shades.

Is it free?

Yes. It is free with no sign-up and runs in your browser.

Related tools
Color Picker Image Color Picker HEX Color Picker RGB Color Picker Color Converter Free Color Tools