Tip:
Highlight text to annotate it
X
Hello everyone and welcome. In this tutorial, "Hexadecimals and You", I'm going to teach you a few basic principles about hexadecimals
and their application in webpage building.
And if your first thought when seeing the word "hexadecimal" was this:
don't worry, the real hexadecimal is not nearly this scary or psychotic. Let's get started!
don't worry, the real hexadecimal is not nearly this scary or psychotic. Let's get started!
So first and foremost: what IS a hexadecimal?
Long story short, it is a code from a number system based on increments of 16.
Hexadecimals are used today as a way to interact with software coding without having to directly interact with the binary code.
What does all that mean? Basically, it is a simpler way of creating things, such as webpages
on a computer without having to know every single programing language under the sun.
For this tutorial you only have to be familiar with two programing languages: HTML5 and CSS.
So, what can we use these codes for?
Well, creating color palates of course! You can create a variety of amazing colors to use for a webpage that you are designing using these
hexadecimal codes.
Now I’ll be you’re wondering, what does this code stand for? How can we use these numbers to create a color palet?
Well remember that code we were showing onscreen from before? Yeah, the one with the pound symbol?
That pound symbol just lets the computer know that it is about to read a hexadecimal code.
The digits after that are broken up into pairs. Each pair of digits relate to the saturation of light in three colors.
The first pair of digits represents the saturation of red light, the second blue light, and the third green light.
Each digit can be a fixed value: a number ranging from 0-9 or a letter ranging from A-F.
This combination of letters and number are what tells the computer what the saturation value of each pair of digits is generating
and the combination of the three sets of digits tells the computer exactly what color the user wants to create.
And what is really fun about hexadecimal colors is that they can be used in both HTML5 and CSS to create a wide variety of effects.
The best part: one hexadecimal code per color! Regardless of the programing language you are using, a # and FFFFFF will always be white.
Now time to get down to brass tacks, how does one go about coding colors into a webpage using a hexadecimal code?
First let’s start with bringing up our html code.
Now this is just a very simple example, but from here, we are going to look at the code to see how it is implementing these colors using
hexadecimal codes.
See the tag for the body right here?
Using the code bgcolor with an equal sign and two sets of quotation marks we can change the color for the entire webpage.
Let’s just use a random set of numbers: how about 009900?
Type between the quotation marks #009900 and save our Notepad ++ document.
Now let’s go to the webpage.
Before we do anything let me clarify that this is an unaltered webpage with no influence from the hexadecimal code, whatsoever.
Right now I only have one word written here, but let’s see how refreshing the page and implementing the code affects it.
WOAH check that out! Our webpage went from being white to green!
But… even though we can see the word that is written here it doesn’t really pop, does it?
That’s because obviously the colors don’t contrast enough to really stand out, however, using another hexadecimal code, we can
change the color of the font so it can be really visible against this green background.
Go back into the html code and let’s take a closer look at this right here.
Magic! Ok, this is called the font color tag.
And if we put the hexadecimal code between these quotation marks, I’m just using another random one that I found. And save...
And refresh our webpage
Well, hello there! So, that random hexadecimal changed our black font into bright orange font.
Which definately contrasts against this green background, although it is a definate eyesore.
And, in all reality, I do not recommend combining these two colors. They just happen to be the colors that I randomly came up with.