Factors affecting web colors

Wednesday’s Production Tip for Graphic Designers

One of the biggest differences in designing for the web versus print is the use of color. Since it’s a very visual medium, color on your web adds energy, interest, and life to your website. And unlike print, it doesn’t cost anything! Better still, you can use more of it!

However, adding color is one of the things that drives me crazy about designing for the web! Why? Because you never know what your audience is really looking at. This is true in terms of line breaks, resolutions, how big it looks and unfortunately color.

Things affecting how you view color:

1. Monitor brand
2. Type of monitor (laptop, desktop, or flat screen)
3. Screen resolution
4. Color quality
5. Platform (MAC / PC)
6. How the monitor is calibrated
7. Web browser used

Color your website: Things you can add color to:

1. Backgrounds
2. Font colors
3. Tables
4. Bullets
5. Links
6. “Highlight” text by adding a background color (I love yellow) to it!

Ways to specify color on the web:

1. By name: Specify the color by name (red, purple, blue, green, white, etc..) I never use this way because browsers interpret these differently.
2. Hexadecimal codes: I use this. Based on RBG, the first two letter/numbers are the red value, the next two are blue, and the last are green. Lowest hue: 00 vs highest hue: FF.
3. Indexed colors: When I first started designing, there were 216 “browser-safe colors” listed in Hex mode. These are common regardless of your monitor and browser type.
4. RGB: fairly recent, put in the RGB color value of the color

Where do you specify the color:

1. Hard code: when I first started designing, I would manually add the color to the code of the page
2. CSS: this is “Cascading Style Sheets”. It’s my preferred way of specifying color. I create a linked document listing all my fonts, sizes, weights, and colors and then in my document I add a “style” tag or select it while I design my page. It makes sure I remain consistent.

C O N C L U S I O N :

Color makes a huge difference between a bad design, a mediocre one, a good one, and a great one.

Learn all you can about color and how to use it properly. Notice how it appears on various monitor and adjust your designs accordingly. And know, it will probably drive you bananas!

Technorati Tags: Color Theory, Design, Design Theory, Production, Web Design

Related posts:

1. Get out the sunglasses! Too many colors on a page
2. Color your world properly
3. Setting your design with color
4. Setting up your website
5. Color your designs properly