Bookmark this page and share it with others! (Or press Ctrl/D on Firefox)
Color Codes For Your Web Site
The Color Basics
Colors are what set the atmosphere for your web site. It is what sets your site apart from your competition. It can draw in or repell your audience. Color usage in your background or font or in tables can make a plain black and white site become amazing or horrible depending on how it is used.
Your web site is a canvas waiting for some life to be added to your content. Color brings out a lot in an otherwise dry text site. Just be careful of how they are used.
Some colors used as backgrounds can be hard on the eyes. Really dark backgrounds and dayglo colors can make it hard to stick around a web site too long before it brings on migraines in some people.
Your text color should also compliment the background. It can be very weary on the eyes to have clashing colors or contrasting colors which make sort of a weird 3-d effect. Just see what happens when you mix a really red background with really blue text. It is enough for massive eye and headaches.
Color by Hexadecimal
The numbers or letters in parenthesis are the HEXADECIMAL numbers for the RGB (or red, green, blue) codes that make up that color. Each color is made of two sets of numbers. The degree of red has two numbers. The degree of green has two numbers and the degree of blue has two numbers.
The numeric value or alpha value range from 0-6 and A-F. A value of 0 has absolutely none of that color. A value of F has absolutely all of that color. The colors of Red, Green and Blue can have a mixed value of two numbers, two letters, or a number and a letter.
So if you want to color your text simply add:
<font color="#RRGGBB">And if you want to color the background of your web page, simple add this code in your body tag:
<body bgcolor="#RRGGBB">To add color to your links, use this in the body tag:
<body text="#RRGGBB" link="#RRGGBB" alink="#RRGGBB" vlink="#RRGGBB">BTW - alink means active link, vlink means visited link. If someone is currently clicking on that link, it will change to the alink color. If someone already went to that link, it will be the vlink color.
If you are using a css style sheet to design your site, a color is expressed in this manner:
body {background-color:#RRGGBB;color:#RRGGBB;}
a:link {color:#RRGGBB; background-color:#RRGGBB; }
a:visited {color:#RRGGBB; background-color:#RRGGBB; }
a:hover {color:#RRGGBB; background-color:#RRGGBB; }
Listed below are over 200 colors that can be viewed on almost every browser. Of course there are more color combinations, but these are the most common using equal values of Rs, Gs, and Bs.
(00) (00) (00) (00) (00) (33) (00) (00) (66) (00) (00) (99) (00) (00) (CC) (00) (00) (FF) (33) (00) (00) (33) (00) (33) (33) (00) (66) (33) (00) (99) (33) (00) (CC) (33) (00) (FF) (66) (00) (00) (66) (00) (33) (66) (00) (66) (66) (00) (99) (66) (00) (CC) (66) (00) (FF) (99) (00) (00) (99) (00) (33) (99) (00) (66) (99) (00) (99) (99) (00) (CC) (99) (00) (FF) (CC) (00) (00) (CC) (00) (33) (CC) (00) (66) (CC) (00) (99) (CC) (00) (CC) (CC) (00) (FF) (FF) (00) (00) (FF) (00) (33) (FF) (00) (66) (FF) (00) (99) (FF) (00) (CC) (FF) (00) (FF) (00) (33) (00) (00) (33) (33) (00) (33) (66) (00) (33) (99) (00) (33) (CC) (00) (33) (FF) (33) (33) (00) (33) (33) (33) (33) (33) (66) (33) (33) (99) (33) (33) (CC) (33) (33) (FF) (66) (33) (00) (66) (33) (33) (66) (33) (66) (66) (33) (99) (66) (33) (CC) (66) (33) (FF) (99) (33) (00) (99) (33) (33) (99) (33) (66) (99) (33) (99) (99) (33) (CC) (99) (33) (FF) (CC) (33) (00) (CC) (33) (33) (CC) (33) (66) (CC) (33) (99) (CC) (33) (CC) (CC) (33) (FF) (FF) (33) (00) (FF) (33) (33) (FF) (33) (66) (FF) (33) (99) (FF) (33) (CC) (FF) (33) (FF) (00) (66) (00) (00) (66) (33) (00) (66) (66) (00) (66) (99) (00) (66) (CC) (00) (66) (FF) (33) (66) (00) (33) (66) (33) (33) (66) (66) (33) (66) (99) (33) (66) (CC) (33) (66) (FF) (66) (66) (00) (66) (66) (33) (66) (66) (66) (66) (66) (99) (66) (66) (CC) (66) (66) (FF) (99) (66) (00) (99) (66) (33) (99) (66) (66) (99) (66) (99) (99) (66) (CC) (99) (66) (FF) (CC) (66) (00) (CC) (66) (33) (CC) (66) (66) (CC) (66) (99) (CC) (66) (CC) (CC) (66) (FF) (FF) (66) (00) (FF) (66) (33) (FF) (66) (66) (FF) (66) (99) (FF) (66) (CC) (FF) (66) (FF) (00) (99) (00) (00) (99) (33) (00) (99) (66) (00) (99) (99) (00) (99) (CC) (00) (99) (FF) (33) (99) (00) (33) (99) (33) (33) (99) (66) (33) (99) (99) (33) (99) (CC) (33) (99) (FF) (66) (99) (00) (66) (99) (33) (66) (99) (66) (66) (99) (99) (66) (99) (CC) (66) (99) (FF) (99) (99) (00) (99) (99) (33) (99) (99) (66) (99) (99) (99) (99) (99) (CC) (99) (99) (FF) (CC) (99) (00) (CC) (99) (33) (CC) (99) (66) (CC) (99) (99) (CC) (99) (CC) (CC) (99) (FF) (FF) (99) (00) (FF) (99) (33) (FF) (99) (66) (FF) (99) (99) (FF) (99) (CC) (FF) (99) (FF) (00) (CC) (00) (00) (CC) (33) (00) (CC) (66) (00) (CC) (99) (00) (CC) (CC) (00) (CC) (FF) (33) (CC) (00) (33) (CC) (33) (33) (CC) (66) (33) (CC) (99) (33) (CC) (CC) (33) (CC) (FF) (66) (CC) (00) (66) (CC) (33) (66) (CC) (66) (66) (CC) (99) (66) (CC) (CC) (66) (CC) (FF) (99) (CC) (00) (99) (CC) (33) (99) (CC) (66) (99) (CC) (99) (99) (CC) (CC) (99) (CC) (FF) (CC) (CC) (00) (CC) (CC) (33) (CC) (CC) (66) (CC) (CC) (99) (CC) (CC) (CC) (CC) (CC) (FF) (FF) (CC) (00) (FF) (CC) (33) (FF) (CC) (66) (FF) (CC) (99) (FF) (CC) (CC) (FF) (CC) (FF) (00) (FF) (00) (00) (FF) (33) (00) (FF) (66) (00) (FF) (99) (00) (FF) (CC) (00) (FF) (FF) (33) (FF) (00) (33) (FF) (33) (33) (FF) (66) (33) (FF) (99) (33) (FF) (CC) (33) (FF) (FF) (66) (FF) (00) (66) (FF) (33) (66) (FF) (66) (66) (FF) (99) (66) (FF) (CC) (66) (FF) (FF) (99) (FF) (00) (99) (FF) (33) (99) (FF) (66) (99) (FF) (99) (99) (FF) (CC) (99) (FF) (FF) (CC) (FF) (00) (CC) (FF) (33) (CC) (FF) (66) (CC) (FF) (99) (CC) (FF) (CC) (CC) (FF) (FF) (FF) (FF) (00) (FF) (FF) (33) (FF) (FF) (66) (FF) (FF) (99) (FF) (FF) (CC) (FF) (FF) (FF) The bigger mix comes in when you mix the values and get colors like
A1C0B2F52D1AF6F10A
Color by Shorthand - 3 Digit Coloring
Color can also be expressed in a shortcut method by using only 3 digits such as #000 for black or #00f for blue or #ff0 for yellow. If your RGB value has matching values, just use the first one of each set.
Color by Percentage
Another way to express color is by percentage. The percentage of the Red, Green or Blue value can go from 0 to 100% of each.
100%, 100%, 100% - white100%, 0%, 0% - true red0%, 100%, 0% - true green0%, 100%, 0% - true blue0%, 0%, 0% - black
Looking for software to help with your color picks? Download a free sample of the - Download CoffeeCup HTML Editor. CoffeeCup offers many helpful tools to design your site, including a color schemer program you can download and try out. Play around with your color schemes and see how they look before you add it to your site. Use the eye-drop feature to pick a color you like from your screen and add it to your session to get that color code. Toggle your options to create colors that are browser safe so everyone can appreciate your work. Give it a try free for 30 days. If you like it, it costs only $49 (and is tax deductible if you are in a business). Upgrades are free and you have instant access to recover your software online.