Color Converter

About the Color Converter

Designers and developers use different color formats. Pick a color with this tool and see its HEX code, RGB values and HSL values side by side, ready to paste into CSS, Figma, Canva or any design software.

How to use the Color Converter

1. Click the color box to open your browser's color picker.
2. Choose a color.
3. Read the HEX, RGB and HSL values below the picker.

Good to know

• HEX writes the red, green and blue amounts in base 16, for example #0A84FF. RGB writes the same amounts from 0 to 255.
• HSL describes a color by hue (0 to 360 degrees), saturation and lightness, which is easier for making lighter or darker versions of one color.
• The picker gives colors from the screen palette, so for brand colors copy the exact HEX from your style guide.

Frequently asked questions

How do I convert HEX to RGB?

Split the code into three pairs, such as 0A, 84 and FF, and convert each pair from base 16 to a number between 0 and 255.

Which format should I use in CSS?

All three work in CSS. HEX is the most common, while HSL is handy when you want to adjust lightness.

Can I type a HEX code into the tool?

This version uses the picker only.