Bits, Bytes and Colors in Cascading Style Sheets

Posted on Jun 28th 2012 by Fernando Zamora

We’ve all heard that everything in computers is made up of 1’s and 0’s.  That is because computers are electronic and 1’s and 0’s is the easiest way to represent the on and off state of electronic switches.  We also know that everything in computers is measured in bits and bytes. Today if you go out and purchase a computer RAM stick you will probably get something with around 4Gigabytes or more.  When I bought my first computer in 1998 it came with 32 Megabytes of RAM.  When I talk to some of the old schoolers, they tell me stories of how their hard drive’s space was in the Kilobytes.  I say all of this to point out the key word “byte”.

Bytes in a Nutshell

“There are 10 kinds of people in the world: those who understand binary and those who don’t.”

So what is a byte anyway?  A byte is composed of eight bits.  A bit can be either 1 or 0.  In school we were taught to do math using the decimal system, but in computers it is easier to work with a binary system (1’s and 0’s).  This post is technical, but it’s not intended to be so geeky that it defeats the main purpose – to educate the everyday person about colors in cascading style sheets.  So please bare with me and I promise this will all make sense.

A byte is represented by 8 binary digits .  Unlike the decimal system where you can have ten different values in each digit, in a binary system a digit can only represent a 1 or a 0.  A byte with the value zero would be represented by eight zeros like this: 00000000.  A byte with it’s max value would be represented with all 1’s like this 11111111(this represents 255 in the decimal system).  At this point you may be wondering how all this works.

Perhaps talking about the decimal system will shed some light on this. In the decimal system each position of a digit gives that digit additional value.  In the decimal system the further the position to the left the higher the value of the digit.  For example the number 987 has the following value  (9 x 100) + (8 x 10) + (7 x 1).  That is because the 9 is in the hundred’s place, the 8 is in the 10’s place and the 7 is in the 1’s place.  Well the binary system also has positional power except that in the binary system the positions don’t increment 10-fold but instead two fold.  So the positions in a byte would be the 1s place, the twos place, the fours place, the eights place, etc, with the 128’s place being the highest position.  So for example if you have the number   00000011.  You have a (1 x 2) + (1×1) which equals 3.  As another example let’s say you have the value 10000001. You have a 1 in the 128’s place and 1 in the one’s place. So 128 + 1 equals 129.

I hope you survived that portion.  That was binary theory in a nutshell.  Bytes written in that manner are very hard to read and write, so computer scientists also came up with another way to represent a byte.  Enter the hexadecimal system. “Hexa” as in 6, and decimal as in 10 (Perhaps you remember the “hexa”gon from geometry class – that six sided shape).  That means that each digit can represent 16 possible values 0 – 15.  But each value must be represented by a single digit.  That means that we cannot rely on numbers alone. So instead, we can use the values 0-9 for those values and the values A-F for the values 10-15.  So if you were to see something like FF, that would be the value 255 (it is actually 256 places, 0 – 255, think 256MB increments of RAM). That is the same as all 1’s in a binary byte. If you were to see the value 00 that would be the value 0.  If you were to see the value 2A, that would be the value (2×16) + (10 X1) or 42 in our decimal system. Hexadecimal values can be easily converted back to bytes and vice versa.

Let’s try a short example.

For example the value 0001 0001 (separated by a space for readability), easily converts into the hexadecimal value 11 (decimal value 17). That is because the first group of  four bits is 1 and the second group is also 1. So what would the following binary value be? 0011 1000.  The first group of bits (0011) can be thought of as (1 x 1) + (1 X 2) so 1 plus 2 equals 3. That gives us our first value.  The second group (1000) has a 1 in the eights place.  So our hex value would be 38 which in the decimal system would be the value 56. Another way to look at that number (0011 1000) is 32 + 16 + 8 which equals 56.  One thing that I want to point out is that I’m treating each groups position as if there was no other group.  So the 0011 is in the positions 1,2,4,8  just as the 1000 is also in the positions 1,2,4,8 instead of the former being in the positions 16,32,64, 128.

Whew, let’s tone the geekiness way down and simplify all of this.  If you made it this far and are a little fussy on all this binary and hexadecimal so far don’t worry you will be OK.  Just know that the digits run from 1-F (1,2,3,4,5,6,7,8,9A,B,C,D,E,F) to represent the values 0-15.  The values have positional value so 10 is greater than 0A that is because 10 equals 16 and 0A equals 15.

Let’s Tie All of This to CSS

So what does all of this have to do with cascading style sheets and colors anyway?

Well in CSS, colors can be represented in one of three ways

  • by the actual word representation of the color(e.g. yellow, red, blue, etc)
  • by the three grouping hex value #AABBCC
  • by the short hand of the hex representation #ABC

Here is a simple example

  body{ color: Yellow; }

  body{ color: #AABBCC; }

  body{ color: #ABC; }

In the case with the full color spelled out each pair of hexadecimal digits represents a different part of the primary colors Red Green and Blue.  That means that each of the primary colors is represented by a byte.  The max combined value is #FFFFFF which would represent total white. The min combined value is #000000 which would be completely black.  If you wanted blue, you could use #0000FF. If you wanted red, you could try #FF0000. Finally if you wanted green, you could use #00FF00. You can mix and match any combination to get over 16 million different colors.

Here is a link explaining different colors with their values and their actual color representations.

The three character representation (#ABC) is a shorthand way of typing #AABBCC. So for example if you typed #CED that would be the same as typing #CCEEDD.   As you can already see the highest value in any one of the groups will usually dominate.  So for example if you use the value  #AA9999, you will have some reddish color. If on the other hand each grouping has the same value as in #121212 then you will probably have some shade of gray (in this case probably a dark one).

There you have it. Hopefully this has helped you better understand colors and why they are represented by hexadecimal numbers in cascading style sheets. I would like to know what your thoughts are regarding this post so please feel free to leave me a comment.
 

 

 

Leave a Reply




Post Comment

Connect With Us

Recent Posts

A Guide for Learning Design Patterns

July 28th 2016 by Fernando Zamora If you’ve been writing code for more than a year, you might have h...

Read More

Using UML to Analyze Legacy Code

June 30th 2016 by Fernando Zamora For every programmer out there creating brand new code and working...

Read More

Python vs. Other Languages

April 29th 2016 by Fernando Zamora For the last two months or so my fellow McLane Advanced Technolog...

Read More

Naming Your Adapter When Implementing the Adapter Pattern

October 19th 2015 by Fernando Zamora At some point in your project you may need to use a third party...

Read More

10 Methods to Help You Debug Legacy Code

September 24th 2015 by Fernando Zamora A large majority of the work we do in our project is to fix r...

Read More