HEX to RGB - How Color Codes Work (With Examples)

Every color on a screen is a mix of red, green, and blue light. Designers and developers write that mix in two common notations: HEX (#3b82f6) and RGB (rgb(59, 130, 246)). They describe the same three channels - only the number system changes. This guide explains what a HEX color code is, what RGB means, how to convert HEX to RGB by hand (including why FF equals 255), worked examples, alpha/RGBA, and a quick table of common colors.

What is a HEX color code?

HEX (hexadecimal) color codes use base-16 digits: 0-9 and A-F, where A = 10, B = 11, C = 12, D = 13, E = 14, and F = 15. On the web they usually start with # and come in a few lengths:

• #RGB - shorthand: each digit is doubled (#F0A → #FF00AA)
• #RRGGBB - the standard six-digit form (two digits per channel)
• #RRGGBBAA - eight digits: RGB plus alpha (opacity)

Each pair of digits is one channel. The first two digits are red, the next two green, and the last two blue. Because two hex digits can represent 16 × 16 = 256 values, each channel ranges from 00 (0) to FF (255) - the same range CSS uses in rgb().

HEX is popular in design tools, brand guidelines, and CSS because it is compact and easy to copy. Case does not matter: #3b82f6 and #3B82F6 are the same color.

What is RGB?

RGB stands for red, green, and blue. In CSS you write it as rgb(r, g, b) or the modern space-separated form rgb(r g b), where each channel is an integer from 0 to 255 (or a percentage). Mixing channels at full strength makes white; all zeros make black; unequal mixes make every other color on an sRGB display.

• rgb(255, 0, 0) - pure red
• rgb(0, 255, 0) - pure green
• rgb(0, 0, 255) - pure blue
• rgb(255, 255, 255) - white
• rgb(0, 0, 0) - black

RGB is often easier to reason about when you tweak brightness or opacity in code. HEX is often easier to paste from a style guide. Converting between them is just changing how you write the same three numbers.

How to convert HEX to RGB by hand

Split the six hex digits into three pairs, then convert each pair from base-16 to decimal. The formula for a two-digit hex value XY is:

1. Strip the leading # if present.
2. If you have 3 digits (#RGB), expand each digit by doubling it (#F0A → #FF00AA).
3. Split into RR, GG, and BB.
4. Convert each pair with (high × 16) + low.
5. Write rgb(R, G, B).

Worked example: #FFFFFF

White is the easiest check. RR = FF, GG = FF, BB = FF. Each FF converts to 255, so #FFFFFF → rgb(255, 255, 255). Black is the opposite: #000000 → rgb(0, 0, 0).

Worked example: #1A2B3C

• Red 1A: (1 × 16) + 10 = 16 + 10 = 26
• Green 2B: (2 × 16) + 11 = 32 + 11 = 43
• Blue 3C: (3 × 16) + 12 = 48 + 12 = 60
• Result: #1A2B3C → rgb(26, 43, 60)

Going the other way (RGB to HEX) clamps each channel to 0-255, divides by 16 for the high nibble, takes the remainder for the low nibble, and maps 10-15 back to A-F. Pad single digits with a leading zero so every channel is two characters (#0A1B2C, not #A1B2C).

Alpha, RGBA, and eight-digit HEX

Opacity is a fourth channel called alpha. In CSS, rgba(r, g, b, a) uses a from 0 (fully transparent) to 1 (fully opaque), or you can use modern rgb(r g b / a) syntax. Eight-digit HEX encodes the same idea as #RRGGBBAA, where AA is 00 (transparent) through FF (opaque).

• #FF000080 → red at about 50% opacity (128/255 ≈ 0.5) → rgba(255, 0, 0, 0.5)
• #00000000 → fully transparent black (often used as "no fill")
• #3B82F6FF → same as #3B82F6 with explicit full opacity

Not every older browser or design export treated eight-digit HEX the same way, but modern CSS supports it. When you need translucent overlays, shadows, or glass effects, RGBA (or HEX with alpha) is the right tool - solid six-digit HEX cannot express transparency.

Common HEX and RGB color table

These everyday colors are useful to memorize for debugging CSS and matching brand tokens:

• #FFFFFF → rgb(255, 255, 255) - white
• #000000 → rgb(0, 0, 0) - black
• #FF0000 → rgb(255, 0, 0) - red
• #00FF00 → rgb(0, 255, 0) - lime green
• #0000FF → rgb(0, 0, 255) - blue
• #FFFF00 → rgb(255, 255, 0) - yellow
• #FFA500 → rgb(255, 165, 0) - orange
• #808080 → rgb(128, 128, 128) - gray
• #1A2B3C → rgb(26, 43, 60) - dark blue-gray (from the example above)
• #3B82F6 → rgb(59, 130, 246) - a common "sky" blue used in many UI kits

Frequently asked questions

Is HEX the same as RGB?

They encode the same red, green, and blue intensities for typical web colors. HEX writes those values in hexadecimal; RGB writes them in decimal. Converting HEX to RGB (or back) does not change the color - only the notation.

Why does FF equal 255?

F is 15 in hexadecimal. Two digits mean (15 × 16) + 15 = 255, which is the maximum 8-bit channel value. That is why #FF0000 is full red and #FFFFFF is white.

What does a 3-digit HEX color mean?

Shorthand #RGB expands by repeating each digit: #0F8 becomes #00FF88. It is a compact way to write colors where each channel's two digits are identical (#00, #FF, #88, and so on).

What is the difference between RGB and RGBA?

RGBA adds an alpha (opacity) channel. rgb(255, 0, 0) is solid red; rgba(255, 0, 0, 0.5) is the same red at 50% opacity. Eight-digit HEX (#RRGGBBAA) is the HEX equivalent of RGBA.

Should I use HEX or RGB in CSS?

Both are valid. Use HEX when you are copying from a design system or want a short token. Use RGB/RGBA when you need opacity, or when you build colors from variables and math. Many teams store a HEX brand color and derive rgb() channels for modern CSS opacity tricks (for example, rgb(var(--brand-rgb) / 0.2)).

How do I convert HEX to RGB quickly?

For one-off learning, use the (digit × 16) + digit method above. For daily work, paste the code into a HEX to RGB converter so you can copy rgb()/rgba(), preview a swatch, and avoid arithmetic mistakes.