Color Code Converter
Enter a color code in HEX, RGB, or HSL format to instantly convert to other formats and preview the color.
How to Use
- Enter a color code in any HEX, RGB, or HSL field — the other formats update automatically.
- HEX supports both 3-digit (#RGB) and 6-digit (#RRGGBB) formats.
- Click the "Copy" button next to any color code to copy it to your clipboard.
- Click a color swatch under "Common Colors" to quickly select a preset color.
- The large color block above previews the currently selected color in real time.
Color Code Formats
| Format | Example | Description |
|---|---|---|
| HEX | #3B82F6 | Hexadecimal color code commonly used in CSS and design tools. A '#' followed by 6 digits (RRGGBB) or 3 digits (RGB). |
| RGB | rgb(59, 130, 246) | Red, Green, Blue channels with values from 0 to 255. Commonly used in CSS and programming. |
| HSL | hsl(217, 91%, 60%) | Hue (0–360°), Saturation (0–100%), Lightness (0–100%). A more intuitive way to describe colors. |
FAQ
What is a HEX color code?
A HEX color code represents colors using hexadecimal digits in the format #RRGGBB, where RR, GG, and BB are the red, green, and blue channel values (00–FF). For example, #FF0000 is pure red and #00FF00 is pure green. You can also use the 3-digit shorthand, e.g., #F00 is equivalent to #FF0000.
What is the difference between RGB and HEX?
RGB and HEX are both based on the red-green-blue color model and are essentially the same. The difference is that RGB uses decimal numbers (0–255) while HEX uses hexadecimal (00–FF). For example, rgb(255, 0, 0) and #FF0000 both represent pure red. Both formats can be used in CSS.
How is HSL different from RGB? When should I use HSL?
HSL describes colors using Hue, Saturation, and Lightness, which is more intuitive than RGB. To make a color lighter, just increase the L value; to make it more vivid, increase the S value. HSL is easier to work with when designing color palettes or creating gradients.
Are there rounding errors in the conversion?
Conversion between RGB and HEX is lossless. However, HSL conversion involves floating-point arithmetic and rounding, so there may be a 1–2 unit difference. This is visually imperceptible and does not affect practical use.
Can I enter transparency (Alpha)?
Currently, this tool only supports opaque color conversion (no Alpha channel). If you need transparency, you can manually add the Alpha value after conversion, e.g., change #FF0000 to #FF000080 (50% transparent) or rgb(255,0,0) to rgba(255,0,0,0.5).