When should I use HSL instead of HEX?

Whenever you are building a palette. HSL separates hue, saturation and lightness, so a lighter variant of a colour is one number away — hsl(200 40% 60%) to hsl(200 40% 80%). Doing the same in HEX means recomputing three channels by hand.

What contrast ratio do I need?

WCAG AA asks for 4.5:1 for body text and 3:1 for large text — 18pt, or 14pt bold. AAA asks for 7:1. Failing these is one of the most common accessibility problems on the web, and one of the easiest to check before you ship.

What is the alpha channel for?

Opacity, from 0 (invisible) to 1 (solid). rgba() and hsla() add it as a fourth value, and an eight-digit HEX adds it as a final pair. It is how you tint a surface with a colour that still shows what is behind it.

Color Picker

Pick a colour and read it as HEX, RGB, HSL and HSLA at once, with contrast information for text use. Convert between formats by pasting any of them. Everything is computed in your browser — nothing about your palette is uploaded.

Runs in your browser — nothing is uploaded

Questions

When should I use HSL instead of HEX?: Whenever you are building a palette. HSL separates hue, saturation and lightness, so a lighter variant of a colour is one number away — hsl(200 40% 60%) to hsl(200 40% 80%). Doing the same in HEX means recomputing three channels by hand.
What contrast ratio do I need?: WCAG AA asks for 4.5:1 for body text and 3:1 for large text — 18pt, or 14pt bold. AAA asks for 7:1. Failing these is one of the most common accessibility problems on the web, and one of the easiest to check before you ship.
What is the alpha channel for?: Opacity, from 0 (invisible) to 1 (solid). rgba() and hsla() add it as a fourth value, and an eight-digit HEX adds it as a final pair. It is how you tint a surface with a colour that still shows what is behind it.

Color Picker

Questions

What people use next