Internet Business Blog
« Previous | Home | Next »

 

HTML Color Codes Explained in Plain English.





December 2, 2006

When I help people with web pages, I always encourage them to edit the HTML directly and not rely on programs like Microsoft FrontPage or Adobe GoLive to layout their pages. One of the first things that people have a hard time grasping is what HTML Color Codes mean and how to work with them. Learn more about HTML and CSS with my online training course: www.WebSiteTrainingOnline.com.

HTML Color Codes are 6 characters wide and look like this "#80FF12". They are really made up of 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 back up and explain a few things.

How do you describe a color with numbers? One of the ways that's used with computers is to specify the values of Red, Green, and Blue that are mixed together to achieve the desired color. As you vary the amounts of Red, Green, and Blue you can create most any color. How and why does this relate to computers? Computer displays, TVs, LCDs, and other "projected light" display devices use pixels to display what you see on the screen. The color value for those pixels is specified in a RGB (Red, Green, and Blue) value. For example if your PC monitor is set to 1024 x 768 resolution, then there are 768 lines (going across your screen from top to bottom) on your screen, 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 however works differently. Printers that you use with your computer generally specify color as a four (or more) color "reflective" ink value made up of Cyan, Magenta, Yellow, and Black which is abbreviated as CMYK. Your computer uses various formulas to convert the RGB values to CMYK values so that you print an accurate representation of what you see on your screen.

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.

As mentioned above, we generally represent HTML color codes in Hex values. What is a Hex value? I'm glad you asked! Your computer stores information as single ones and zeros, also known as "binary". Each of these tiny single values is called a "bit". We then combine 8 of these "bits" together to make a "byte". So therefore a byte is 8 bits. If you recall from high school math, you can count in various "bases". We normally use base 10 or "decimal", which uses the following digits to represent a number: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. In computers, we use base 16, or hexadecimal (hex for short) 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 takes 3 digits (128), in binary it takes 8 digits (10000000), and in hex or base 16 it uses just 2 digits (80). So by using hex values in programming, HTML, and other computer related things, we 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 number sign "#" in front of the color code, but this is not necessary if you specify all 6 digits, it's used as an abbreviation. (Tip: If you ever make a profile for MySpace.com, leave off the "#" too because they filter them and won't display the color correctly if you use the "#".)

You can use the calculator that comes with Microsoft Windows to convert between Decimal and Hex values. Open the calculator and select View and then Scientific. Once you do this, you'll see more buttons and controls on the calculator. Click "Dec" and the key in a number. Now click "Hex" and it'll convert the number to hex. To convert from Hex to Dec, click on "Hex", key in the number, and then click "Dec". Sometimes you'll get a color specification in Decimal, for example (128, 30, 80) and you can use this method to convert it to hex (80, 1E, 50) which would look like this for your HTML color #801E50.

I hope you understand more about HTML Color Codes and how colors are stored and specified in computers. Learn more about HTML and CSS with my online training course: www.WebSiteTrainingOnline.com.


Fred

About the Author

Fred Black is an experienced programmer, web site developer, online business operator, systems integrator, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.


Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.


Share and Enjoy:

EMail Printer Friendly Reddit del.icio.us Technorati StumbleUpon Share on LinkedIn Ping Sphinn

Tip Jar: Leave a Donation

Comments: 0,   TrackBacks: 0.

Posted by Fred on December 2, 2006 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/15


Assigned Categories: Web Site Design, HTML, CSS


Related Entries:


You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact.

 

 
Comments and TrackBacks 
 

 


Post A Comment




Remember personal info?




Comment Policy <--- Read the comment policy (Updated 1/13/2010).

About  Contact  Free Products Fred W. Black

Blog Feeds, EMail, etc.:

Subscribe by EMail RSS 2.0 Feed for www.pqInternet.com. Add to Google Toolbar
My Facebook Fan Page
Twitter

Free Updates via EMail

Receive Free Updates.

Free Products and Software.

Search

Link to Me!

How to Link to this Blog.

Products

Products I Use & Recommend

www.3WayLinks.Net

www.1WayLinks.Net

Free Traffic System

Wordtracker Keyword Research Tool

www.aweber.com Opt-In List Management.

1&1 Hosting

Categories

All

ClickBank

Copywriting

Free Videos

Funny

Internet Business

Internet Marketing

Life

Search Engines: SEO

Technology

Traffic

Truth and Freedom

Web Site Design, HTML, CSS

Recent Entries

Success is not Sticky - You Have to Hold the BALL!

Birthday Salute!

New Layout

What's the Value of a Link to SEO (Search Engine Optimization)?

Internet Business Ethics 101

Exploding Your Copy (and life) From Sissy to SEISMIC.

Long Tail Keywords

I'm a Slasher!

Start Your Own Home Internet Business with these 7 Easy Steps...

Ben Goss Wins Signed John Maxwell Book!

Social Networking Common Sense

Win a FREE, SIGNED Copy of John Maxwell's book: Talent is Never Enough...

We want you as a customer!

Scarcity: Fanning the Flames of Desire

Programmed to be Poor

All Entries

Recently Commented On

Success is not Sticky - You Have to Hold the BALL!

I've Removed The 'No Follow' Tag from My Blog - You Should Too!

Birthday Salute!

Long Tail Keywords

What's the Value of a Link to SEO (Search Engine Optimization)?

I'm a Slasher!

Social Networking Common Sense

New Layout

Archives

All

Blog Roll

Clayton Makepeace

Terry Dean

Ryan Healy

ProBlogger

Internet Business Resources Blog

Michel Fortin

G. Brent Riggs

Jonathan Leger

Mark J Ryan

Dr. Joe Vitale

Search Engine Journal

Friday Traffic Report

Links

Cell Phones for Soldiers

Front Street Playschool

Clebe McClary

the IconFactory

Fred Black Music

Daryl Laws Sports Performance Blog

Williams High School Booster Club

Jacob Ingle

Light Peak

EasyIRS.com

Web Hosting

My Recommended Web Hosting Service: 1&1 Hosting

Mugs, Mousepads, etc.

About this Blog...

By:Fred W. Black

Contact Information

Powered by:Movable Type 3.34.

Copyright 2006 -2010, PhaseQuest.Com.
All rights reserved.

Subscribe by EMail RSS 2.0 Feed for www.pqInternet.com.

Add to Google Toolbar
My Facebook Fan Page
Twitter
Add www.pqInternet.com, to Google. Add www.pqInternet.com, to My Yahoo! Add www.pqInternet.com, to My MSN. Subscribe to www.pqInternet.com, with Bloglines Add www.pqInternet.com, to Your Technorati Favorites! Add www.pqInternet.com, to Windows Live

rs

Some photos are by: Lee Hinshaw Photography

© Copyright 2006 - 2010 PhaseQuest, all rights reserved.

 

Get Free Updates!

Insert your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.

*I value your privacy and will never sell, rent, giveaway, or abuse your information.