Color Converter (HEX, RGB, HSL)

Convert a HEX color to RGB and HSL with a live swatch. Free, private and instant.

About the Color Converter (HEX, RGB, HSL)

The same color can be written as HEX, RGB or HSL. HSL is easiest for adjusting lightness and saturation, while HEX is the most common in design files.

When to use it

Use it to move colors between design tools and CSS, or to build lighter and darker shades by changing the HSL values.

HEX, RGB and HSL

HEX and RGB describe the same thing: amounts of red, green and blue. HSL describes hue from 0 to 360 degrees, saturation and lightness, which matches how people think about adjusting a color.

Making variations

Keep the hue and saturation and change the lightness to get tints and shades. A hover state might be a few percent lighter or darker than the base color.

Contrast

Text needs enough contrast against its background to be readable. A common accessibility guideline is a contrast ratio of at least 4.5 to 1 for normal-sized text.

Shorthand

A three-digit HEX like #fff repeats each digit, so #1af equals #11aaff. This converter accepts both forms.

How to use the Color Converter (HEX, RGB, HSL)

1. Enter or paste your input in the fields above.
2. The result updates as you type, or press Run.
3. Press Copy to copy the output.

Frequently asked questions

Is the Color Converter (HEX, RGB, HSL) free?

Yes. It is completely free, with no signup and no usage limits.

Is my data uploaded anywhere?

No. Everything runs locally in your browser, so what you type never leaves your device.

Does the Color Converter (HEX, RGB, HSL) work on mobile?

Yes. The tool is responsive and works on phones, tablets and desktops.

More free tools