HEX to RGB: The Complete Conversion Guide

Every color you see on a screen is ultimately three numbers: red, green, and blue. The question is only how those numbers are written. HEX notation packs them into a six-character string familiar to designers and developers alike. RGB notation unpacks them into three explicit values used in CSS functions, design tokens, and data pipelines.

This guide covers the complete picture — the math behind hexadecimal encoding, the RGB model, a step-by-step manual conversion, and the practical rules for choosing between HEX and RGB in real CSS and design workflows.

How hexadecimal encoding works

Hexadecimal is a base-16 numbering system using digits 0–9 and letters A–F, where A=10, B=11, C=12, D=13, E=14, F=15. A two-character hex pair can represent values from 00 (0 in decimal) to FF (255 in decimal). This is exactly the range needed for a single color channel. So a six-character HEX code like #3A7BD5 is three two-character pairs: 3A (red), 7B (green), D5 (blue). The # prefix is a CSS convention, not part of the numeric value. Shorthand codes like #FFF expand to #FFFFFF — each digit is doubled.

The RGB color model

RGB stands for Red, Green, Blue — the three primary channels of additive color mixing used by every digital display. Each channel ranges from 0 (none) to 255 (maximum). rgb(0, 0, 0) is pure black; rgb(255, 255, 255) is pure white. The model is additive: mixing full red and full green produces yellow (rgb(255, 255, 0)). This is opposite to the subtractive mixing used in paint or print (where mixing pigments produces darker results). CSS also accepts the modern space-separated syntax: color: rgb(58 123 213) without commas, which is equivalent to rgb(58, 123, 213).

Manual conversion step by step

To convert #3A7BD5 to RGB: split into pairs 3A, 7B, D5. Convert each pair from hex to decimal. For 3A: 3 × 16 + 10 = 58. For 7B: 7 × 16 + 11 = 123. For D5: 13 × 16 + 5 = 213. Result: rgb(58, 123, 213). For the reverse, divide each decimal value by 16, take the quotient as the first hex digit and the remainder as the second.

#3A7BD5

R = 3A → 3×16 + 10 = 58
G = 7B → 7×16 + 11 = 123
B = D5 → 13×16 + 5 = 213

Result: rgb(58, 123, 213)

HEX vs RGB in CSS: when to use each

HEX is compact and universally supported. Use it for static color values in CSS, design systems, and anywhere brevity matters. RGB is preferable when you need to manipulate the color in JavaScript or CSS calc(). The modern CSS color() and oklch() functions are increasingly common for gamut-wide color, but HEX and RGB remain dominant for everyday design work. CSS custom properties work equally well with both: --brand: #3A7BD5 or --brand: rgb(58 123 213).

Alpha channel: HEX8 vs rgba()

Transparency is added differently in each format. In HEX, append two more hex digits for alpha: #3A7BD5FF is fully opaque, #3A7BD580 is 50% transparent (128/255 ≈ 0.5). In CSS, rgba() has been the traditional approach: rgba(58, 123, 213, 0.5). Modern CSS allows rgb() to accept an optional alpha too: rgb(58 123 213 / 0.5). HEX8 is supported in all modern browsers but can be less readable. rgba() is more explicit and easier to adjust dynamically with CSS variables or JavaScript.

Practical use cases

Design tokens typically store colors in HEX for portability across tools (Figma, Storybook, Style Dictionary). CSS variables can hold either format. When passing colors to Canvas API or WebGL shaders, you need RGB values — the HEX string must be parsed first. JavaScript's parseInt("3A", 16) handles this. For CSS animations with color-mix() or @property transitions, the rgb() or hsl() format gives browsers more interpolation flexibility than opaque hex strings.

Frequently Asked Questions