HEX ↔ RGB Color Converter
Convert between HEX and RGB color formats instantly. Preview colors in real-time and copy CSS-ready values. All processing happens in your browser.
HEX Color
RGB Color
CSS Color Formats
#FF5733
rgb(255, 87, 51)
hsl(11, 100%, 60%)
How to Use
- Enter a HEX color code (3 or 6 digits) in the HEX input field, or enter individual R, G, B values (0-255) in the RGB fields.
- The color preview swatch updates in real-time as you type, showing the selected color.
- The opposite format is automatically calculated and displayed alongside HSL values.
- View all three CSS color formats (HEX, RGB, HSL) in the output section below the preview.
- Click any "Copy" button to copy the color value to your clipboard in the desired format.
Frequently Asked Questions
What is the difference between HEX and RGB?
HEX and RGB are two ways to represent the same color. HEX uses a six-character hexadecimal string (e.g., #FF5733), while RGB uses three decimal values from 0 to 255 for Red, Green, and Blue channels (e.g., rgb(255, 87, 51)). Both are widely used in CSS and web design.
Can I use 3-digit HEX codes?
Yes. This tool accepts both 3-digit shorthand (e.g., #F00) and full 6-digit HEX codes (e.g., #FF0000). Three-digit codes are automatically expanded to their 6-digit equivalent for conversion.
What is HSL and why is it shown?
HSL stands for Hue, Saturation, and Lightness. It is another CSS color format that describes colors in a more human-readable way. Hue is the color angle (0-360), Saturation is the intensity (0-100%), and Lightness is the brightness (0-100%). It is displayed as a bonus alongside HEX and RGB.
Is my data processed on a server?
No. All color conversions are performed entirely in your browser using JavaScript. No data is sent to any server, making this tool fast, private, and available offline.