Binary, Octal, Hex, Decimal: A Practical Guide to Number Base Conversion

Where number bases sneak into everyday code

You do not need to be writing a compiler to run into number bases. A CSS color like #ff8800 is three hexadecimal bytes. Unix file permissions such as chmod 755 are octal. A feature-flag bitmask, a subnet mask, or a byte pulled off the wire are all easiest to reason about in binary. Convert any of these by hand and it is disappointingly easy to drop a digit or misplace a nibble.

A base converter takes one number and shows you the same value in binary (base 2), octal (base 8), decimal (base 10), and hexadecimal (base 16) at once, so you can move between the representation a human reads and the one a machine expects.

How positional bases actually work

Every base uses the same trick: each digit position is a power of the base. In decimal, 255 means 2x10^2 + 5x10^1 + 5x10^0. The exact same value in base 16 is FF, because 15x16^1 + 15x16^0 = 255, and in base 2 it is 11111111, eight ones. Bases higher than ten borrow letters: hex uses A through F for the values ten through fifteen.

Programming languages expose this directly. In JavaScript, parseInt reads a string in a given base and Number.prototype.toString writes one:

parseInt('FF', 16);      // 255  (hex string -> decimal)
parseInt('377', 8);      // 255  (octal string -> decimal)
parseInt('11111111', 2); // 255  (binary string -> decimal)

(255).toString(2);       // '11111111'
(255).toString(8);       // '377'
(255).toString(16);      // 'ff'

Number('0xff');          // 255  (prefixed literal)

A practical walkthrough

Suppose a designer hands you the color #3498db and you need the RGB channel values. Split it into three bytes and convert each from hex to decimal:

parseInt('34', 16); // 52   -> red
parseInt('98', 16); // 152  -> green
parseInt('db', 16); // 219  -> blue
// rgb(52, 152, 219)

Going the other way, if you know a permission should be read/write for the owner and read-only for everyone else, you can build the octal value from binary triples: rw- r-- r-- is 110 100 100, which is 644 in octal. Paste any of these values into the Number Base Converter and every base updates instantly, all locally in the browser.

Common pitfalls

• Silent octal from a leading zero. In many languages (and older JavaScript), a literal like 0755 is interpreted as octal, not decimal. Modern JS treats parseInt('0755') as base 10, but the safest habit is to always pass the radix explicitly or use the 0o prefix.
• Signed vs unsigned. The same bit pattern can mean two different numbers depending on whether the high bit is a sign. 0xFF is 255 as an unsigned byte but -1 as a signed 8-bit integer.
• JavaScript bitwise operators are 32-bit and signed. Expressions like x & y or x << 1 coerce operands to signed 32-bit integers, so very large values overflow in surprising ways. Use BigInt when you need more than 32 bits.
• Prefixes are not part of the number. Strip 0x, 0o, or 0b before feeding a raw digit string to a parser that expects an explicit radix.

Related conversions

If you are working with text rather than numbers, the Text to Binary tool converts characters to their binary or hex byte values. And when your hex is really a color, the Color Converter turns it straight into RGB, HSL, and HSV.

Conclusion

Number bases are just different clothes on the same value. Once you can see binary, octal, decimal, and hex side by side, colors, permissions, and bitmasks stop being mysterious and become quick lookups. Convert a value once, verify it in every base, and skip the by-hand arithmetic that invites off-by-one bugs.