Color Converter
Convert any color between HEX, RGB and HSL formats.
Loading tool…
Convert a color between the three formats you use most - HEX, RGB and HSL. Enter a value in any format or pick one visually, and see all three update live alongside a color swatch. It is handy for design and CSS work, and runs entirely in your browser.
Three ways of writing the same colour
HEX, RGB and HSL all describe identical colours in different notation. HEX is compact and dominates CSS and design tools. RGB states the red, green and blue channels directly, which is what you need when a value has to be calculated or animated. HSL describes hue, saturation and lightness, which maps far better onto how people actually think about colour, which is why it is the easiest one to adjust by hand.
HSL is the one worth learning
If you want a slightly darker version of a colour in HEX, you have to guess and check. In HSL you keep the hue and saturation and lower the lightness, and you get exactly what you expected. Building a palette works the same way: hold saturation and lightness steady and rotate the hue to get colours that belong together. This is why design systems are usually authored in HSL even when they ship as HEX.
Things that trip people up
- HEX shorthand like #fff is the same as #ffffff, with each digit doubled.
- An eight digit HEX carries alpha transparency in the last two digits.
- RGB channels run 0 to 255, while HSL uses degrees for hue and percentages for the rest.
- Converting between these three is exact and lossless, unlike converting to print colour spaces such as CMYK.
How to use Color Converter
- 1
Enter a color or pick one with the swatch.
- 2
See the HEX, RGB and HSL values.
- 3
Copy the format you need.
Frequently asked questions
HEX, RGB and HSL, all kept in sync as you edit any one of them.