Explaining HTML Color Codes - Simply
So I've decided to try explaining this topic as simply as possible.
I'll split this tutorial into 3 parts:
1) understanding decimal color codes
2) understanding hexadecimal
3) using hexadecimal in color codes
PART 1:
Its probably useful to start with monochrome TV / computer screens: The screen is made up of lots of dots, in a grid pattern, so that you get hundreds of dots horizontally and vertically. Computer guys call them pixels, but for the non-technical people, I'll call them dots.
Now, you can choose the brightness of each dot: no brightness = black, full brightness = white, a level in-between = a level of grey.
To make things easy, we can use numbers to indicate how bright to make the dot. 0 = black, 255 = white, 128 = mid-grey, etc.
We could use a number range of 0 - 99, or 1 - 100, but 0 - 255 has a special meaning to computers, so we need to use 0 - 255.
So how does color work?
Well, imagine that instead of a dot, you actually have 3 mini-dots. The 3 mini-dots are colored: Red, Green, Blue (RGB).
Why use these particular colors?
Its like an optical illusion. When these 3 mini-dots are close enough together, and at full brightness, the human eye is fooled into thinking it sees white. Now, by changing the brightness of the 3 mini-dots, you can get virtually every color you need.
So, to represent colors using numbers, we need to use 3 numbers for each dot (ie a number for each mini-dot). The order is important: the first number is for red, the second is green, the third is blue.
So, to represent black, we use: 0,0,0 (ie all mini-dots have no brightness).
255,255,255 = white (each mini dot is at full brightness, and your eye is tricked into seeing white)
128,128,128 = mid grey
255,0,0 = solid red (the red mini-dot is at full brightness, but green and blue have no brightness)
similarly:
0,255,0 = solid green
0,0,255 = solid blue
Other simple colors: 128,0,0 = dull red, 64,0,0 = very dark red (almost black)...
Now, mixing colors gets interesting:
255,255,0 = yellow, 0,255,255 = cyan (light blue), 255,0,255 = Magenta (light purple), 255,128,0 = Orange, 128,128,0 = brown, 128,0,128 = purple, 255,200,255 = pink
Most paint programs (even microsoft paint) will let you experiment with these color triplets. Go have some fun with colors
PART 2:
This is probably the most difficult computer concept to explain. Think back to your very early days at primary school. The teacher would have told you that there are only ten symbols for writing numbers: 0123456789. So while counting, you can only get as far as 9, then you run out of symbols.
But a very bright person, discovered a great way to count beyond this: the tens "column" (as well as the hundreds, thousands, etc columns). So the number in the tens column represents "groups of ten". Thus the number 423 means: 4 groups of hundred, plus 2 groups of ten, plus 3.
Computers represent numbers very differently to us. They use a system called binary... but we will use hexadecimal, because it is very simple and quick to translate between binary and hex.
Now, we can interact with computers (using numbers) in 2 ways:
- We use decimal, and the computer converts decimal numbers into binary (easy for us, but can slow down the computer)
- We use hex, and the computer converts to binary (difficult for us, but the computer converts hex to binary MUCH faster than decimal to binary)
So what is hex? Well, instead of having only ten symbols to represent numbers, we use sixteen symbols: 0123456789ABCDEF.
Now, we can count from 0 to "F", and after that we start using the "tens" column (technically, it should probably be called a sixteens column). Thus after F, we have 10, and if we keep counting, we get: 11, 12, 13, ... 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, ... 29, 2A, ... 2F, 30, ...3F, etc.
One question that often comes up is, what happens after 9F? Why A0 of course, followed by: A1, A2, ... A9, AA, AB, ... AF, B0, B1, ... BF, C0, etc. all the way up to FF.
After that, you can go to 100, 101, 102, ... 10F, 110, 111, etc.
To get over the initial learning curve, many people use translation tables (or calculators), so that when they see F, they can figure out it actually means fifteen.
So that we don't get confused between decimal and hex, hex numbers usually have a # symbol in front, so #10 is actually 16 Decimal., and #FF is actually 255.
PART 3:
Now we can combine part 1 and part 2. Colors can be represented using hex values from #00 - #FF (ie 0 - 255).
To represent black, we have: #000000 (ie 00, 00, 00 : we put a zero in the tens column to keep the overall length the same)
#FFFFFF = white (255,255,255)
#808080 = mid grey (#80 = 128)
#00FF00 = solid green
So thats it. Its a long explanation, but just about anyone should be able to read it and understand it, and you will be on your way to creating colorful web pages.
Related Tags: html, tutorial, html color codes, hex, hexadecimal
Computer Aid : We can help you. Computer Help Blog
Brisbane Computer Repairs
Your Article Search Directory : Find in ArticlesRecent articles in this category:
- Take the Wheel - Drive Customers to your Website
So you own a small business and you have made the decision to build a simple website to gain interne - Hosting Geeklog Sites----Leading To a Booming Online Community
The weblogs are increasingly viewed as a cheaper alternative of expensive content management system. -
-
-
-
-
- Joomla Revolution! How This Free Software Is Changing The Web?
Joomla is changing the web, there is no one better sentence to describe what this young FREE SOFTWAR - Spicing Up Your Blog with 3D Animated YouTube Playlists
People have blogs for different purposes, some people maintain a blog purely for commercial reasons, - Free Image Hosting Service
Image hosting is a part of most web hosting services, providing hosting solutions for images instead
Most viewed articles in this category:
- Beyond the Brand
After completing a "Who, What, Where, Why and How" exercise, there are a few more steps to preparing - Build A Better Website
Building a website isn't usually rocket science, but you have to do your homework. Just like buying - SharePoint 2007 New Feature Overview
Sharepoint 2007 is in Beta 2 now and is projected to be released at the beginning of the year but n - How To Install SharePoint 2007 Beta 2
Following are the detailed instructions on how to install SharePoint 2007 Beta 2 on a clean version - How To Accomplish Your Goals With A Web Site
Choosing a small business idea to reach your goals is not easy. You'll need a strong spirit and dete - The Best Web Sites Aren't Free
The best web sites aren't free. While you may be tempted to buy an HTML book and try to put a few we - URL Forwarding and Redirection
Webmasters and common Internet users have a constant need for URL forwarding and redirection. The r - Web Site Development with Ruby on Rails and Other Programs
Web site development is a very big business these days. Almost every company in the world is trying - Self Assessment: How Effective is Your Web Site?
1. Fonts are an important attribute of a Web site. It is essential that fonts are large and c - For Automated Sites - PHP and MySQL are A Perfect Match
You’ve decided to automate your web site. Now what? Here are some ideas to help you choose how