Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Utilizing Color In Web Design

If colors are not specifically defined, web pages will display with a white background and black text. This is the default color scheme for most browsers. But plain black and white pages can get mighty boring, so adding color can make a world of difference.

Before we get to the specifics of adding color to your page using CSS, let’s go over some basic color information.

Hexadecimal Color Coding

In the real world, we think of color with names like pink, orange, white, blue, black, purple, etc. In the web design world, there is a slightly different way to define color.

Each color has a specific coding to describe it. It is called a hexadecimal code. There are 16.7 million different hexadecimal colors - phew, that is a lot of color! Each code has 6 digits and is broken into 3 separate groups.

The first two digits represent the RED color value. The middle two digits represent the GREEN color value, and the last two digits represent the BLUE color value. If you have experience with web graphics, you will be familiar with RGB color (Red, Green, Blue.)

Let’s try an example. Pure bright red would be described with the hexadecimal of #ff0000 - the first two digits are "full" and the last four are "empty". A bright green would be #00ff00 and blue would be represented by #0000ff.

White and black are a bit different. White is pure color and is represented by #ffffff. Black is void of any color and represented by #000000.

The bad news is, it can get a little more complicated than just calculating a formula with a few numbers, (and I don’t want to bore you with the scientific chatter.) The good news is that there are marvelous resources on the web to help you choose the right hex codes for your pages, so you don’t have to figure out the formula by hand.

Hints for working with Hex Codes:

  • Remember that there will always be 6 digits in a hexadecimal code.
  • Numbers are used (1 thru 9), and only 6 letters are used (A thru F)…you will never find an "o" used in an hex code, so don’t confuse it with the zero.
  • Always use a # character before the hex code. This will ensure your color will be rendered the way you want it on all browsers. Some browsers might even ignore your color if the # is not included.
  • Use lower or upper case when typing hex codes. #ffffff is the same as #FFFFFF. Either case will do.

Where can Hexadecimal Codes be Found?

  • Color Names - Click the radio button to see that particular color as the page background. The hex code can be easily copied and pasted for use on your own web files.
  • Color Palette - Besides a chart for choosing hex codes, this site also has some additional info on color.
  • Table of Color Names - A fantastic list of colors to use. (please note, W3schools is not affiliated with the W3C.)
  • Color Wheel - Interactive color wheel

Color EyeDroppers

If you own graphics editor software (like Photoshop, Fireworks, Paint Shop Pro, PhotoImpact) installed on your system, you may be able to use that application’s eyedropper to experiment with color hex codes. For Macintosh users, I highly recommend a wonderful application called the Art Directors Toolkit.

Named Colors

Those that have previous experience with web design, might be familiar with the sixteen (16) named colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, and Yellow.

The problem with using any named color is that the color name is not standardized with every browser. One browser might render "lime" differently than another. Personally there have been occasions that I have utilized "black" or "white" color names, but for the most part, I try to use the recommended hex code instead of color names.

Web Safe Colors

If you have been around the web design block a few times, you might have heard the phrase "web safe colors". These are the 216 colors that will basically display the same on a 256 color monitor whether the system is a Windows or Mac.

In the past few years, most users own monitors that display a lot more than 256 colors. Most can display the full 16 million. Personally, I find the web safe palette extremely limited and out of date, so I do not confine my designs to the web safe colors anymore.

If you wish to learn more about web safe colors:

Color Schemes

So, if there are 16.7 million colors to choose from, how do you know what looks really good? How do you know which colors belong together?

Fortunately, there are some neat web sites to help you with this problem.

FAQ

When I try to print out a page of color hex codes or a color chart, the colors do not print. What am I doing wrong?

Answer: Most times if the colors are not printable, then they are actually coded as background colors. Your web browser settings must be changed to print background images and colors.

  • In Internet Explorer: choose Tools>Internet Options>Advanced and choose the radio button for "Print background colors and images."
  • In Firefox: choose File > Page Setup and place a check in the box next to "Print Background."
  • Make sure to change this setting back when you are done, or you will be wasting a lot of ink later.

Recommended Books for Design and Color

Color Index Book Idea Index book
Complete Index set The Non-Designer's Design Book

Other Web Resources

Do you have a favorite color resource? Please leave a comment and share.

What do you want to learn next? « Pretty PicturesCSS Basics »

2 Comments

  1. Comment by Website templates on August 31st, 2006

    Your website is great resource, thanks.

    Robert

  2. Comment by susan on January 28th, 2007

    Dear Debbie,

    Here is a couple more neat color places:
    Color Number Calculator: http://www.houseof3d.com/pete/applets/tools/colors/

    Hexadecimal Color Wheel: http://javascript.internet.com/page-details/hexadecimal-color-wheel.html

    Hexadecimal Color Chart:
    http://www.hypersolutions.org/pages/rgbhex.html

    Thank you for your WONDERFUL tutorials!
    Susan

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.