HEX to RGB Conversion: Complete Guide to Color Codes

Whether you're building a website, designing a logo, or debugging CSS styles, understanding how to convert between HEX and RGB color formats is an essential skill for web developers and designers. These two color systems are the backbone of digital color representation, and knowing how they relate makes your workflow faster and more precise.

In this guide, you'll learn exactly what HEX and RGB are, how to convert between them by hand, and when to use each format. You can also use our Color Converter to instantly switch between formats.

What Is HEX?

HEX stands for hexadecimal — a base-16 number system used to represent colors in web development. A HEX color code is a six-digit code preceded by a hash symbol (#), where each pair of digits represents the intensity of red, green, and blue.

#RRGGBB

• RR — Red component (00 to FF in hex, 0 to 255 in decimal)
• GG — Green component (00 to FF in hex, 0 to 255 in decimal)
• BB — Blue component (00 to FF in hex, 0 to 255 in decimal)

For example, #ff5733 means red = FF (255), green = 57 (87), blue = 33 (51).

HEX supports a shorthand when both digits in each pair are identical: #f00 is equivalent to #ff0000 (pure red).

What Is RGB?

RGB stands for Red, Green, Blue — the additive color model used by screens and digital displays. Each color is defined by three values ranging from 0 to 255:

rgb(R, G, B)

• R — Red intensity (0–255)
• G — Green intensity (0–255)
• B — Blue intensity (0–255)

For example, rgb(255, 87, 51) produces the same warm orange as #ff5733.

RGB is intuitive because it directly maps to how screens produce color: by combining red, green, and blue light at varying intensities.

HEX vs RGB: A Comparison

Feature	HEX	RGB
Format	#RRGGBB	rgb(R, G, B)
Number system	Base-16 (hexadecimal)	Base-10 (decimal)
Value range	00–FF per channel	0–255 per channel
Shorthand	Yes (#f00 = #ff0000)	No
CSS usage	color: #ff5733;	color: rgb(255, 87, 51);
Alpha support	#RRGGBBAA (8-digit)	rgba(R, G, B, A)
Readability	Compact, common in design tools	Easier to understand at a glance

Both formats produce identical colors — the difference is purely in how the values are written.

How to Convert HEX to RGB: Step by Step

Converting a hex color code to RGB involves three simple steps:

1. Split the HEX code into three two-digit pairs (after removing the #).
2. Convert each pair from hexadecimal to decimal.
3. Combine the three decimal values into rgb(R, G, B).

Example: Convert #3498db to RGB

1. Split: 34, 98, db
2. Convert each pair:
   • 34 → (3 × 16) + 4 = 52
   • 98 → (9 × 16) + 8 = 152
   • db → (13 × 16) + 11 = 219
3. Result: rgb(52, 152, 219) — a bright blue.

The Conversion Formula

The mathematical formula for converting a two-digit hex pair to decimal is:

decimal = (first_digit × 16) + second_digit

Hexadecimal digits use 0–9 and A–F, where:

• A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Worked Examples

Example 1: #ff0000 (Red)

• FF → (15 × 16) + 15 = 255
• 00 → 0
• 00 → 0
• Result: rgb(255, 0, 0)

Example 2: #00ff00 (Green)

• 00 → 0
• FF → 255
• 00 → 0
• Result: rgb(0, 255, 0)

Example 3: #1a2b3c (Dark teal)

• 1A → (1 × 16) + 10 = 26
• 2B → (2 × 16) + 11 = 43
• 3C → (3 × 16) + 12 = 60
• Result: rgb(26, 43, 60)

Example 4: #abcdef (Light blue-gray)

• AB → (10 × 16) + 11 = 171
• CD → (12 × 16) + 13 = 205
• EF → (14 × 16) + 15 = 239
• Result: rgb(171, 205, 239)

RGB to HEX: The Reverse Conversion

To convert RGB back to HEX, you reverse the process:

1. Convert each decimal value (0–255) to its two-digit hex equivalent.
2. Concatenate the three hex pairs with a # prefix.

Formula

hex_pair = decimal_to_hex(value)

Divide the decimal number by 16. The quotient is the first hex digit, and the remainder is the second.

Example: Convert rgb(52, 152, 219) to HEX

• 52 ÷ 16 = 3 remainder 4 → 34
• 152 ÷ 16 = 9 remainder 8 → 98
• 219 ÷ 16 = 13 remainder 11 → db
• Result: #3498db

Common Color Values

Here's a reference table of popular colors in both formats:

Color	HEX	RGB
Red	#ff0000	rgb(255, 0, 0)
Green	#00ff00	rgb(0, 255, 0)
Blue	#0000ff	rgb(0, 0, 255)
White	#ffffff	rgb(255, 255, 255)
Black	#000000	rgb(0, 0, 0)
Yellow	#ffff00	rgb(255, 255, 0)
Cyan	#00ffff	rgb(0, 255, 255)
Magenta	#ff00ff	rgb(255, 0, 255)
Orange	#ff8c00	rgb(255, 140, 0)
Purple	#800080	rgb(128, 0, 128)
Gray	#808080	rgb(128, 128, 128)
Coral	#ff7f50	rgb(255, 127, 80)

Web Development Use Cases

CSS Styling

Both formats work directly in CSS:

/* HEX format */
.header { background-color: #3498db; }

/* RGB format */
.header { background-color: rgb(52, 152, 219); }

/* With transparency */
.overlay { background-color: rgba(52, 152, 219, 0.5); }
.overlay { background-color: #3498db80; }

HTML Inline Styles

<div style="color: #e74c3c;">Error message</div>
<div style="color: rgb(231, 76, 60);">Error message</div>

JavaScript Dynamic Colors

// Generate a random color
const randomHex = '#' + Math.floor(Math.random()*16777215).toString(16);

// Convert HEX to RGB in JavaScript
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

Design Tools

Tools like Figma, Adobe Photoshop, and Canva typically display colors in HEX by default but allow switching to RGB. When copying color values from these tools, you may need to convert between formats for your codebase.

For quick conversions, the Color Converter handles HEX, RGB, and HSL formats instantly. If you need to convert between other number systems, the Number Base Converter is also useful.

Try Our Free Color Converter

Need to convert colors quickly? Our Color Converter supports HEX, RGB, and HSL with a live color preview. Just paste your color value and get all formats instantly — no sign-up required.

You can also explore our Unit Converter for other everyday conversions.

Conclusion

HEX and RGB are two sides of the same coin — both describe the exact same colors using different number systems. HEX uses base-16 for a compact notation, while RGB uses familiar decimal values. Understanding the conversion between them helps you work more efficiently in CSS, JavaScript, and design tools.

For deeper background on how colors are modeled digitally, check out our guide on What Is Color Space?.

FAQ

Is HEX to RGB conversion lossy?

No. HEX and RGB represent the exact same values in different number systems. Converting between them is perfectly reversible with zero data loss.

Can HEX represent more colors than RGB?

No. Both formats can represent exactly 16,777,216 colors (256 × 256 × 256). They cover the same color space — just written differently.

Why do web developers prefer HEX?

HEX is more compact (#f00 vs rgb(255, 0, 0)) and has been the traditional format in HTML and CSS. Many designers also find it easier to copy from design tools.

How do I convert a 3-digit HEX to RGB?

Expand each digit by doubling it: #f00 becomes #ff0000, then convert normally. So #f00 → rgb(255, 0, 0).

Does RGB support transparency?

Yes — use rgba(R, G, B, A) where A is the alpha channel from 0 (fully transparent) to 1 (fully opaque). HEX supports transparency too with 8-digit codes: #RRGGBBAA.

What is the HEX code for white?

White is #ffffff in HEX, which equals rgb(255, 255, 255) — all channels at maximum intensity.

Can I use HEX in CSS custom properties?

Yes. HEX values work in CSS variables just like any other value:

:root { --primary: #3498db; }

What's the difference between HEX and HSL?

HEX and RGB define colors by channel intensity, while HSL (Hue, Saturation, Lightness) defines colors by their visual properties. HSL is often more intuitive for adjusting colors — for example, making something lighter or more saturated. Use our Color Converter to switch between all three formats.