EzineArticles - Expert Authors Sharing Their Best Original Articles



  Submit Articles
  Members Login
  Benefits
  Expert Authors
  Read Endorsements
  Editorial Guidelines
  Author TOS

  Terms of Service
  Ezines / Email Alerts
  Manage Subscriptions
  EzineArticles RSS

  Blog
  Forums
  About Us
  What's New
  Contact Us
  Article Writing Shop
  Advertising
  Affiliates
  Privacy Policy
  Site Map


Advanced Search


Would you like to be notified when a new article is added to the Web-Design category?

Email Address:


Your Name:


Prefer RSS?
Subscribe to the
Web-Design
RSS Feed:

Understanding HTML Color Codes
Print This Article Ezine Publisher Send To Friends Add To Favorites Post A Comment Suggest Topic Report Author

I help people with web pages a lot and I usually encourage them to edit the HTML directly and not rely on GUI layout programs like Microsoft FrontPage or Adobe GoLive to layout their pages. A lot of people have a trouble understanding what HTML Color Codes mean and how they work.

HTML Color Codes are 6 characters wide and look like "#80FF12", and are really 3 2-digit hex numbers that represent Red, Green, and Blue. Ok... I just lost a good portion of the crowd didn't I? Let's break it down into things that are easy to understand.

How to describe a color using numbers? There are a lot of ways to specify a particular color, but one of the ways that's used with computers is to specify the values of Red, Green, and Blue to mix together to achieve the desired color. As we vary the amounts of Red, Green, and Blue we can create most any color you desire.

How does this relate to computers? Computer displays, TVs, and other "projected light" display devices use pixels to display what you see on the screen and the color value for those pixels is specified in a RGB (Red, Green, Blue) value. For example if your monitor is set at 1024 x 768 resolution, then there are 768 lines (from top to bottom) on your screen, and each line has 1024 pixels or little dots in it. Each of those pixels or little dots is actually made of three smaller dots or light sources: a red one, a green one, and a blue one.

Ink works differently. Computer printers generally specify color as a four (or more) color "reflective" ink value made up of Yellow, Magenta, Cyan, and Black which is abbreviated as YMCK. The computer uses various formulas to convert the RGB values to CMYK values so that you can print what you see on your screen accurately.

How does the computer represent a RGB color value? RGB values are stored as 3 separate values (one for Red, one for Green, and one for Blue) between 0 and 255. If you count the 0 as a value, then that's a total of 256 possible values. When you combine the Red, Green, and Blue values together to represent a color you get a possibility of 16.7 million colors (256 x 256 x 256). That's a lot of colors and most people consider this to be "true" color because it can represent most photographs and images accurately and naturally.

What is a Hex number? Your computer stores information as single ones and zeros. Each of these 0s and 1s is a single value called a "bit". When we combine 8 of these "bits"
together it makes a "byte". So therefore a byte is 8 bits.
We can count in various "bases". In regular everyday life, we use base 10 or "decimal". Base 10 uses these digits to represent a number: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. If we use the ones and zeros I just talked about, we're talking about just two possible values for each digit, 0 or 1, so this would be called base 2 or "binary". In computers, we use base 16, or hexadecimal (hex for short) a lot because it packs more values into a single space. Hex uses the following digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. To represent the number 128 in decimal or base 10 requires 3 digits (128), in binary it requires 8 digits (10000000), and in hex or base 16 it requires just 2 digits (80). So by using hex values in programming, HTML, and other computer related things, we actually save storage space and gain efficiency.

How does this relate to HTML color codes? HTML colors codes are made up of 3 sets of hex numbers, one for Red, one for Green, and one for Blue.
For example:

000000 is black (0's for all three colors)

FFFFFF is white (255's for all three colors)

FF0000 is all RED (255 for Red, 0 green, 0 blue)

00FF00 is all GREEN (0 Red, 255 green, 0 blue)

0000FF is all Blue (0 red, 0 green, 255 blue)

FFFF00 is Yellow (255 red, 255 green, and 0 blue)

808080 is a gray (128 red, 128 green, and 125 blue)

Generally in HTML, you also put a "#" in front of the color code, but this is not necessary when you specify all 6 digits. If you make profiles for mySpace.com, leave off the "#" too because they filter them and it won't display the color correctly if you use the "#".

To convert between Decimal and Hex values, use the calculator that comes with Microsoft Windows. Open the calculator and select View and then Scientific. You'll see more buttons and controls on the calculator now. To convert a number from Hex to Dec, click on "Hex", key in the number, and then click "Dec".

I hope this helps you understand more about HTML Color Codes and how colors are stored and specified in computers.

Fred Black can teach you how to Make Money Online. Check out his web site at http://www.InternetMakeMoneyOnline.com.

Article Source: http://EzineArticles.com/?expert=Fred_W_Black

Fred W Black - EzineArticles Expert Author

Other Recent EzineArticles from the Internet-and-Businesses-Online:Web-Design Category:

Most Viewed EzineArticles in the Internet-and-Businesses-Online:Web-Design Category (90 Days)

  1. Create a Good First Impression With Great Website Design
  2. Creating Your Own Website in 1 Hour!
  3. Inexpensive Website Design Ideas
  4. 5 Tips For a Customer Friendly Web Site
  5. 5 Tips For Hiring a Web Site Designer
  6. Sale Landing Page That Isn't Converting - Give it the Kiss of Life Today
  7. Top 5 Bad Website Design Ideas
  8. Making Money With Mini Sites - The 3 Most Powerful Ingredients to Win
  9. How to Build a Website Step by Step
  10. How to Design a Website Using Div Tags
  11. Screen Display Resolution - What Screen Size Should You Test Your Web Site For?
  12. Best Landing Page Template Designs - What Separates Great Landing Page Templates From Lousy Ones?
  13. Web Design Trends to Avoid
  14. Building Your Own Webpage With WordPress
  15. WordPress Membership Site - The Easiest Way to Set Up a Membership Site With Wordpress

Most Published EzineArticles in the Internet-and-Businesses-Online:Web-Design Category

  1. Sale Landing Page That Isn't Converting - Give it the Kiss of Life Today
  2. Sales Landing Page Not Converting - Stop Pushing the Pebble Uphill With Your Nose
  3. Web Design - 5 Key Principals For an Effective Website Design
  4. Sales Page Design Not Making Sales - Don't Waste Any More Money, Try a Change of Direction
  5. Best Sales Pages Not Converting? Time to Turn Your Page From Disaster to Triumph
  6. Web Template Or Web Designer - What is the Best Way to Create Your Website?
  7. 11 Reasons Why You Need to Create a Website For Your Business
  8. Make My Own Website - Why Do I Need My Own Website?
  9. Web Design Trends to Avoid
  10. Search Engine Marketing - How to Choose an SEO-Friendly Web Designer
  11. WordPress Membership Site - The Easiest Way to Set Up a Membership Site With Wordpress
  12. Affordable Website Design Services
  13. Top 3 Affiliate Website Designs Proven to Earn You More Money
  14. Building Your Own Webpage With WordPress
  15. Inexpensive Website Design Ideas

 

This article has been viewed 1,210 time(s).
Article Submitted On: December 02, 2006



© EzineArticles.com - All Rights Reserved Worldwide.