Convert colors, HEX ⇄ RGB ⇄ HSL

Paste any CSS color, get every format.

Files stay on your device. No accounts. Free.

Loading tool...

About this tool

Paste a color in any common CSS form, #2563EB, rgb(37, 99, 235), hsl(221, 83%, 53%), and get all the others instantly, with a live swatch so you can see what you're working with. Shorthand hex and alpha channels are understood.

Handy when a design tool hands you HSL but your stylesheet wants hex, or you need rgb() components for an rgba() overlay. Runs entirely client-side.

How it works

  1. Paste your input, or drop a text file onto the box.
  2. The output updates live as you type.
  3. Copy it to the clipboard, or download it as a file.

Frequently asked questions

What color formats can I paste in?

Anything CSS understands: six or three digit hex, rgb() and rgba(), hsl() and hsla(), and named colors like rebeccapurple. The other formats are derived from whatever you paste.

Does it handle transparency?

Yes. Colors with an alpha channel come out as eight-digit hex, rgba() and hsla(), with the alpha preserved across all three.

When would I need HSL instead of hex?

HSL separates hue from lightness, which makes it the practical format for building shade variations of a brand color, lighten by raising L, keep H and S fixed. Hex is compact for storage; they describe the same color.

Related tools

Missing something? Suggest a feature →