Skip to content

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB and HSL with a live preview and color picker.

Share:

Color

Values

HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
CSS vars
--color: 79 70 229;

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

The Color Converter turns a color between HEX, RGB and HSL formats and shows a live swatch. Type a hex value or use the color picker, and the matching rgb() and hsl() strings (plus a CSS-variable form) update instantly. It accepts both 3- and 6-digit hex. Everything runs in your browser.

How It Works

Pick a color with the swatch or type a hex code like #4f46e5 or #fff. The RGB, HSL and CSS-variable values update live — click Copy on any of them.

When to Use It

Use it while building websites and design systems, matching brand colors, or converting a value a designer gave you into the format your code needs.

Frequently Asked Questions

What formats are supported?
HEX (3 or 6 digit), RGB and HSL output, plus a space-separated CSS-variable form handy for Tailwind and modern CSS.
Does it support alpha/transparency?
Not yet — it focuses on solid colors. Paste the opaque color and apply opacity separately in your CSS.

Last reviewed: 2026-06-27