Numbers According to Computers
Tags: computerscience, webdev, css
Published: 2023-01-06 05:12:49

**This article was first published on [medium.com](https://medium.com/nerd-for-tech/numbers-according-to-computers-7c64de47348e).**

###### Intended Audience: Beginner to Intermediate Developers

## Introduction

Many might consider the topic of this article superfluous and not worthy of lengthy examination if one is looking to become a skilled web developer/designer.

I find that in academic circles and, to a great extent, among budding developers, the importance of understanding numbers as they appear to computers, among other mathematical concepts germane to software development, encounters a kind of flippant dismissal&mdash;an assessment that they are not truly necessary in order to become a good software engineer.

I would argue that these rudimentary concepts not only warrant review, but are of increasing importance in the arena of full stack web development/design.

> _So why spend time on such a boring aspect of computer science? What relevance does it have to a web developer/designer or student of programming? It sounds more like what a computer engineer needs to understand._

Well, yes, a computer engineer definitely must understand binary numbers as microprocessors make us of this at the machine language level to represent data and instructions they receive.

The subject of number representation in computers is of great importance to developers as well, and can have significant ramifications in any programming language. Consider for a moment the shorthand employed to represent numbers in both high level programing languages such as Java, JavaScript or Python and lower level languages such as assembler code or machine language.

Of course, computers don't really know the difference between 10, 100, 35 or 70, for that matter. They don't even know what numbers are. At the level of machine language&mdash;the only language of which computers are capable&mdash;all the microprocessor understands is electrical current or lack thereof when circuit is closed or open.

At the machine language level, which communicates directly with the microprocessor, **0** represents an open circuit, or one through which the flow of current is interrupted. **1**, on the other hand, represents a circuit through which the flow of electricity is not impeded.

## A Micro-Exploration of the Microprocessor

In the typical microprocessor there are billions of microcircuits employing silicon semiconductor components.

### _What is a semiconductor?_

At its root, a semiconductor is a

> _"... material [that] has an electrical conductivity value falling between that of a conductor, such as metallic copper, and an insulator, such as glass. Its resistivity falls as its temperature rises; metals behave the opposite way. Its conducting properties may be altered in useful ways by introducing impurities ('doping') into the crystal structure. When two differently doped regions exist in the same crystal, a semiconductor junction is created"_Semiconductor -Wikipedia_).

As further clarified by the _Encyclopaedia Britannica_, the introduction of impurities through the process of doping starts with

> _“pure crystalline silicon…which is abundant in ordinary beach sand…[and] has a very high resistance to electrical current…[With the introduction of] certain impurities, known as dopants, the silicon can be made to conduct usable currents… [most notably]…as a switch, turning current off and on as desired” (“Microprocessor Circuits”)._

I took this detour because the duality of circuits that can close or open leads logically into how numbers are processed by the microprocessor. The utility of a switch circuit in a computer should be self-evident.

## The Binary System (Base 2)

First, we have the binary system, the basis for the **ASCII Code** (American Standard Code for Information Interchange), which codifies the Latin alphabet, the digits **0-9**, punctuation marks, some other special characters and unprintable control characters.

For the purposes of this article, we will concern ourselves solely with the representation of numbers. The **ASCII** code employs **8 bits** to represent a single character. These **8 bits** are our starting point to understand the representation of numbers.

## How do Computers Count?

I am by no means a mathematician, but the math concepts needed in order to understand binary representation of numbers are present in basic math.

For humans, counting seems most natural in the **decimal** (**Base 10**) system, perhaps because we have 10 fingers and 10 toes. The number **10** is an easy concept for us to grasp. **Base 10**, on the other hand, is completely alien to computers. At the primitive level, there are **2 states** for a circuit&mdash;closed, where the flow of electricity is uninterrupted, or open, where the flow of current is interrupted, as we discovered in **_“A Micro-Exploration of the Microprocessor.”_**

The smallest unit of storage a computer can recognize is called a **bit** (short for **binary digit**). A **binary digit** can be one of two numbers&mdash;**0** or **1**. Because the first widely-used personal computers had microprocessors such as the **Intel 8088**, whose word length was **8 bits**, standard representation for a single character or number now uses the convention of **8 bits**.

**8 bit**s are known as a **byte**. One smaller unit, that of **4 bits** is known as a **nibble**, used only on very early processors that had a **4-bit word length**.

**_What if you need to represent larger numbers or floating point numbers?_** It is possible to represent larger numbers or floating point numbers. This requires more bytes. On early **8-bit processors**, this also requires more than one **processing cycle**. In this case,  the processor’s “[add] instruction set[s] the ‘carry’ flag” and the microprocessor sees the next cycle as part of the same number or calculation (_“How Did Old Games and Computers Display Large Numbers?”_).

Different programming languages handle representation of numbers differently. We can examine the representation of numeric data types in the **C language**, which arguably provides the seminal reference types upon which many other languages have built **static typing**.

As Ritchie and Kernighan state in _The C Programming Language,_

![Chart from The C Programming Language](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71ggaghxiyevq7wo5xf5.png)

(_"2.2 Data Types and Sizes"_).

### What Numbers Can be Expressed by a Single Byte?

To put this in basic mathematical terms, a single byte is capable of representing **2<sup>8</sup>-1** or **(2 ×2 ×2 ×2 ×2 ×2 ×2 ×2)-1**.

**2<sup>8</sup>=256**. Why, then, is the largest possible number **256-1**? We need one digit to express **0**. Therefore, the representable range of numbers expressed by a single byte is **0-255**.

### _Representing Signed Numbers_

We cut the possible range of numbers in half if we want to represent negative numbers, with “[the] lowest [negative] number that can be stored [being]<br>**-(2<sup>_(k-1)</sup>-1)_** and [the] largest [positive] number that can be stored being<br>**(2<sup>_(k-1)</sup>-1)_** (_“Representation of Negative Binary Numbers”_).

With this formula, we then have **-128** through **127** as the range of numbers one can represent in a single **byte** (**8 bits**).

We use the first bit to determine whether a number is negative or positive. We render this notation “with the help of an extra bit or flag called sign bit or sign flag in the Binary number representation system for signed numbers…[and it] has a value of…0 for positive numbers and 1 for negative binary numbers” (_“Negative Binary Numbers”_).

Using the first bit to represent the sign of the integer has a couple of consequences that bear examination. We now have only **7 bits** of the **byte** to represent the integer. There is also an unsettling ambiguity in this encoding of numbers.

Remember, we have one less **binary digit** with which to work because we need it to represent **0**. If we set the **MSB** (**most significant bit**), or the leftmost digit to **0**, it represents positive 0. If, on the other hand, the MSB is **1**, we now have the theoretical construct of **negative 0**.

Though the computer will not care one way or the other, this is an unsettling idea for humans, as we conceive of **0** as neither negative, nor positive, but occurring at the center of a number line continuum between the stream of positive integers on the right and the stream of negative integers on the left.

For this reason, the most prevalent representation of signed binary numbers uses the **2s Complement Method**, as it produces the least ambiguity of value. In short, **2s Complement** represents negative numbers by “invert[ing] the bits (0 goes to 1, and 1 to 0) and add[ing] one to the resulting number” (Finley, _“Twos Complement”_).

### _What Does this Look Like in Practice?_

Let’s say we want to represent the decimal number **-34** using **8 bits**. We would start with the unsigned binary representation of **34**, which is

<p><center><b>0010&emsp;0010</b></center></p>

<p><center><b>OR</b></center></p>

<p>
<center><b>0(2<sup>7</sup>) + 0(2<sup>6</sup>) + 1(2<sup>5</sup>) + 0(2<sup>4</sup>) +</b></center>
</p>

<p>
<center><b>0(2<sup>3</sup>) + 0(2<sup>2</sup>) + 0(2<sup>1</sup>) + 1(2<sup>0</sup>) =</b></center>
</p>

<p>
<center><b>0<sub>10</sub> + 0<sub>10</sub> + 32<sub>10</sub> + 0<sub>10</sub> +</b></center>
</p>

<p>
<center><b>0<sub>10</sub> + 2<sub>10</sub> + 0<sub>10</sub> = 34<sub>10</sub></b></center>
</p>

<p>&nbsp;</p>

To change the sign of this integer to negative, first we invert each **binary digit** arriving at

<p>&nbsp;</p>

<p><center><b>1101&emsp;1101</b></center></p>

<p>&nbsp;</p>

Finally, we add **1** to the rightmost **7 digits** (remembering that the leftmost digit is the ***MSB*** representing the sign of the integer). The resulting **binary number** is

<p><center><b>1101&emsp;1110</b></center></p>

<p>&nbsp;</p>

<p>which now equals <b>-34<sub>10</sub>.</b></p>


## Two Other Number Bases Relevant to Computers

There are two other number bases that come into play with computers. By far, the more prevalent of the two is **hexadecimal notation**, which is **Base 16**. The other less frequently used number base is **octal notation**, or **Base 8**.

### _Hexadecimal Notation_

**Hexadecimal notation** must represent the numbers **0-15** (16 digits) and does so using the Arabic numerals **0-9** and the **Latin alphabetical characters** of **A-F**. As we will see, **hexadecimal notation** has an intimate relationship to web development and design.

<h3><center>Relevance to Web Development/Design</center></h3>

How is **hexadecimal notation** relevant to **web development** and design? From a certain perspective, this question could be likened unto the question of how oxygen is relevant to our pulmonary system. **Hexadecimal notation** is related fundamentally to both back-end web development and front-end development/design.

In addition to being quite useful to data structures employed on the back-end of web applications, **hexadecimal notation** is linked intimately to **CSS** (**Cascading Style Sheets**) where developers use it to specify colors.

How a monitor displays colors on a web page depends first and foremost upon the color depth afforded by standards of color encoding, and additionally upon what **color spaces** are supported by the hardware and the browser on which one views the page. Most typical in present day applications is **32-bit color**, which supports up to **16,777,216** colors plus “…an alpha channel [that] can create…convincing gradients, shadows and transparencies” (_“What's the Difference between 16-Bit, 24-Bit, and 32-Bit Color?”_).

**24-bit color** already provides **16,777,216 colors**, but lacks the nuance of the **alpha channel** provided in 32-bit color encoding.

<h3><center>CSS Color Encoding</center></h3>

Color encoding in CSS is accomplished in several different ways, the most prevalent of which are **RGB** (red-green-blue), **RGBA** (red-green-blue-alpha), and **HSL** (hue-saturation-lightness). There are other means of encoding color. The Mozilla Developer Network published a fascinating article that elucidates the **<color> CSS** data type, and enumerates keywords that define color using different color spaces, such as **sRGB** (standard RGB) and **HSL**, as we’ve already seen. Added to the list, to name but a few, are **HSLA** (hue-saturation-lightness-alpha) and **HWB/HWBA** (hue-whiteness-blackness/hue-whiteness-blackness-alpha)  (_“\<color\> - CSS: Cascading Style Sheets: MDN”_).

All these methods of encoding share one thing in common. They may be expressed in decimal or hexadecimal notation.
For example, the **rgb()CSS** property uses **8 bits** per **color channel** (red, green and blue).

The syntax to encode the color **yellow** is `rgb(255, 255, 0);`

The equivalent syntax to express **yellow** with **hexadecimal** notation in **CSS** is `color: #ffff00;`

Note that the **rgb()** property has **3 decimal** numbers with a range of **0-255**. Each of these decimal numbers is represented as **8 bits**, for a total of **24 bits**, corresponding to the **24-bit** color encoding mentioned above.

Since we are dealing with unsigned integers, we can dispense with **2s complement** encoding for the moment.

This would give us the following **binary** representation of the color **yellow**:

<p><center><b>11111111&emsp;11111111&emsp;00000000</b></center></p>

<p>&nbsp;</p>

The hexadecimal equivalent is **three groupings of 2 hexadecimal digits**:

<p><center><b>FF&emsp;FF&emsp;00</b></center></p>

<p>&nbsp;</p>

Note that two **hexadecimal digits** are equivalent to **8 bits**. Consequently, a total of **6 hexadecimal digits** do the same job that **24 binary digits** do. Quite a reduction in time spent on encoding color.

### _Three Different Ways of Counting_

To show the means of counting provided by number bases historically used in computing, let’s take a look at their efficiency (from the human perspective, anyway) of notation from least to most:

<h2><center>Counting in Binary</center></h2>

<p><center><b>0, 1, 10, 11, 100, 101, 110, 111, 1000, 1001, 1010</b></center></p>

<p>&nbsp;</p>

And what does the large binary number of **1010** equal in **Base 10**? Here is the astonishing equivalency between the two:

<p><center><b>1010<sub>2</sub> = 1(2<sup>3</sup>) + 0(2<sup>2</sup>) + 1(2<sup>1</sup>) + 0(2<sup>0</sup>) = 10<sub>10</sub></b></center></p>

<p>&nbsp;</p>

<h2><center>Counting in Octal</center></h2>

**Octal notation** or **Base 8** is perhaps a bit less daunting. Here is how we count in **Base 8**:

<p><center><b>0, 1, 2, 3, 4, 5, 6, 7, 10, 11, 12, 13, 14, 14, 15, 16, 17, 20&hellip;77, 100</b></center></p>

Here, we have a total of **8** digits representing the values from **0-7**. So what is the equivalent of **100<sub>8</sub>**? Here is the equation:

<p><center><b>100<sub>8</sub> = 1(8<sup>2</sup>) + 0(8<sup>1</sup>) + 0(8<sup>0</sup>) =<br>64<sub>10</sub> + 0<sub>10</sub> + 0<sub>10</sub> = 64<sub>10</sub></b></center></p>

<p>&nbsp;</p>

As mentioned earlier, **octal notation** does not come into a lot of use in present computer platforms. Its chief usage was with old minicomputers and mainframes such as the **IBM System/360**, “announced by IBM on April 7, 1965…[and]…designed to cover both commercial and scientific applications and to cover a complete range of applications from small to large” (_“IBM System/360 - Wikipedia”_).

<h2><center>Counting in Hexadecimal</center></h2>

At first glance, counting in **hexadecimal** (**Base 16**) is daunting because one must represent the numbers **0-15** with single digits. Thus we count like this:

<p><center><b>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, <br>10, 11, 12, 13, 14, 15, 1A, 1B, 1C, 1D, 1E, 1F, 20&hellip;</b></center></p>

<p>&nbsp;</p>

This schema challenges our perception. After all, we do not have **16** fingers with which we can count **16** digits. To our way of thinking, **16** is **1** unit of ten plus 6 ones. But now let’s see the equivalent of **1A** in decimal:

<p><center><b>1A<sub>16</sub> = 1(16<sup>1</sup>) + A(16<sup>0</sup>) =<br>16<sub>10</sub> + 10<sub>10</sub> = 26<sub>10</sub></b></center></p>

<p>&nbsp;</p>

This representation is nice and compact. But its real advantage becomes more obvious in the representation of larger numbers, such as those uses to represent color in **CSS**.

As we know, each **hexadecimal** digit is equivalent to **4 bits** (**1 nibble**). Because a **byte** is comprised of **8 bits**, what is represented in **8** digits in **binary** can be represented in only **2** digits in **hexadecimal**. This proves quite advantageous for coding in **CSS**.

Each **channel—red, green and blue—**have a decimal value of **192**, which when notated using the `rgb()` property of **CSS** is `rgb(192, 192, 192);` Though not as cumbersome as the **binary notation** specified above, I think we can agree that it is yet more compact to use the **hexadecimal CSS rule** for the color <b>silver&mdash;</b>`color: #c0c0c0;`

<p>&nbsp;</p>

## Conclusion

We have covered in some depth the seemingly arcane, yet vital concept of number encoding on computers and distilled this knowledge through the looking glass of web design/development. Though not linked pronouncedly to the technologies of web development and design, the importance of number encoding to web technologies is irrefutable and overarching.

In today’s **world wide web**, what we used to call web sites are undeniably trending toward **web applications** with far more user interaction than ever before, and beginning to look more like their desktop counterparts.

As a result, **web applications** can involve manipulation of numbers, often at a more sophisticated level than previously encountered.

Finally, if we are truly honest with ourselves, sometimes when we do need to bother with the complexities of binary or hexadecimal calculations, it can become tedious and frustrating because our skills have become a bit rusty.
The intention of this article is to give some underpinning, and perhaps a new appreciation for these concepts by those who have long been away from rudimentary theory.

---

<h3><center>References</center></h3>

“Semiconductor.” Wikipedia, Wikimedia Foundation, 30 May 2022,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[https://en.wikipedia.org/wiki/Semiconductor](https://en.wikipedia.org/wiki/Semiconductor).

“Microprocessor Circuits.” _Encyclopædia Britannica_, Encyclopædia<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Britannica, Inc.,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[https://www.britannica.com/technology/integrated-circuit/Microprocessor-circuits](https://www.britannica.com/technology/integrated-circuit/Microprocessor-circuits).

“R/Explain Like I’m Five - ELI5: How Did Old Games and Computers Display<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Large Numbers?” _Reddit_, Reddit.com,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[https://www.reddit.com/r/explainlikeimfive/comm ents/5vqye0/eli5_how_did_old_games_and_computers_display/](https://www.reddit.com/r/explainlikeimfive/comments/5vqye0/eli5_how_did_old_games_and_computers_display/.)

Kernighan, Brian W., and Dennis M. Ritchie. “2.2 Data Types and Sizes.” _The<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C Programming Language_, Prentice Hall, Englewood Cliffs, NJ, 2016.

“Representation of Negative Binary Numbers.” _GeeksforGeeks_, 22 Apr. 2020,[https://www.geeksforgeeks.org/representation-of-negative-binary-numbers](https://www.geeksforgeeks.org/representation-of-negative-binary-numbers/).

Finley, Thomas. “Two's Complement.” _Duke CPS 104 Codex_,<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cornell University,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apr. 2000,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[https://www.cs.cornell.edu/~tomf/notes/cps104/twoscomp.html](https://www.cs.cornell.edu/~tomf/notes/cps104/twoscomp.html).

“What's the Difference between 16-Bit, 24-Bit, and 32-Bit Color?”<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Computer Hope'sFree Computer Help, Computer Hope, 13 Nov. 2018, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[https://www.computerhope.com/issues/ch001557.htm#:~:text=Like%2024%Dbit%20olor%2C%2032,colors%2C%20more%20memory%20is%20required](https://www.computerhope.com/issues/ch001557.htm#:~:text=Like%2024%2Dbit%20color%2C%2032,colors%2C%20more%20memory%20is%20required).

“\<color\> - CSS: Cascading Style Sheets: MDN.”<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_CSS: Cascading Style Sheets | MDN_, Mozilla Developer Network,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

“IBM System/360.” Wikipedia, Wikimedia Foundation, 22 Feb. 2021,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[https://en.wikipedia.org/wiki/IBM_System/360](https://en.wikipedia.org/wiki/IBM_System/360).