HEX to RGB: Understanding Color Code Conversions

What Are HEX Color Codes

HEX color codes represent colors using the hexadecimal numbering system—base 16 instead of the base 10 you use every day. Each code starts with a # followed by six characters: two for red, two for green, and two for blue.

Computers store color as three channels of light intensity. Hexadecimal is a convenient shorthand because each byte (0–255) maps neatly to exactly two hex digits (00–FF). That compactness is why HEX became the default color format on the web.

/* Same coral color */
.hero { color: #FF7F50; }

How the Hexadecimal System Works

The hex digits run from 0 to 9, then A to F. The value A equals 10 in decimal, F equals 15, and FF equals 255. This range maps perfectly to one byte—the same range each RGB channel uses.

To convert a two-digit hex pair to decimal, multiply the first digit by 16 and add the second:

Understanding this math makes every HEX-to-RGB conversion straightforward.

Three-Digit vs Six-Digit HEX

CSS supports a three-digit shorthand when both digits in each pair are identical. The browser expands #RGB to #RRGGBB by duplicating each digit.

Not every color has a shorthand. #FF7F50 (coral) cannot be shortened because each pair contains different digits (7F is not 77 or FF).

The RGB Color Model

RGB stands for Red, Green, Blue—the three primary colors of light. Screens mix these channels additively: more light means a brighter color. Each channel ranges from 0 (no light) to 255 (full intensity).

The RGB model gives you 256 × 256 × 256 = 16,777,216 possible colors. In CSS, you write RGB using the rgb() function:

.alert { color: rgb(255, 0, 0); }     /* Red */
.ocean { color: rgb(0, 119, 190); }   /* Deep blue */

Modern CSS also accepts space-separated syntax and percentages:

.alert { color: rgb(255 0 0); }
.ocean { color: rgb(0% 47% 75%); }

HEX to RGB: Step-by-Step Conversion

Converting HEX to RGB is pure arithmetic. Follow these steps for #FF7F50:

Step 1 — Split the HEX code into three pairs:

#FF 7F 50
 RR GG BB

Step 2 — Convert each pair from hexadecimal to decimal:

• FF → (15 × 16) + 15 = 255
• 7F → (7 × 16) + 15 = 127
• 50 → (5 × 16) + 0 = 80

Step 3 — Write the result as rgb():

#FF7F50 = rgb(255, 127, 80)

For the three-digit shorthand, expand first, then convert. #3A9 becomes #33AA99, then rgb(51, 170, 153).

RGB to HEX: The Reverse Conversion

Going from RGB to HEX is the same formula in reverse. For rgb(0, 119, 190):

1. Divide each value by 16 to get the first hex digit (quotient).
2. The remainder becomes the second hex digit.
3. Pad single-digit results with a leading zero.

Result: rgb(0, 119, 190) = #0077BE

Alpha Channels: HEX8 and RGBA

Transparency on the web requires an alpha channel. RGB gained alpha support early through rgba(). HEX followed later with the 8-digit format #RRGGBBAA.

Alpha values map like this:

/* Same semi-transparent blue */
.overlay-a { background: rgba(0, 119, 190, 0.5); }
.overlay-b { background: #0077BE80; }

Modern CSS lets you add alpha to rgb() directly—no separate rgba() needed:

.overlay-c { background: rgb(0 119 190 / 0.5); }
.overlay-c { background: rgb(0 119 190 / 50%); }

Browser support for #RRGGBBAA is good across modern browsers but absent in older Internet Explorer. Use rgba() or the modern rgb() / alpha syntax for maximum compatibility.

Choosing Between HEX and RGB in CSS

Both formats produce identical colors—the difference is readability and workflow.

Use HEX when:

• You need compact, copy-paste-friendly values
• Working in design tools that export HEX by default
• Writing legacy code that must support old browsers

Use RGB when:

• You need alpha transparency (rgba() or rgb() / alpha)
• Generating colors programmatically in JavaScript
• You want explicit channel clarity for team readability

// Programmatic color generation is easier with RGB
function lighten(r, g, b, amount) {
  return `rgb(${Math.min(r + amount, 255)}, ${Math.min(g + amount, 255)}, ${Math.min(b + amount, 255)})`;
}

For design systems and theming, consider HSL instead—it makes creating color scales far more intuitive. See our HEX, RGB, and HSL Color Formats Explained guide for a deeper comparison.

Key Takeaways

• HEX and RGB describe the same color data in different notations
• Each HEX pair maps to one decimal channel value (0–255)
• Three-digit HEX (#RGB) is shorthand—each digit is duplicated
• 8-digit HEX (#RRGGBBAA) adds alpha but has poorer legacy support than rgba()
• Choose HEX for compactness, RGB for transparency and programmatic use
• The conversion formula is simple: split HEX pairs, convert each from base-16 to base-10

Try It Yourself

Convert between HEX and RGB instantly with our free Color Converter tool. Paste any color code and get every format at once.

Related Guides

• Color Models Explained: HEX, RGB, HSL, and CMYK
• CSS Color Values: Named, HEX, RGB, HSL, and Modern Functions
• HEX, RGB, and HSL Color Formats Explained