Colors and Background Graphics:

You can set a color by using its name or hexidecimal value (bgcolor=blue or bgcolor=#0000ff). I advise you to use whatever is shorter (red instead of #ff0000 and #f0fff0 instead of honeydew).

Named colors...

- are not websafe.

- must be spelled correctly without spaces (honeydew, not honey dew).

- must be valid. Check my color charts for the list.

Hexidecimal...

- uses a base 16 counting system (like inches have a base 12).

- 0-f. a-f represents 10-15. Examples: B3 = 179; 10 = 16

- combines red, green, and blue (#RRGGBB) to make all colors.

Color Depth:

Computers have 16,777,216 possible colors. However, not all computers have enough video memory to support all the colors at the same time.

24-bit True Color...

- supports all 16,777,216 colors.

15- or 16-bit High Color...

- does not share any colors with 24- and 8-bit except black and white.

- displays colors close to the ones you thought you picked (but not quite).

- makes up about 50% of the web population.

8-bit 256 colors...

- can only display 256 of 24-bit's colors at a time.

- browsers use set palettes of color, 216 of which are the websafe colors.

- colors become the nearest websafe color. Your blue can turn green! :(

- or they dither (interlace two supported colors to make another color), making solid colors look bad.

Not Quite Websafe:

Actually, not even the websafe palette is entirely safe. At 16-bit color depth, browsers will render the same color in graphics and code-generated color (like bgcolor or font colors) differently. They will not match. Remember, 1/2 the people visiting your site will see this. Solutions?

• Never let a graphic touch a code-generated color if they're supposed to match.
• Gifs: make the background transparent.
• Jpgs: make a 50x50 gif of the background color and set it as the background.

I've observed that it renders the colors in different file types differently so a blue in your gif will not quite match that in a jpg. Sticking to one graphic type if you can and setting the gifs' backgrounds to transparent if you can't should help.

Read the Webmonkey article Death of the Websafe Color Palette? for more info.

Color Schemes:

Pick 2-3 colors and use them over and over again in the design. Does this mean they're the only colors you can use? No. But they will dominate any other colors you may include.

• Pick a few colors from a graphic you plan on using...
• Play with Visibone's Colorlab...
• Look at the named colors...
• Use a color sampler for house decorating...
  
  ...until you find a color scheme you like.

Color Issues:

• The higher the contrast, the easier text is to read.
• Black text on a white background is the most common) combination.
  (Unconfirmed: this is too much contrast for dyslexics, do not use pure white.)
  (It also strains the eyes if you have to stare at it too long.)
• White text on a black background is good for short text blurbs, not novels. Too much strains the eyes.
• Keep bright colors for things like headlines or highlighted text.
• The most common color blindness is red/green. At the least, avoid using those colors to show the difference between things, but you should never convey information through color alone if you can help it.

Link Colors:

I do not agree that designers should stick with the standard link colors (link=blue, vlink=purple) for usability reasons. I think the following measures are enough:

• lighter color for link; darker for v(isited)link.
• don't use the same color for link & vlink. I like knowing where I've been.
• don't use colors that are too similar.
• don't use red and green (color blind people, remember?)
• keep the underline or at least bold/use a different font.
• don't switch the standard colors so that link=purple, vlink=blue. That will confuse people.
• think hard before using black...
• ...and even harder before using the same colors as your text.

Pixel, Resolution, and Rendering:

The pictures on your computer screen are made with grids of tiny squares of color called pixels. The resolution determines how big the screen's grid is.

• 544 x 383 - 544 columns; 383 rows. (Web TV :p)
• 640 x 480 - 600 columns; 480 rows.
• 800 x 600 - 800 columns; 600 rows. (most common)
• 1024 x 768 - 1024 columns; 768 rows.
• 1600 x 1200 - 1600 columns; 1200 rows.

Never use a graphic smaller than 50 x 50 for your main background. The computer must redraw the screen whenever you scroll, rendering one pixel over and over again slows it down, causing "flickering" for those with inferior computers. Be kind to them.

Speaking of inferior computers, always design your layout to fit the resolution of your most common visitor at the very least (this usually means 800 x 600 res). You do not want horizontal scroll bars! Therefore, make sure you always subtract 40 pixels from the width of your tables and graphics to leave room for the vertical scroll bars. (So if you're designing for 800 x 600 res, your graphics should be no wider than 760 pixels.)

Background Graphics:

The current trend is set the bgcolor instead of using a background graphic, but just in case... ;)

Keep the file size down.

Set the bgcolor so the text can be read while the graphic loads.

Make sure the text can easily be read against the background's color/pattern.

Don't pick colors that make people want to claw their eyes out.

Remember: background graphics always tile, even if you can't see it.

You can hide tiling by making graphics wide enough to at least fill the screen at 1024 x 768 res and...

...fixing the background so it does not scroll...

...or use a tile that blends seamlessly. Example: Seam / Seamless

Written: 10-30-2002

-= Home || Graphics || Tutorials || $ervices || About || Links =-

MSKing © 2002-3. Please follow the Terms of Use.