Color Converter – HEX, RGB, HSL

HEX

RGB

HSL

#2563EB

Convert colors between HEX, RGB, and HSL

Type a value into any field — a HEX code, an rgb() value, or an hsl() value — and the other two update instantly, along with a live preview swatch so you can see the actual color, not just its numbers.

When each format is the better choice

HEX (#2563EB) — the most compact, most common format in design files and CSS. Easy to copy-paste, less easy to reason about what the color actually looks like from the code alone.
RGB (rgb(37, 99, 235)) — useful when you need to blend with an alpha channel (rgba()) or when working with color values from a design tool that reports in RGB.
HSL (hsl(221, 83%, 53%)) — the most intuitive for adjusting a color by hand: hue controls which color, saturation controls intensity, and lightness controls how light or dark it is. Want a darker version of a brand color? Just lower the lightness value and keep hue and saturation the same.

Frequently Asked Questions

HSL separates a color into hue (which color), saturation (intensity), and lightness (how light or dark), which makes it much easier to create consistent color variations by hand — like a lighter or darker shade of the same brand color — without guessing new HEX values.

Yes — shorthand 3-character HEX codes are automatically expanded (#fff becomes equivalent to #ffffff) before conversion.

Not currently — this tool focuses on solid HEX, RGB, and HSL conversion. For transparency, add an alpha value manually to the RGB or HSL output (rgba() or hsla()).

No, all conversion and the preview swatch are generated entirely in your browser.