Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <table class="master">
  <td>
    <h1>Why Hexadecimal is Used in Computing</h1>
    <p class="author">By <b>Shem Weissman</b></p>
    <p class="intro"></p>
    <table>
      <tr>
        <td class="leftTable">
          The history of the Hexadecimal number system spans thousands of years, originating from the Greek "hexa" or 6, and the Latin "decimal" or 10th, combining to form 16th, denoting that the Hexadecimal system is a numbering system that uses a base of 16.
          <p>This page will not go into extensive detail of the Hexadecimal numbering system, but will instead focus on the basic principals, and why it is commonly used in compouter programming today.</p>
          <p>While to most unfamiliar with it, Hexadecimal may seem arbitrary, but like all things in computer science, there is a strict and logical rationale for it's use, and this article will try to provide a simplified explanation of the Hexadecimal
            system, and the benefits of using such a system in computer programming.</p>
        </td>
        <td class="midTable"></td>
        <td class="rightTable">
          <table>
            <td class="rightTableTop">
              Table of Contents</td>
          </table>
          <ul class="toc">
            <li class="toch"><a href="#what">What is the Hexadecimal System?</a></li>
            <li class="toch"><a href="#where">Where the Hexadecimal System is Used</a></li>
            <ul>
              <li><a href="#ihac">In HTML and CSS</a></li>
              <li><a href="#wr">Written Representation</a></li>
            </ul>
            <li class="toch"><a href="#why">Why use the Hexadecimal System</a></li>
            <ul>
              <li><a href="#uf">User Friendliness</a></li>
              <li><a href="#rmu">Reduces Memory Usage</a></li>
              <li><a href="#hiamob">Hexadecimal is a Multiplier of Binary</a></li>
            </ul>
            <li class="toch"><a href="#fi">Further Information</a></li>
        </td>
      </tr>
    </table>
    <p class="content2"><a name="what">What is the Hexadecimal System?</a></p>
    <p class="intro"></p>
    <table>
      <tr>
        <td class="leftTable">
          Hexadecimal, also known as base 16 or Hex, is a positional numeral system with a base of 16. Hexadecimal uses 16 symbols (0 - 9 represent the values of 0 - 9, and A-F or a-f with the values 10 - 15, respectively).
          <p>Hexidecimal is used to abbreviate the representation of larger numbers, and while it has various practical uses and a history ranging of thousands of years, it has several properties that make it ideal for applications within computer programming.</p>
          <p>Below is an abbreviated table of the values of the hexadecimal system:</p>
          <table class="hexaTable">
            <th>Hexadecimal Symbol</th>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
            <th>F</th>
            <tr>
              <th>Decimal Value</th>
              <td>0</td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
              <td>7</td>
              <td>8</td>
              <td>9</td>
              <td>10</td>
              <td>11</td>
              <td>12</td>
              <td>13</td>
              <td>14</td>
              <td>15</td>
            </tr>
          </table>
          <p>Hexidecimal numbers can be converted to an equivalent decimal number.</p>
          <p>Each symbol of a hexadecimal number has a stored value representation which first converted to it's represented value, then multiplied by the radix raised to the position of the number, then is added together.
          </p>
          <p>For example:</p>
          <p>The hexadecimal number of <b>3F4B7C</b>: 3 = 3 | F = 15 | 4 = 4 | B = 11 | 7 = 7 | C = 12</p>
          <p>There are 6 positions in this number, starting at 0, then increasing by one for each position moved to the left. Each of these positions will equate to the exponent of the radix which each number's value will be multipled by. </p>
          <p>Going from left to right, in 3F4B7C, 3 is the first value. 3 has a stored value of 3, and as it's in the 6th position, it will be multiple by 16^5 (1,048,576), so 3 x 1,048,576 = 3,145,728.
          </p>
          <p>
            F has a stored decimal value of 15, and is in the 5th position from the left, so it will be multipled by 16^4 (65,536), so 15 x 65,536 = 983,040.
          </p>
          <p>
            4 has a stored decimale value of 4, and is in the 4th position from the left, so it will be multiplied by 16^3 (4,096), so 4 x 4,096 = 16,384.
          </p>
          <p>
            B has a stored decimal value of 11, and is in the 3rd postion from the left, so it will be multipled by 16^2 (256), so 11 x 256 = 2,816.
          </p>
          <p>
            7 has a stored decimal value of 7, and is in the 2nd position from the left, so it will be multipled by 16^1 (16), so 7 x 16 = 112.
          </p>
          <p>
            C has a stored decimal value of 12, and is in the first position from the left, so it will be multipled by 16^0 (1), so 12 x 1 = 12.
          </p>
          <p>
            The values of each hexadecimal number is added together (3,145,728 + 983,040 + 16,384 + 2816 + 112 + 12) to equal 4,148,092, so <b>hexadecimal 3F4B7C = 4148092 in decimal form</b>.
          </p>
        </td>

        <td class="midTable"></td>
        <td class="rightTable"> A hexadecimal multiplication table
          <p><img src="http://i1024.photobucket.com/albums/y305/shemmy88/hexadecimal_table_zps8yue7oud.png" width="400px" alt="A hexadecimal multiplication table.">
            <p><a href="https://commons.wikimedia.org/w/index.php?curid=2495534">By Bernard Ladenthin - Created by Bernard Ladenthin, Public Domain</a></p>
        </td>
      </tr>

    </table>
    <p class="content2">
      <a name="where"> Where is the Hexadecimal System Used?</a>
    </p>
    <p class="intro"></p>
    <table>
      <tr>
        <td class="leftTable2">
          <p>The hexadecimal system is used in a variety of applications, but for this article, we will focus on it's applications in computer programming and processing</p>
          <p>
            <h3><a name="ihac">In HTML and CSS</a></h3> In CSS and HTML, you can use hexadecimal digits to represent color references, each 2 hexadecimal digits representing the porportion of red, blue, and green color, in that order.
            <p>
              In CSS, you can use abbreviated digits that will duplicate, such as if you put AB2 in CSS, it will show the value of AABB22.</p>
            <p>
              <h3><a name="wr">Written Representation</a></h3> As hexadecimal values contain decimal number symbols, it is important to denote that the symboles are hexadecimal values, as to remove ambiguity, and this is typically done through the use of subscripts of hex, 16, a % or a # symbol.
            </p>
        </td>

        <td class="midTable"></td>
        <td class="rightTable">A hexadecimal color chart</p><img src="http://i1024.photobucket.com/albums/y305/shemmy88/hexadecimal-color-chart_zpshla7oaru.jpg" width="400px"><a href="http://www.color-chart.org/" alt="A hexadecimal color chart.">By Color-Chart.org</a>
        </td>


    </table>
    <br>
    <p class="content2"><a name="why">Why Use the Hexadecimal System</a></p>

    <p class="intro"></p>

    <table>
      <tr>
        <td class="leftTable3">


          The hexadecimal number system is commonly used by computer system designers and programmers today, although from an outsider perspective, it may seem arbitrary. There are actual several very practical and logical reasons why the hexadecimal system is
          commonly used in computer programming and processing, and we will go into just a few.
          <h3><a name="uf">User Friendliness</a></h3>
          <p>

            The primary reasons the hexadecimal is commonly used in computer programming is ultimately for user friendliness.
          </p>
          Ultimately, all data within a computer is stored in binary numbers, 0 or 1, representing the state of each circuit within the computer processor at any given time. If the circuit has a pulse of electricity running in it, it is on, so it is a 1, if no
          electricity is running through it, it is off, so it is a 0. Binary logic is the only logic a computer processor understands, and no matter how sophisticated the program you are running on your computer is, at some point it is converted into
          binary data in order to be processed by your computer.
          <p></p>
          What your computer stores for internal use, and what you see on your screen is completely different. Each English character, letter, symbol that is displayed on your screen is converted from a binary number, for your use. The display of each character
          takes up memory resources of your computer, which typically exceed the actual stored value of the data within your harddrive.
          <p></p>
          In order to convert these large strings of binary digits into something you as a human being can understand, hexadecimal is an elegant solution, because of it being a multipler of a binary system, with a little bit of practice, it's easy to recognize
          patterns in hexadecimal, and you can convey large numbers in an abbreviated form, with more variety than 0 and 1.
          <p></p>


          <h3><a name="rmu">
          Reduces Memory Usage</a></h3>
          <p>

            A very practical driving factor for the use of hexadecimal numbers in computer systems is they can provide a significant decrease in memory usage.
          </p>
          <p>
            Consider the number 1000000000000 (One Trillion). This has a binary value of 1110100011010100101001010001000000000000, or 40 bits, however to display the 13 characters (1000000000000) to you, the human viewer, requires 13 bytes of memory, as each character
            has an 8 digit binary value.
          </p>
          <p>
            Consider the number 1000000000000 (One Trillion) as written in hexadecimal: E8D4A51000. This also has a binary value of 1110100011010100101001010001000000000000, or 40 bits, and each hexadecimal character also requires 1 byte to display on your computer,
            so displaying this value of 1000000000000 in hexadecimal form only requires 10 bytes, as opposed to the 13 bytes it would require in decimal form.
          </p>
          <p>
            Reducing 13 bytes to 10 bytes may sound trivial, but when you are considering the scale of billions of calculations and a finite number of computer resources, that difference is signficiant.
          </p>
          <p>


            <h3><a name="hiamob">Hexadecimal is a Multiplier of Binary</a></h3>
            <p>

              As stated earlier, computer processors can only understand binary digits. As hexadecimal uses a radix of 16, it is a multiple of 2 (binary), so this allows a computer to simply group hexadecimal digits into 4 bit chunks, and process each chunk at a time,
              as opposed to decimal numbers / base 10 numbers, where the number would first have to be converted into a binary based number, then processed. Simply put, by having a binary base, the hexadecimal numbers can be processed much easier and
              faster by the computer processor.
            </p>
            <p>
              Hexadecimal digits allow for a perfect flow into binary due to the configuration of binary bytes. Each binary byte is an 8 digit number composed of 0s and 1s, which can range in value from 0 - 255 (2^8, with 0 as the first position). This is the exact
              pattern of hexadecimal, ranging from 00 - FF (0 - 255), allowing for very easy calculations for the computer processor between binary and hexadecimal.

            </p>
        </td>
    </table>

    <p class="content2"><a name="fi">Further Information</a></p>

    <p class="intro"></p>
    <p class="leftTable3">This page was made possible by research conducted from the following resources. Please click on the links below to find out a greater depth of information regarding the hexadecimal number system.</p>
    <p>
      <a href="https://en.wikipedia.org/wiki/Hexadecimal">Wikipedia</a></p>
    <p><a href="http://www.i-programmer.info/babbages-bag/478-hexadecimal.html?start=1
">iProgrammer</a></p>
    <p><a href="https://www.researchgate.net/post/Why_we_are_using_HEXADECIMAL_values_for_computer_addressing">Research Gate</a>

  </td>
</table>
              
            
!

CSS

              
                body {
  background: #f2f2f2;
}

.master {
  width: 90vw;
  background: white;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  color: black;
  text-align: left;
  font-family: verdana;
}

.author {
  font-style: italic;
  text-align: left;
}

.intro {
  border: 1px solid grey;
  font-family: verdana;
}

.leftTable {
  width: 60vw;
  font-family: arial;
  vertical-align: top;
}

.midTable {
  width: 5vw;
}

.rightTable {
  width: 30vw;
  border: 2px solid grey;
  font-family: verdana;
  background-color: #e6e6e6;
  vertical-align: top;
  font-size: large;
}

.rightTableTop {
  background-color: #6699ff;
  width: 30vw;
  text-align: center;
  color: #0000cc;
}

.toc {
  font-family: arial;
  color: #0000cc;
  background-color: #e6e6e6;
}

.toch {
  font-weight: bold;
}

a {
  color: #668cff;
  font-family: verdana;
}

.content2 {
  text-align: left;
  font-size: X-large;
}

.hexaTable td,
th {
  border: 1px solid grey;
  border-collapse: collapse;
  font-size: Large;
  text-align: center;
}

.hexaTable {
  border: 1px solid grey;
  border-collapse: collapse;
  width: 50vw;
  color: blue;
}

.leftTable2 {
  width: 70vw;
  font-family: arial;
  vertical-align: top;
}

h3 {
  color: Gray;
}

.leftTable3 {
  width: 80vw;
  font-family: arial;
}
              
            
!

JS

              
                
              
            
!
999px

Console