What Is a Hex Color Code?
A hex color code is a six-character (plus an optional two for alpha) representation of a color using the hexadecimal numbering system. It always starts with a # symbol followed by six characters from 0-9 and A-F.
The six characters are split into three pairs: RR for red, GG for green, and BB for blue. Each pair represents a value from 0 to 255 — exactly matching RGB channels.
For example, #FF0000 means full red (255), no green (0), and no blue (0) — pure red.
#FF0000 and #ff0000 are identical. Most designers use uppercase for readability.
The Hex to RGB Formula
Converting hex to RGB is straightforward once you know how base-16 works. Here's the step-by-step formula:
- Take the six-digit hex code and remove the
# - Split it into three pairs: first two = red, middle two = green, last two = blue
- For each pair, convert the hexadecimal value to a decimal number from 0-255
The hex-to-decimal conversion works like this: each position represents 16 raised to a power. The left character is the "16s place" (161) and the right character is the "1s place" (160).
For pair FF: F (15) × 16 + F (15) × 1 = 240 + 15 = 255
For pair 80: 8 × 16 + 0 × 1 = 128 + 0 = 128
Example 1: Convert #2563EB to RGB
Let's walk through a real example — the indigo blue used in many modern designs.
| Component | Hex Pair | Calculation | Decimal Value |
|---|---|---|---|
| Red | 25 | 2 × 16 + 5 = 37 | 37 |
| Green | 63 | 6 × 16 + 3 = 99 | 99 |
| Blue | EB | 14 × 16 + 11 = 235 | 235 |
Result: rgb(37, 99, 235) — which is Tailwind's blue-600.
Example 2: Convert #10B981 to RGB
An emerald green, common in success states and fintech designs.
| Component | Hex Pair | Calculation | Decimal Value |
|---|---|---|---|
| Red | 10 | 1 × 16 + 0 = 16 | 16 |
| Green | B9 | 11 × 16 + 9 = 185 | 185 |
| Blue | 81 | 8 × 16 + 1 = 129 | 129 |
Result: rgb(16, 185, 129) — the famous emerald-500.
What About 3-Digit Hex Codes?
You'll sometimes see shorthand hex codes like #F00 for red or #0AF for blue. These are valid in CSS and work by doubling each character.
#F00 → #FF0000 → rgb(255, 0, 0)
#0AF → #00AAFF → rgb(0, 170, 255)
Shorthand hex only works when both characters in each pair are identical. It's mainly used for saving bytes in CSS.
8-Digit Hex: Adding Transparency
Modern CSS supports 8-digit hex codes where the last two digits represent the alpha (transparency) channel. The same conversion applies:
#FF000080 → red: FF (255), green: 00 (0), blue: 00 (0), alpha: 80 (128/255 ≈ 50% opacity)
The alpha value 00 means fully transparent, and FF means fully opaque. This is equivalent to rgba(255, 0, 0, 0.5).
Fastest Way to Convert Hex to RGB
Doing the math by hand is fine for understanding, but in practice you'll want a faster method. Here are three options:
- Online converter tool: Use our Color Converter — paste your hex code and instantly get RGB, HSL, HSV, and CMYK values.
- Browser DevTools: In Chrome DevTools, click any color swatch in the Styles panel to toggle between hex, rgb, and hsl formats.
- Design software: Figma, Sketch, and Photoshop all show hex and RGB side by side in the color picker.
Common Mistakes to Avoid
- Confusing the pair order: Hex is always RR-GG-BB, never any other order.
- Forgetting case insensitivity:
#abcdefand#ABCDEFare the same color. - Adding spaces: Hex codes have no spaces.
#FF 00 00is invalid. - Using 4-digit hex for opacity:
#F008= 50% red, but only works if you know the shorthand rule.
Next Steps
Now that you understand hex to RGB conversion, you might want to explore other color models. Head over to our Color Converter to try converting between 7 different color formats instantly.