Color Code Converter — HEX, RGB and HSL in one place, with a live swatch
Enter a color as HEX (#FF5733), RGB or HSL and get the other two formats with a preview swatch. For CSS, design mock-ups and matching brand colors across tools.
Switch between HEX and RGB when writing CSS or matching a design.
Loading...
Color Converter: tips and things to know
- Web-safe colors use only 00, 33, 66, 99, CC and FF in each HEX pair, 216 colors in all.
- The fourth value in rgba() is opacity from 0 to 1.
- For readable text, aim for a contrast ratio of at least 4.5:1 between text and background.
How to use the Color Converter
Choose the input format
Pick HEX, RGB or HSL.
Enter the color
Type the value, for example #FF5733.
Read the result
The other two formats and a color swatch appear.
Color Converter FAQ
What are HEX, RGB and HSL?
Three ways of writing the same color: HEX is hexadecimal (#FF0000), RGB is red, green and blue values (rgb(255, 0, 0)), and HSL is hue, saturation and lightness (hsl(0, 100%, 50%)).
When would I use this?
Web design, CSS, app development and anywhere a color must be entered in a particular format.
Does it accept 3-digit HEX codes?
Yes. Shorthand such as #F00 is expanded to #FF0000 automatically.