About this tool
A color code converter changes the same color between HEX, RGB and HSL notation so you can paste the right format into CSS, design tools or documents.
HEX is a six-digit base-16 code such as #38BDF8, RGB lists the red, green and blue amounts from 0 to 255, and HSL describes hue (0 to 360 degrees), saturation and lightness in percent.
For example, #38BDF8 equals rgb(56, 189, 248) and hsl(199, 93%, 60%). How do I convert HEX to RGB? Split the code into three pairs and read each pair as a base-16 number: 38 is 56, BD is 189 and F8 is 248.
What is HSL good for? It is easy to adjust by hand: raise lightness for a lighter shade or lower saturation for a calmer tone. Can I use a three-digit HEX code? Yes, #0AF is expanded to #00AAFF.
Type in any field and the other formats update right away, and the swatch shows the color. Use the copy buttons to take the HEX, rgb() or hsl() value. Values are rounded to whole numbers, so a round trip can differ by 1.
For picking colors from an image or building a palette, see the color palette picker tool. All conversion happens in your browser and no color data is sent anywhere.
How to use
- Type a HEX code, enter RGB or HSL numbers, or use the color picker.
- Watch the other formats and the preview swatch update.
- Press Copy next to the HEX, rgb() or hsl() value you need.