Color Converter
Enter a color in any format below — the other two update automatically, along with a live swatch.
HEX vs RGB vs HSL
HEX and RGB describe a color the same way — as red, green, and blue intensities — just written differently. HSL describes hue, saturation, and lightness instead, which is often more intuitive for adjusting a color: raising lightness makes it paler, raising saturation makes it more vivid.
About the Color Converter
Color Converter translates a colour between HEX, RGB and HSL and shows a live swatch so you can see the colour while you adjust it. Web designers and developers use it to move between the formats required by CSS, design tools and brand guidelines.
HEX is a six-digit hexadecimal code (such as #1F2428) that stores the red, green and blue amounts. RGB lists the same three values from 0 to 255. HSL describes a colour by hue (0 to 360 degrees), saturation and lightness, which is often easier for creating lighter or darker variants of one colour.
How to use it
- Type a colour in any one format.
- The other formats update automatically.
- Check the swatch against what you expect.
- Copy the format you need.
Tips and good to know
- To make a lighter shade, increase the L value in HSL.
- Short HEX codes such as #fff expand to #ffffff.
- Printing uses CMYK, which differs from screen colours.
Frequently asked questions
Why does my colour look different in print?
Screens emit light in RGB while printers mix inks.
Does it support transparency?
This tool handles opaque colours; add an alpha value manually in CSS.
Can I paste colours with a hash symbol?
Yes.