HEX to RGB Color Converter
Convert between HEX, RGB, and HSL color formats. Pick a color or type values directly.
Color Converter
Common Colors Reference
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Green | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Blue | #0000FF | 0, 0, 255 | 240, 100%, 50% |
| Yellow | #FFFF00 | 255, 255, 0 | 60, 100%, 50% |
| Magenta | #FF00FF | 255, 0, 255 | 300, 100%, 50% |
| Cyan | #00FFFF | 0, 255, 255 | 180, 100%, 50% |
| Orange | #FFA500 | 255, 165, 0 | 39, 100%, 50% |
| Purple | #800080 | 128, 0, 128 | 300, 100%, 25% |
| White | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| Black | #000000 | 0, 0, 0 | 0, 0%, 0% |
How Do I Convert HEX Color Codes to RGB?
Enter a HEX color code like #2563EB or a CSS color name and the tool instantly shows the RGB values (red, green, blue channels from 0 to 255), HSL values (hue, saturation, lightness), and a live color preview. You can also enter RGB values to get the HEX code.
What Is the Difference Between HEX and RGB Color Formats?
HEX is a compact hexadecimal notation (#RRGGBB) commonly used in CSS and HTML. RGB specifies the same color as three decimal values from 0 to 255. They represent the same colors — HEX is just a different number base. HSL is a third format that describes colors by hue angle, saturation percentage, and lightness percentage.
When Do I Need to Convert Color Codes?
Designers switch between HEX, RGB, and HSL formats depending on the tool or context. CSS supports all three, but design tools like Figma may show one format while your codebase uses another. Brand guidelines often specify colors in HEX, while CSS animations and gradients are sometimes easier to work with in HSL.
Can I Pick a Color Visually?
You can enter any CSS color keyword (like coral, steelblue, or tomato) and the tool will show its HEX and RGB values. The live color swatch preview lets you visually verify the color before using it in your project.
What Are CSS Color Keywords and How Many Are There?
CSS defines 148 named color keywords, from common ones like red, blue, and green to specific shades like cornflowerblue, darkolivegreen, and papayawhip. These keywords map to specific HEX values (e.g., coral is #FF7F50). This tool accepts color keywords as input and shows their HEX, RGB, and HSL values so you can use the numeric format in your code.
What Is HSL and When Should I Use It Over HEX?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the wheel (0-360°), saturation is the color intensity (0-100%), and lightness is the brightness (0-100%). HSL is more intuitive for creating color variations — adjust lightness for tints and shades, saturation for vibrancy. It is especially useful in CSS for hover states and dynamic theming.