Base64 vs Hex Encoding: Key Differences

Table of Contents

• What is Hex Encoding?
• Size Comparison
• Use Cases for Hex
• Use Cases for Base64
• Code Examples

What is Hex Encoding?

Hex (hexadecimal) represents each byte as two hex digits (0–9, a–f). One byte = two characters.

Binary:  01001000 01100101 01101100
Hex:     48       65       6c
Result:  "48656c" ("Hel")

Size Comparison

Base64 is ~33% larger than binary; Hex is 100% larger. Base64 is more space-efficient.

Use Cases for Hex

• Cryptographic hashes: SHA-256 is typically displayed as hex
• Color codes in CSS: #ff5733
• Memory addresses: 0x7fff5fbff...
• Byte-level debugging: network packets, binary files

Use Cases for Base64

• Data URIs: Embedding images in HTML/CSS
• JWT tokens: Uses Base64URL for header + payload
• Email attachments: MIME encoding
• API payloads: Sending binary data in JSON

Code Examples

// Hex encoding (Node.js)
const hex = Buffer.from('Hello').toString('hex'); // '48656c6c6f'
const back = Buffer.from(hex, 'hex').toString(); // 'Hello'

// SHA-256 hash as hex (Web Crypto)
const data = new TextEncoder().encode('hello');
const hash = await crypto.subtle.digest('SHA-256', data);
const hashHex = Array.from(new Uint8Array(hash), b => b.toString(16).padStart(2, '0')).join('');

Rule of thumb: Use hex for debugging and human-readable crypto outputs; use Base64 for transmitting binary data in text protocols.