Color Converter
Convert between HEX, RGB, and HSL color codes. Color picker and CSS code output supported.
HEX
RGB
rgb(52, 152, 219)HSL
hsl(204, 70%, 53%)CSS Code
#3498dbrgb(52, 152, 219)hsl(204, 70%, 53%)How to Use
- 1Enter a color value — Type a color code in any supported format: HEX (e.g., #FF5733), RGB (e.g., 255, 87, 51), or HSL (e.g., 11, 100%, 60%).
- 2View all conversions — The tool instantly displays the color in all supported formats: HEX, RGB, HSL, along with a visual color preview.
- 3Use the color picker — Alternatively, use the visual color picker to select a color and get all its code representations.
- 4Copy the format you need — Click the copy button next to any format to copy it directly to your clipboard for use in your code.
Tips
- ✓Enter any HEX, RGB, or HSL value to automatically convert to other formats.
- ✓Select colors intuitively with the color picker.
- ✓Copy CSS code for immediate use.
Frequently Asked Questions
How do I convert a HEX color code to RGB?
Enter your HEX color code (e.g., #FF5733) into the input field. The tool instantly displays the equivalent RGB values (e.g., rgb(255, 87, 51)) along with HSL and other formats.
What is the difference between HEX, RGB, and HSL color formats?
HEX uses a 6-digit hexadecimal notation (#RRGGBB), RGB specifies red, green, and blue values from 0-255, and HSL defines hue (0-360), saturation (0-100%), and lightness (0-100%). All three represent the same colors in different notations.
Can I pick a color visually and get the code?
Yes. Use the color picker to select any color visually, and the tool displays its code in HEX, RGB, and HSL formats simultaneously.
How do I convert RGB to HEX for my CSS code?
Enter your RGB values (e.g., 255, 87, 51) and the tool instantly provides the HEX equivalent ready to copy into your CSS stylesheet.