Do 3-digit HEX codes work?

Yes. Shorthand like #FA0 is expanded to #FFAA00 automatically.

When should I use HSL?

HSL makes it easy to build a palette — keep the hue and change lightness or saturation to get consistent tints and shades.

Is transparency supported?

This tool converts the solid color channels. For transparency, add the alpha value in your CSS (for example rgba() or an 8-digit HEX).

Color Converter

HEX, RGB and HSL conversion

Color

HEX (#3b82f6, #f00), RGB (rgb(59,130,246)) or HSL (hsl(217,91%,60%)) — any format works.

#3b82f6

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Contrast ratio when used as text (WCAG)

Sample Ag

On white · 3.68 · AA (large text)

Sample Ag

On black · 5.71 · AA

AA needs 4.5:1 and AAA needs 7:1 for normal-size text.

Converting to whole-number HSL can introduce a tiny rounding difference. Everything runs in your browser.

Convert colors between HEX, RGB and HSL with a live preview. Paste any format and copy the others with one click — a free color converter for designers and developers.

How to use

Enter a color in any format — HEX (#3E2F23), RGB or HSL.
The other formats are calculated instantly and shown with a live swatch.
Copy whichever format you need with one click.

FAQ

Q. Do 3-digit HEX codes work?: A. Yes. Shorthand like #FA0 is expanded to #FFAA00 automatically.
Q. When should I use HSL?: A. HSL makes it easy to build a palette — keep the hue and change lightness or saturation to get consistent tints and shades.
Q. Is transparency supported?: A. This tool converts the solid color channels. For transparency, add the alpha value in your CSS (for example rgba() or an 8-digit HEX).

Spotted something wrong? Let us know.