Number Base Conversion Explained: Binary, Octal, Hex, and Decimal

You're reading a hex color code in CSS. Or a file permission in Unix. Or an IP address in a network config. Or a bitmask in a C library. In every case, you're looking at a number expressed in a base other than the decimal system you grew up with — and the only thing making it confusing is that nobody ever explained how bases actually work.

This guide covers the four number bases developers encounter regularly: binary (base 2), octal (base 8), decimal (base 10), and hexadecimal (base 16). It explains how each works, why it's used, and how to convert between them in JavaScript or with the free Number Base Converter on DevToolShack.

What a Number Base Actually Means

A number base (or radix) defines how many distinct digits exist in a counting system, and what the value of each position represents. In decimal (base 10), there are ten digits (0–9), and each position is a power of 10. The number 347 means (3 × 10²) + (4 × 10¹) + (7 × 10⁰), or 300 + 40 + 7.

The same principle applies in every base. The only things that change are the number of available digits and the power used at each position.

Binary (Base 2)

Binary has only two digits: 0 and 1. Each position is a power of 2. This maps directly to the physical reality of digital hardware, where every transistor is either off (0) or on (1). All data in a computer is ultimately binary at the hardware level.

Binary:  1 0 1 1 0 1
Powers:  2⁵ 2⁴ 2³ 2² 2¹ 2⁰
Values:  32  16   8   4   2   1

1×32 + 0×16 + 1×8 + 1×4 + 0×2 + 1×1 = 45 (decimal)

In JavaScript, you can write binary literals with the 0b prefix:

const flags = 0b101101; // 45 in decimal
console.log(flags);     // 45

// Convert decimal to binary string
(45).toString(2);  // "101101"

// Parse binary string to decimal
parseInt('101101', 2); // 45

Binary shows up most visibly in bitmasks and bitwise operations. When you see code like permissions & 0b100, the developer is checking whether a specific bit is set. File permissions in Unix (chmod 755) are actually octal representations of binary permission bits — more on that below.

Octal (Base 8)

Octal uses digits 0–7. Each position is a power of 8. It's rarely used in modern application code, but it survives in two specific contexts: Unix file permissions and some legacy networking and embedded systems.

Octal: 755
= 7×8² + 5×8¹ + 5×8⁰
= 7×64 + 5×8  + 5×1
= 448  + 40   + 5
= 493 (decimal)

In Unix permissions, chmod 755 sets owner to rwx (7 = 4+2+1), group to r-x (5 = 4+0+1), and others to r-x. Each digit in octal maps to exactly three binary bits, which is why octal and binary pair naturally for permission notation.

In JavaScript, octal literals use the 0o prefix:

const perms = 0o755;   // 493 in decimal
(493).toString(8);     // "755"
parseInt('755', 8);    // 493

Hexadecimal (Base 16)

Hexadecimal uses sixteen digits: 0–9 for the first ten values, then A–F (or a–f) for 10–15. Each position is a power of 16. One hex digit represents exactly four binary bits (a "nibble"), and two hex digits represent one byte — which is why hex is the standard notation for bytes, memory addresses, color values, and hash outputs.

Hex: 2F
= 2×16¹ + F×16⁰
= 2×16  + 15×1
= 32    + 15
= 47 (decimal)

In JavaScript, hex literals use the 0x prefix:

const color  = 0xFF5733;      // a hex color as a number
const addr   = 0x1A4F;        // a memory address

(255).toString(16);           // "ff"
(255).toString(16).toUpperCase(); // "FF"
parseInt('FF', 16);           // 255

Hex in CSS Colors

CSS hex colors are three pairs of hex digits, each representing red, green, and blue intensity from 00 (0) to FF (255). #FF5733 means red=255, green=87, blue=51. The shorthand form #RGB (like #F53) expands each digit by doubling it: #FF5533. Eight-digit hex colors (#RRGGBBAA) add an alpha channel. The Color Picker on DevToolShack converts between hex, RGB, HSL, and HSV instantly.

Hex in Hashes and Encodings

When you generate an MD5 or SHA hash, the output is a hex string. Each character represents four bits of the hash output. A SHA-256 hash produces 256 bits of output, which is 64 hex characters (256 ÷ 4 = 64). This connection between bit length and hex digit count is useful when validating hash outputs — if your SHA-256 result isn't exactly 64 characters, something went wrong. For a comparison of hash algorithms and their outputs, see MD5 vs SHA-256: Which Hash Should You Use and Why.

Quick Conversion Reference

Converting Between Bases in JavaScript

JavaScript's Number.prototype.toString(radix) converts a decimal number to any base as a string. parseInt(string, radix) parses a string in any base back to a decimal integer. Between them, you can convert any number to any base:

// Decimal → any base
(255).toString(2);   // "11111111" (binary)
(255).toString(8);   // "377"      (octal)
(255).toString(16);  // "ff"       (hex)

// Any base → decimal
parseInt('11111111', 2);  // 255
parseInt('377', 8);       // 255
parseInt('ff', 16);       // 255

// Base to base (via decimal as intermediate)
const hexTobin = n => parseInt(n, 16).toString(2);
hexTobin('ff');  // "11111111"

When to Use the Number Base Converter Tool

Writing one-off conversion code for a quick lookup isn't worth it. The Number Base Converter on DevToolShack converts between binary, octal, decimal, and hex simultaneously — type in any base and all four update instantly. It's useful when debugging bitwise operations, decoding a memory address, verifying a permission string, or reverse-engineering a hex color or hash value.