DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Number Base Conversions: Why Every Developer Hits a Wall Without Them

#webdev #beginners #programming #computerscience

The first time I encountered hexadecimal color codes in CSS, I did not think about number bases at all. #FF5733 was just a magic string that made things orange. It was not until I tried to programmatically darken a color by 20% that I realized I needed to actually understand what those letters and numbers meant -- and that meant understanding how to convert between binary, decimal, and hexadecimal.

Number base conversion is one of those skills that feels academic until suddenly it is not.

The Base System

Every number system works the same way. In decimal (base 10), the number 347 means:

3 x 10^2  +  4 x 10^1  +  7 x 10^0
= 300 + 40 + 7
= 347
Enter fullscreen mode Exit fullscreen mode

In binary (base 2), the number 1011 means:

1 x 2^3  +  0 x 2^2  +  1 x 2^1  +  1 x 2^0
= 8 + 0 + 2 + 1
= 11 (in decimal)
Enter fullscreen mode Exit fullscreen mode

In hexadecimal (base 16), the number 2F means:

2 x 16^1  +  F(15) x 16^0
= 32 + 15
= 47 (in decimal)
Enter fullscreen mode Exit fullscreen mode

In octal (base 8), the number 73 means:

7 x 8^1  +  3 x 8^0
= 56 + 3
= 59 (in decimal)
Enter fullscreen mode Exit fullscreen mode

Once you see the pattern, every base conversion is just multiplication and addition. The base determines how many unique digits exist and what each position is worth.

Converting Decimal to Binary

The standard algorithm is repeated division by 2, reading remainders from bottom to top:

Convert 42 to binary:

42 / 2 = 21 remainder 0
21 / 2 = 10 remainder 1
10 / 2 = 5  remainder 0
5  / 2 = 2  remainder 1
2  / 2 = 1  remainder 0
1  / 2 = 0  remainder 1

Read bottom to top: 101010
Enter fullscreen mode Exit fullscreen mode

Verification: 32 + 8 + 2 = 42. Correct.

There is a faster mental method I prefer. Start with the largest power of 2 that fits, subtract it, repeat:

42: 32 fits (42 - 32 = 10) -> 1
10: 16 does not fit         -> 0
10: 8 fits (10 - 8 = 2)    -> 1
2:  4 does not fit          -> 0
2:  2 fits (2 - 2 = 0)     -> 1
0:  1 does not fit          -> 0

Result: 101010
Enter fullscreen mode Exit fullscreen mode

Same answer, but you are working left to right which feels more natural.

Converting Binary to Hexadecimal

This is the elegant one. Because 16 = 2^4, every hex digit maps to exactly four binary digits. Group binary digits from the right in sets of four, convert each group:

Binary:  1010 1100 0011
Hex:        A    C    3
Result:  AC3
Enter fullscreen mode Exit fullscreen mode

The mapping table:

0000 = 0    0100 = 4    1000 = 8    1100 = C
0001 = 1    0101 = 5    1001 = 9    1101 = D
0010 = 2    0110 = 6    1010 = A    1110 = E
0011 = 3    0111 = 7    1011 = B    1111 = F
Enter fullscreen mode Exit fullscreen mode

Memorize this table. It is one of the most useful things you can keep in your head as a developer. Once you know it, you can mentally convert between binary and hex almost instantly.

Where You Will Actually Use This

Debugging memory addresses. Debuggers show addresses in hex. If you need to calculate an offset, you need to work in hex or convert to decimal.

Network programming. IP addresses are 32-bit numbers. Subnet masks make much more sense when you see them in binary. The mask 255.255.255.0 is 11111111.11111111.11111111.00000000 -- a clean boundary between network and host bits.

Color manipulation. #FF5733 is R:255 G:87 B:51. To darken by 20%, multiply each channel by 0.8: R:204(CC) G:70(46) B:41(29) = #CC4629.

File formats and protocols. Reading a PNG header, parsing a TCP packet, or understanding a UUID all require fluency in hex-to-binary conversion.

Permissions. Unix file permissions use octal. chmod 755 means 111 101 101 in binary: rwx r-x r-x. Each octal digit maps to three permission bits.

Four Common Conversion Mistakes

1. Forgetting to pad binary groups. When converting binary to hex, the leftmost group may need leading zeros. 10110 should be grouped as 0001 0110, not 1 0110.

2. Confusing octal and decimal. The number 010 in many programming languages is octal 8, not decimal 10. JavaScript's strict mode deprecated octal literals with leading zeros specifically because this caused bugs.

console.log(010);   // 8 in non-strict mode (octal)
console.log(0o10);  // 8 (explicit octal syntax)
console.log(10);    // 10 (decimal)
Enter fullscreen mode Exit fullscreen mode

3. Sign extension errors. When converting a negative number's binary representation to a larger bit width, you must extend the sign bit. -5 in 8-bit two's complement is 11111011. In 16-bit, it is 1111111111111011, not 0000000011111011.

4. Off-by-one in power calculations. The rightmost bit is position 0, not position 1. This trips people up constantly. An 8-bit number's positions are 2^7 through 2^0, giving a maximum unsigned value of 255, not 256.

When I need to quickly verify conversions between binary, decimal, hex, and octal -- especially when I am working on bit manipulation code or network configurations -- I use the binary converter at zovo.one. It handles all four common bases and shows the work, which makes it useful for learning as well as checking.

I am Michael Lip. I build free developer tools at zovo.one. 350+ tools, all private, all free.

Top comments (0)