Base64 vs Hex Encoding: Differences, Use Cases, and When to Use Each

The Problem They Both Solve

Computers store everything as binary — sequences of bytes with values from 0 to 255. When you need to transmit or store binary data in a system that only handles printable text (an email body, a JSON field, a URL parameter, a cookie), you have to encode it first.

Base64 and hexadecimal are the two most common solutions. They solve the same problem but make different tradeoffs.

How Hex Encoding Works

Hexadecimal uses 16 characters: 0-9 and a-f. Each byte (0-255) maps to exactly two hex characters, because 256 equals 16 squared.

"Hi"  →  bytes: 72, 105  →  hex: 48 69  →  "4869"

Size overhead: every byte becomes 2 characters, so hex-encoded data is exactly 2x the size of the original.

The character set [0-9a-f] is safe in virtually every context — URLs, filenames, terminal output, database fields, log files.

How Base64 Encoding Works

Base64 uses 64 characters: A-Z, a-z, 0-9, plus + and / (with = for padding). Every 3 bytes of input map to 4 Base64 characters.

"Hi!"  →  bytes: 72, 105, 33  →  base64: "SGkh"

Size overhead: 3 bytes become 4 characters, so Base64 is roughly 33% larger than the original (compared to 100% overhead for hex). For large payloads like images or files, this difference is meaningful.

Side-by-Side Comparison

When to Use Hex

Checksums and hashes — SHA-256, MD5, and most hash functions output hex by convention. Running sha256sum gives you a 64-character hex string. The format is readable enough to compare the first 8 characters visually.

Color codes — CSS colors like #ff6600 are hex: R=ff (255), G=66 (102), B=00 (0).

Binary protocol debugging — When inspecting raw network packets or file headers, hex shows exact byte values. Tools like xxd, hexdump, and Wireshark all default to hex.

Database IDs and tokens — Many systems store UUIDs as 32-character hex strings. Hex is compact and URL-safe with no escaping required.

// Node.js: hash as hex
const hash = crypto.createHash('sha256').update(data).digest('hex');

// Node.js: random token as hex
const token = crypto.randomBytes(32).toString('hex'); // 64 chars

When to Use Base64

Embedding binary in text formats — JSON has no binary type. Storing an image, certificate, or file inside a JSON field requires Base64. The lower size overhead matters for large payloads.

Email attachments — MIME encoding for email attachments has used Base64 since the early 1990s.

JWTs (JSON Web Tokens) — JWT headers and payloads are Base64url-encoded. You can decode a JWT by splitting on . and Base64-decoding each part — no secret key needed to read the claims.

Data URIs — Embedding images directly in CSS or HTML uses Base64: data:image/png;base64,iVBOR...

TLS certificates — PEM format (the -----BEGIN CERTIFICATE----- format) is Base64-encoded DER data.

// Node.js: encode to Base64
const encoded = Buffer.from(binaryData).toString('base64');

// URL-safe Base64 for JWTs and URLs
const urlSafe = encoded.replace(/+/g, '-').replace(///g, '_').replace(/=/g, '');

URL Safety: A Practical Concern

Standard Base64 uses + and /, both of which have special meaning in URLs (+ means space; / is a path separator). If you need Base64 in a URL query parameter, either percent-encode it or switch to the Base64url variant (RFC 4648): replace + with -, / with _, and strip = padding.

Hex has no such issue — the characters 0-9a-f are URL-safe in every context.

Quick Decision Guide

• Representing a hash or checksum? → Hex
• Embedding a file or image in JSON, HTML, or email? → Base64
• Building a JWT or OAuth token? → Base64url
• Debugging binary data at the byte level? → Hex
• Storing random bytes as a token in a URL? → Hex (simpler) or Base64url (shorter)
• CSS color codes? → Hex (the universal standard)

→ Try the Base64 String Converter to encode and decode instantly, or the Hash Text Tool for hex-encoded hashes.