Color Converter (HEX, RGB, HSL)

Convert a colour between HEX, RGB and HSL, all at once.

Paste any colour — a hex code, an rgb() value, or an hsl() value — and get all three formats back together. It saves the mental math when a design hands you one format but your CSS, design tool, or brand guide needs another. HSL in particular makes it easy to see a colour’s hue, saturation and lightness so you can tweak shades by hand.

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

  1. Type or paste a colour as hex (#4f46e5), rgb(79, 70, 229), or hsl(243, 75%, 59%).
  2. The HEX, RGB and HSL equivalents appear together instantly.
  3. Copy whichever format you need.

Frequently asked questions

Which input formats are accepted?

Six-digit or three-digit hex (with or without #), rgb()/rgba(), and hsl()/hsla(). The tool detects which you entered.

Why does an HSL value convert back to a slightly different hex?

HSL uses whole-number percentages, so rounding can shift the result by one step. It is visually identical in almost all cases.

What is HSL good for?

HSL describes colour as hue, saturation and lightness, which makes it intuitive to create lighter or darker shades of the same colour.