HEX to RGB Color Code Conversion: Math Formulas, CSS RGBA & Contrast Guide

In web development, graphic design, and UI styling, color is represented primarily through two color models: Hexadecimal (HEX) and Red-Green-Blue (RGB). While HEX codes like #2563EB are compact and standard in CSS and HTML, RGB format allows for direct manipulation of red, green, blue color channels and alpha transparency (rgba(37, 99, 235, 0.85)).

Understanding the mathematical relationship between base-16 and base-10 numbers allows you to convert colors manually, debug CSS stylesheets, and build accessible user interfaces.

In this guide, we explore the exact conversion formulas, demonstrate alpha channel expansion, and explain WCAG contrast accessibility ratios.

🚀 Try the Live Utility: Convert color formats instantly with live swatches and WCAG contrast scoring using our free HEX ↔ RGB Converter.

1. How Hexadecimal Color Codes Work

A standard HEX color code consists of a hash symbol (#) followed by 6 characters:

$\text{#} \mathbf{RR} \mathbf{GG} \mathbf{BB}$

• RR: Red intensity, ranging from 00 (none) to FF (maximum).
• GG: Green intensity, ranging from 00 to FF.
• BB: Blue intensity, ranging from 00 to FF.

Hexadecimal is a base-16 numbering system using sixteen distinct symbols:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A (10), B (11), C (12), D (13), E (14), F (15).

Because each channel is allocated 2 hex digits, the maximum value is:

$\text{FF}_{16} = (15 \times 16^1) + (15 \times 16^0) = 240 + 15 = 255_{10}$

This matches the 8-bit color depth of standard optical displays, where each color channel can have 256 discrete levels (0 to 255). Combining 3 channels yields $256 \times 256 \times 256 = \mathbf{16,777,216 \text{ possible colors}}$.

2. Converting HEX to RGB: The Math Formula

To convert a 2-digit hex pair into an RGB integer from 0 to 255:

$\text{Value} = (\text{First Digit} \times 16) + \text{Second Digit}$

Practical Example: Converting #2563EB

• Red Pair (25):

$(2 \times 16) + 5 = 32 + 5 = \mathbf{37}$

• Green Pair (63):

$(6 \times 16) + 3 = 96 + 3 = \mathbf{99}$

• Blue Pair (EB):

$(14 \times 16) + 11 = 224 + 11 = \mathbf{235}$

Result: #2563EB converts to rgb(37, 99, 235).

3. Converting RGB to HEX: The Division Method

To convert an RGB channel value (0–255) back into hexadecimal:

1. Divide the number by 16 to find the whole integer (first digit).
2. Take the remainder to find the second digit.

Practical Example: Converting rgb(239, 68, 68)

• Red (239):

$239 \div 16 = 14$ remainder $15 \rightarrow \text{14 is E, 15 is F} \rightarrow \mathbf{EF}$

• Green (68):

$68 \div 16 = 4$ remainder $4 \rightarrow \mathbf{44}$

• Blue (68):

$68 \div 16 = 4$ remainder $4 \rightarrow \mathbf{44}$

Result: rgb(239, 68, 68) converts to #EF4444 (Tailwind Red 500).

4. Shorthand 3-Digit and 8-Digit Alpha Hex Codes

3-Digit Shorthand HEX:

When both digits of each channel are identical, CSS allows 3-digit shorthand:

• #F00 expands to #FF0000 (Pure Red)
• #0F0 expands to #00FF00 (Pure Green)
• #38B expands to #3388BB

8-Digit HEX with Alpha Transparency (#RRGGBBAA):

Modern browsers and CSS Color Module Level 4 support an optional fourth pair representing the alpha channel:

• #2563EB80: The 80 represents $128 / 255 \approx 50\%$ opacity.
• In CSS RGBA syntax: rgba(37, 99, 235, 0.5).

5. Web Accessibility: WCAG Contrast Ratios

When selecting colors for text and backgrounds, the Web Content Accessibility Guidelines (WCAG 2.1) specify minimum relative luminance contrast ratios:

• WCAG Level AA (Normal Text): Requires a contrast ratio of at least 4.5:1 against the background.
• WCAG Level AA (Large Text 18pt+ / Bold 14pt+): Requires at least 3.0:1.
• WCAG Level AAA (Enhanced Contrast): Requires at least 7.0:1 for body text.

Always test your foreground text color against its background to ensure readable, accessible digital experiences for users with low vision or color vision deficiencies.

Use our interactive HEX ↔ RGB Converter to test color codes, tweak sliders, and verify WCAG compliance instantly.