Hex to RGB Color Conversion: Complete Guide

Published March 16, 2026 · 7 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, or choosing a paint shade on screen.

This comprehensive guide covers everything you need to know about hex and RGB colors: how both systems work, the math behind conversion, 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.

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.

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 (#).

The format is #RRGGBB, where:

• RR = the red channel in hexadecimal (00 to FF)
• GG = the green channel in hexadecimal (00 to FF)
• BB = the blue channel in hexadecimal (00 to FF)

Hexadecimal (base 16) uses digits 0–9 and letters A–F. So FF in hex = 255 in decimal, 00 = 0, and 80 = 128. Each two-digit hex pair maps to one RGB channel value.

Why Hexadecimal?

Hex is used because it's more compact than writing three separate numbers. Compare: #FF5733 versus rgb(255, 87, 51). The hex version is shorter, has no spaces or parentheses, and is easy to copy-paste. It became the default in HTML and CSS for this reason.

The Conversion Math: Hex to RGB

Converting hex to RGB is straightforward once you understand hexadecimal:

The formula for each hex pair is: Decimal = (first digit × 16) + second digit

Where hex digits map as: 0=0, 1=1, ... 9=9, A=10, B=11, C=12, D=13, E=14, F=15.

RGB to Hex (Reverse Conversion)

To go the other way, divide each RGB value by 16. The quotient is the first hex digit, the remainder is the second.

Example: RGB(52, 152, 219)

• 52 ÷ 16 = 3 remainder 4 → 34
• 152 ÷ 16 = 9 remainder 8 → 98
• 219 ÷ 16 = 13 remainder 11 → DB

Result: #3498DB

Skip the math entirely with our Hex to RGB Converter.

Common Hex Color Codes Reference Table

Using Hex and RGB Colors in CSS

CSS supports multiple color formats. Here's how to use them effectively:

Hex Notation

3-Digit Hex Shorthand

When both digits in each pair are the same, you can use shorthand:

RGB and RGBA Functions

8-Digit Hex (with Alpha)

Modern browsers support 8-digit hex codes where the last two digits specify opacity:

When to Use Hex vs RGB

• Use hex for simple, solid colors — it's shorter and widely recognized
• Use rgb()/rgba() when you need transparency or dynamic JavaScript values
• Use CSS named colors (like coral or dodgerblue) for prototyping — there are 147 named colors

Hex to Decimal: The Foundation of Color Conversion

At its core, hex-to-RGB conversion is just hex-to-decimal conversion applied three times. If you understand how to convert any hexadecimal number to decimal, you can decode any color code.

The hexadecimal system uses 16 symbols: 0–9 represent values zero through nine, and A–F represent ten through fifteen. Each position represents a power of 16, just as decimal positions represent powers of 10.

For a two-digit hex number: Value = (digit1 × 16) + digit2

This is the same math used in our Hex to Decimal Converter, which handles any hexadecimal number — not just color codes.

Tools for Hex to RGB Conversion

While manual conversion is educational, in practice you'll want a tool. Here's how popular options compare:

• ConvKit Hex to RGB — instant conversion with live preview, CSS output, and color picker. No installation needed. Try it free
• Browser DevTools — click any color in the Styles panel to toggle between hex, RGB, and HSL
• Figma/Sketch — built-in color pickers show both formats simultaneously
• VS Code — hover over any color in CSS to see a color picker with format conversion
• Command line — printf "%d %d %d\n" 0xFF 0x57 0x33 gives RGB values instantly

Beyond RGB: Other Color Models

While hex and RGB dominate web development, other color models exist for different purposes:

• HSL (Hue, Saturation, Lightness) — more intuitive for designers; CSS supports hsl()
• HSV/HSB — common in design tools like Photoshop
• CMYK — used in print design (subtractive color model)
• LAB/LCH — perceptually uniform; CSS Color Level 4 introduces lab() and lch()

Frequently Asked Questions

What is a hex color code?

A hex color code is a six-digit hexadecimal number preceded by a hash (#) that represents a color in the RGB color model. Each pair of digits represents the intensity of red, green, or blue, ranging from 00 (0) to FF (255). For example, #FF0000 is pure red.

How do I convert hex to RGB manually?

Split the six-digit hex code into three pairs (RR, GG, BB). Convert each pair from hexadecimal to decimal by multiplying the first digit by 16 and adding the second digit. For example, #FF5733 becomes R=255, G=87, B=51.

What is the difference between hex and RGB?

Both represent the same colors using the same underlying model. Hex uses a compact six-character hexadecimal string (#RRGGBB), while RGB uses three decimal numbers from 0–255. They are completely interchangeable and represent the same 16.7 million possible colors.

Can I use hex colors in CSS?

Yes. CSS supports both hex (#FF5733) and RGB (rgb(255, 87, 51)) notation. You can also use 3-digit shorthand (#F00 for #FF0000) and 8-digit hex with alpha (#FF573380 for 50% opacity).

What does hex to decimal conversion have to do with colors?

Hex to decimal conversion is the mathematical foundation behind converting hex color codes to RGB values. Each two-character hex pair is converted to a decimal number (0–255) to get the RGB equivalent. It's the same operation applied three times — once for red, green, and blue.