• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Designing a website

Step 2 - Designing your site

Making color work on the web

Whether you're choosing colors for your site or matching your corporate colors to the web, there are two issues at play.


2 issues in making web color work:

  1. Matching print colors to screen colors so they appear as similar as possible

  2. Choosing web-safe colors that can be viewed by people on different platforms, browsers, and monitors

Matching print colors to screen colors: Print colors and screen colors appear differently, because they're created differently. Print colors are created by adding four colors—cyan, magenta, yellow, and black—in different quantities to white paper. But light-based media, like TV or computer screens, create different shades by removing colors (red, green, and blue). The different methods create colors with different qualities.


So print and screen colors will always look slightly different. But some colors won't translate at all. Metallic colors—silver, gold, bronze—that shine on the page will look dull on the screen. And some of the vibrant colors you see on screen (like the "Wired" colors—electric pink, acid green, video blue—cannot be reproduced on paper using the normal (CMYK) color process. They can only be replicated on a printing press by using a special PMS color.


Knowing the differences between print and web color can help you choose a palette that translates. This is especially important if you're starting from scratch, and you plan to promote your product in different media. "You need to look at the big picture when you're starting a logo system," says Jim Frew. "Design for your primary medium, but be aware that some things won't translate."


Choosing web-safe colors: When the web was first developed, most computer monitors could display only 256 colors. So the browser creators had to decide which 256 colors a web browser would display. Since different browsers chose differently, and since colors display differently on the Mac and the PC, only 216 colors can be reliably displayed on any monitor and any platform. These 216 colors are known as the web-safe color palette.


Fortunately, computer systems have improved over the last 10 years, and the vast majority of U.S. Internet users can now view millions of colors on their monitors. This frees designers to choose any color they'd like. Even Lynda Weinman, the web graphics guru who made the existence of the web-safe color palette known—no longer follows it.


But if your users are on older systems—in libraries or schools, or in countries that haven't upgraded as widely—or if you want to play it safe or limit your options, it's a good idea to stick with the web-safe palette. You'll find it online at http://www.lynda.com/hex.html.


Understanding hex color


Every color that appears on the web is described by a hexadecimal (hex) code. Hex codes are just a way to specify colors in a way the browser can understand (just as Pantone numbers are used to describe precise colors in print).


A hex code is always six digits long, and it combines numbers and letters. (A nice bright purple is #6600CC. A pale pink is #FFCCFF.) This code is actually a translation of the color's RGB values, or the percentage of red, green, and blue that must be used to achieve the specific shade. You can use software to translate a desired color into its hex code, or you can look at a hex chart and choose a color.


A hex chart can be found online here: http://www.lynda.com/hexh.html.


to Top