Hex to RGB Color Conversion: Complete Guide

March 31, 2026 · 12 min read

If you've ever worked with web design, CSS, or graphic software, you've encountered hex color codes — those cryptic strings like #FF5733 or #3498DB. But what do they actually mean, and how do they relate to RGB values?

Understanding this conversion is fundamental to working with digital color, whether you're building a website, designing a logo, processing images programmatically, or choosing a paint shade on screen. The relationship between hexadecimal and RGB notation isn't just a technical curiosity — it's a practical skill that helps you work more efficiently with color across different platforms and tools.

This comprehensive guide covers everything you need to know about hex and RGB colors: how both systems work, the mathematical principles behind conversion, practical examples you can use immediately, a handy reference table of popular colors, CSS best practices, and the tools that make conversion effortless.

Understanding the RGB Color Model

The RGB color model is an additive color system used in screens, monitors, and digital displays. Every color you see on your screen is created by mixing three primary colors of light:

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

When all three channels are at 0, you get black (no light). When all three are at 255, you get white (full light). This gives us 256 × 256 × 256 = 16,777,216 possible colors — more than the human eye can distinguish.

The term "additive" means the colors add together — unlike paint (subtractive mixing), where combining colors makes things darker, light mixing makes things brighter. This is why your monitor can produce such vivid, luminous colors that would be impossible to achieve with physical pigments.

Why RGB Uses 0-255

The range 0-255 isn't arbitrary. It represents 8 bits of data (one byte), which can store 2⁸ = 256 different values. Since computers work in binary, this makes RGB values extremely efficient to store and process.

Each pixel on your screen uses 24 bits total (8 bits per channel), which is why you'll often hear the term "24-bit color" or "true color" when discussing display capabilities.

How Hex Color Codes Work

A hexadecimal color code is simply a compact way of writing an RGB value. Instead of three separate decimal numbers, hex combines them into a single six-character string preceded by a hash symbol (#).

The format looks like this: #RRGGBB

Each pair of characters represents one color channel in base-16 (hexadecimal) notation:

• First two characters (RR) = Red value
• Middle two characters (GG) = Green value
• Last two characters (BB) = Blue value

For example, #FF5733 breaks down as:

• FF = 255 red
• 57 = 87 green
• 33 = 51 blue

Hexadecimal Number System Basics

Hexadecimal (base-16) uses 16 digits instead of the 10 we use in everyday decimal counting. The digits are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Here's how hex digits map to decimal values:

Shorthand Hex Notation

When both digits in each color pair are identical, you can use a three-character shorthand. For example:

• #FFFFFF can be written as #FFF (white)
• #000000 can be written as #000 (black)
• #FF0000 can be written as #F00 (red)
• #3399CC can be written as #39C

Browsers automatically expand the shorthand by repeating each digit. So #39C becomes #3399CC.

The Conversion Math: Hex to RGB

Converting hex to RGB involves transforming each two-character hex pair into its decimal equivalent. The mathematical formula is straightforward:

Decimal Value = (First Digit × 16) + Second Digit

Let's break down #FF5733:

Red channel (FF):

• F = 15 in decimal
• F = 15 in decimal
• Calculation: (15 × 16) + 15 = 240 + 15 = 255

Green channel (57):

• 5 = 5 in decimal
• 7 = 7 in decimal
• Calculation: (5 × 16) + 7 = 80 + 7 = 87

Blue channel (33):

• 3 = 3 in decimal
• 3 = 3 in decimal
• Calculation: (3 × 16) + 3 = 48 + 3 = 51

Result: #FF5733 = rgb(255, 87, 51)

Why Multiply by 16?

In hexadecimal, each position represents a power of 16, just like each position in decimal represents a power of 10. The first digit (leftmost) is in the "sixteens place" (16¹), and the second digit is in the "ones place" (16⁰).

This is why we multiply the first digit by 16 and simply add the second digit.

Step-by-Step Manual Conversion

Here's a practical walkthrough for converting any hex color to RGB without a calculator:

1. Remove the hash symbol — Start with just the six characters
2. Split into three pairs — Separate RR, GG, and BB
3. Convert each character to decimal — Use the reference table above
4. Apply the formula — (First × 16) + Second for each pair
5. Write the RGB notation — Format as rgb(R, G, B)

Example 1: Converting #3498DB

Let's convert the popular blue shade #3498DB:

Step 1: Split into pairs: 34, 98, DB

Step 2: Convert red (34):

• 3 = 3, 4 = 4
• (3 × 16) + 4 = 48 + 4 = 52

Step 3: Convert green (98):

• 9 = 9, 8 = 8
• (9 × 16) + 8 = 144 + 8 = 152

Step 4: Convert blue (DB):

• D = 13, B = 11
• (13 × 16) + 11 = 208 + 11 = 219

Result: rgb(52, 152, 219)

Example 2: Converting #E74C3C

Another example with the color #E74C3C (a vibrant red):

Red (E7): (14 × 16) + 7 = 224 + 7 = 231

Green (4C): (4 × 16) + 12 = 64 + 12 = 76

Blue (3C): (3 × 16) + 12 = 48 + 12 = 60

Result: rgb(231, 76, 60)

Common Hex Color Codes Reference Table

Here's a comprehensive reference of popular colors with both hex and RGB values. These are commonly used in web design, branding, and UI development:

Modern UI Color Palette

These colors are popular in contemporary web design and design systems:

Using Hex and RGB Colors in CSS

Both hex and RGB notations work identically in CSS, but each has specific advantages depending on your use case.

Basic Syntax

/* Hex notation */
.element {
  color: #3498DB;
  background-color: #ECF0F1;
}

/* RGB notation */
.element {
  color: rgb(52, 152, 219);
  background-color: rgb(236, 240, 241);
}

When to Use Hex vs RGB

Use hex when:

• You want compact, readable code
• Working with design tools that export hex values
• You don't need transparency
• Copying colors from design specifications

Use RGB when:

• You need to add transparency (use rgba)
• Dynamically calculating colors with JavaScript
• Working with color manipulation libraries
• You find decimal values more intuitive

Adding Transparency with RGBA

One major advantage of RGB notation is the ability to add an alpha channel for transparency:

/* Semi-transparent overlay */
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

/* Subtle shadow */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.button:hover {
  background-color: rgba(16, 185, 129, 0.8); /* 80% opaque emerald */
}

The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). You can also use percentages in modern CSS: rgba(0, 0, 0, 50%).

CSS Custom Properties with Colors

Define your color palette once using CSS variables for maintainable, themeable designs:

:root {
  --primary: #10B981;
  --primary-rgb: 16, 185, 129;
  --secondary: #3B82F6;
  --danger: #F43F5E;
  --text: #1F2937;
  --background: #FFFFFF;
}

/* Use throughout your stylesheet */
.button-primary {
  background-color: var(--primary);
  color: white;
}

/* Combine with rgba for transparency */
.button-primary:hover {
  background-color: rgba(var(--primary-rgb), 0.9);
}

Hex to Decimal: The Foundation of Color Conversion

Understanding hexadecimal to decimal conversion is essential for working with colors programmatically. This skill extends beyond colors to many areas of computing.

The Positional Number System

Every number system uses positional notation. In decimal (base-10), each position represents a power of 10:

• The number 347 = (3 × 10²) + (4 × 10¹) + (7 × 10⁰) = 300 + 40 + 7

In hexadecimal (base-16), each position represents a power of 16:

• The hex number A3 = (10 × 16¹) + (3 × 16⁰) = 160 + 3 = 163 in decimal

Converting Multi-Digit Hex Numbers

For longer hex numbers, work from right to left, increasing the power of 16 for each position:

Example: Convert 2F4A to decimal

• A (rightmost) = 10 × 16⁰ = 10 × 1 = 10
• 4 = 4 × 16¹ = 4 × 16 = 64
• F = 15 × 16² = 15 × 256 = 3,840
• 2 (leftmost) = 2 × 16³ = 2 × 4,096 = 8,192
• Total: 8,192 + 3,840 + 64 + 10 = 12,106

For color conversion, you only need to handle two-digit hex numbers (00-FF), which keeps the math simple.

Quick Reference: Common Hex to Decimal Conversions

• 00 = 0 (minimum)
• 10 = 16
• 20 = 32
• 40 = 64
• 80 = 128 (middle)
• C0 = 192
• E0 = 224
• FF = 255 (maximum)

Tools for Hex to RGB Conversion

While understanding the math is valuable, practical work often requires fast, accurate conversion tools.

Online Conversion Tools

ConvKit offers a dedicated Hex to RGB Converter that provides instant conversion with additional features:

• Bidirectional conversion (hex to RGB and RGB to hex)
• Visual color preview
• Copy-to-clipboard functionality
• Support for shorthand hex notation
• Batch conversion for multiple colors
• Export to various formats (CSS, JSON, etc.)

Other useful color tools on ConvKit include:

• RGB to Hex Converter — Convert in the opposite direction
• Color Picker — Visual color selection with multiple format outputs
• Hex to HSL Converter — Convert to hue-saturation-lightness format

Browser Developer Tools

Modern browsers include built-in color conversion in their DevTools:

1. Open DevTools (F12 or right-click → Inspect)
2. Navigate to the Elements/Inspector tab
3. Click on any color swatch in the Styles panel
4. Use the color picker to view and copy different formats
5. Shift+click the color value to cycle between hex, RGB, and HSL

Design Software

Professional design tools handle color conversion automatically:

• Figma: Shows both hex and RGB in the color picker; copy either format
• Adobe XD: Displays multiple formats; click to copy
• Sketch: Color inspector shows hex, RGB, and HSL simultaneously
• Photoshop: Color picker includes all major formats

Converting Hex to RGB in Code

If you're building applications that work with colors, you'll need to convert hex to RGB programmatically. Here are implementations in popular languages.

JavaScript/TypeScript

function hexToRgb(hex) {
  // Remove hash if present
  hex = hex.replace(/^#/, '');
  
  // Handle shorthand notation (e.g., #FFF)
  if (hex.length === 3) {
    hex = hex.split('').map(char => char + char).join('');
  }
  
  // Parse hex pairs
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  
  return { r, g, b };
}

// Usage
const color = hexToRgb('#3498DB');
console.log(color); // { r: 52, g: 152, b: 219 }
console.log(`rgb(${color.r}, ${color.g}, ${color.b})`); // rgb(52, 152, 219)

Python

def hex_to_rgb(hex_color):
    """Convert hex color to RGB tuple"""
    # Remove hash if present
    hex_color = hex_color.lstrip('#')
    
    # Handle shorthand notation
    if len(hex_color) == 3:
        hex_color = ''.join([c*2 for c in hex_color])
    
    # Convert to RGB
    r = int(hex_color[0:2], 16)
    g = int(hex_color[2:4], 16)
    b = int(hex_color[4:6], 16)
    
    return (r, g, b)

# Usage
color = hex_to_rgb('#3498DB')
print(color)  # (52, 152, 219)
print(f'rgb({color[0]}, {color[1]}, {color[2]})')  # rgb(52, 152, 219)

PHP

function hexToRgb($hex) {
    // Remove hash if present
    $hex = ltrim($hex, '#');
    
    // Handle shorthand notation
    if (strlen($hex) == 3) {
        $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
    }
    
    // Convert to RGB
    $r = hexdec(substr($hex, 0, 2));
    $g = hexdec(substr($hex, 2, 2));
    $b = hexdec(substr($hex, 4, 2));
    
    return ['r' => $r, 'g' => $g, 'b' => $b];
}

// Usage
$color = hexToRgb('#3498DB');
echo "rgb({$color['r']}, {$color['g']}, {$color['b']})"; // rgb(52, 152, 219)

Java

public class ColorConverter {
    public static int[] hexToRgb(String hex) {
        // Remove hash if present
        hex = hex.replace("#", "");
        
        // Handle shorthand notation
        if (hex.length() == 3) {
            hex = String.valueOf(hex.charAt(0)) + hex.charAt(0) +
                  hex.charAt(1) + hex.charAt(1) +
                  hex.charAt(2) + hex.charAt(2);
        }
        
        // Convert