About this tool
Paste a colour code in HEX, RGB or HSL format — or pick a colour visually — and get the same colour in all three formats, ready to copy into CSS, design tools or brand guidelines. A live swatch shows exactly what the colour looks like.
How to use it
- Type or paste a colour such as #12B76A, rgb(18, 183, 106) or hsl(152, 82%, 39%), or use the colour picker.
- See the colour preview and its HEX, RGB and HSL values.
- Copy the format you need.
Good to know
- Accepts 3- and 6-digit HEX codes, with or without the # sign.
- RGB and HSL values may be separated by commas or spaces; any transparency (alpha) value is ignored.
- HSL values are rounded to whole numbers, as most tools display them.
Frequently asked questions
What's the difference between HEX and RGB?
They describe the same colour. HEX writes the red, green and blue amounts in base-16 (#12B76A), while RGB writes them as numbers from 0 to 255.
When should I use HSL?
HSL (hue, saturation, lightness) makes it easy to create lighter or darker shades of a colour by changing only the lightness value.