Color Theory for Today

Combining art and technology

By Traci Lepore, Designer, InContext Enterprises

Does this sound familiar? An image or site you created looks amazing and perfect on your computer. Then you view it on someone else's machine and are horrified to see something that looks nothing like you intended.

Today's world of advanced hardware, software, and web technology is making the old rule of CMYK for print and RGB for screen nearly obsolete. Color selection and correction have become complex with the addition of hexadecimal colors, web-safe palettes, dithering, as well as cross-platform and cross-browser considerations. And then globalization of information sharing gets added to the mix.

The combination of the art, psychology, and technology of design on the web creates a new genre of color theory for the modern age. The trick is to learn how to combine them all together for a creative solution to your design problem that will look the same and have the same effect from computer to computer, browser to browser, and country to country.

The meaning behind the color

You see a bright blue sky and think of summer fun, a sepia-toned photo makes you nostalgic, a red rose makes you feel romantic, but why? Because color has meaning and affects us in ways we may not even realize. There is a psychology to color; whether you are creating a web page for a corporate company or just to showcase your own work. Your tone is defined by your colors and how you use them. In addition to the tone you want to convey, you need to be aware of how color translates from one system to another and from one culture to another. This is even more important with the evolution of the Internet.

Transitioning from print media to the web, we need to be even more careful with our color selections and know how they will be affected by the technology we use. For example, a corporate, dark navy blue may look black on some machines, totally changing the perception of what is being viewed and creating the wrong tone for your company or client.

Along with this comes the complication of the world becoming more and more connected through the Internet. This means needing an added sensitivity to the multicultural differences in how colors are perceived. Those of us in the U.S. know that red symbolizes fire and passion, green means growth and money, and that blue is peaceful. But this isn't necessarily true in other countries. The difference in how white is perceived in many countries (pure) and in China (mourning) can mean a difference in how you want to present yourself. All of these things need to be taken into consideration when choosing a color scheme and creating graphics to coordinate with your chosen colors.

The technology behind the color

The web-safe color palette

Do we really need to adhere to the web-safe palette and its limited choice of 216 colors anymore? Created in the days of 8 bit, 256 color monitors, today it is debatable whether we need to stay within these "safe" colors. Most designers would agree it is not necessary if we do things like embed color profiles and test on multiple platforms. The advancements in systems and monitors, as well as browser standards and image editing software, allow us to have much more control over how our images will be viewed. While the palette is still useful for the newer technologies of handhelds and mobile devices — which have not yet caught up in the color technology race — they will soon catch up and make the web-safe palette a relic of archaic technology.

Dithering

A major technological difficulty of creating colors for the web is that dreaded occurrence — dithering. For those of you who don't know (lucky you if you don't) dithering is what happens when your computer attempts to create a color that is not in the web-safe palette by using colors that are in the palette. This occurs mostly in large flat spaces of colors and causes an unappealing, spotted effect instead of smooth consistent color.

You can avoid dithering by using those limited choices in the palette, but who wants to do that? A good thing to remember is that JPEGs will dither to a much higher degree than GIFs. However, your colors may not be all you expect with the GIFs as this format reduces the colors in your palette to web-safe ones (by matching to the nearest relative color) and what you saw originally may not be what you get. Adobe® Photoshop® does allow you to tell a GIF to have no dithering, but remember to be wary of the colors you will get. Check that the results will be acceptable by viewing the Save For Web options in the 4-up mode so you can compare against the original and play with the options and see the differences. Another tip is to add the minimal amount of monochromatic noise (using the noise filter, no more than 3) to the color to help break it up. The difference will be imperceptible to the eye, but makes all the difference with dithering. Finally, always remember to save a high quality version of your scans in PSD, TIFF, or BMP format to prevent color loss, and then use these as masters to create more compressed files.

Gamma Settings

The reasons why your work looks so different across different computers are varied and range from your monitor and system's color capabilities, to the browser's standards, to how the image may have been saved originally. The most common reason is gamma settings, which are responsible for the lightness and darkness of images, in particular the mid-tones. Different operating systems have different standards of gamma. The general rule of thumb is that Mac's gamma is lower than the PC's, which means colors created on the Mac will look lighter on the PC and vice versa. Different browsers also have different standards. Without proper color correction, your colors will mutate. The image editing software you use can help dramatically by allowing you to embed color profiles (called ICC monitor or RGB profiles) into your images. This helps to ensure the stabilization of the color across platforms by storing an extra chunk of information in the file that tells the system what the colors in your image should be.

So how do you choose?

First, no matter what the layout or medium, you need to remain consistent with color and its usage. Color selections should help reflect the purpose of the website and create a "place" with boundaries. The most important selections you have are your background, text, and link colors. Originally the web relied on the default gray background of Mosaic and Netscape Navigator.

Second, the text must be legible. This can only happen when you have a high enough level of contrast between your background and text colors. Of course we all know that black text on white background is the best of all contrasts but is not the only one that works. Dark text on a light background combinations have proven themselves less than ideal, but can be made to work with a less saturated, pale background color, with the text color being a darker shade of the same color with the same hue. For the opposite (dark background with light text) the dark background needs to be a more saturated version of the color with paler text. This can also work with different colors as long as you follow the same kind of rules for saturation and hue.
 

Third, rely on classic color theory. To help choose the most harmonious color combinations, we can return to those basics of design. One of the most basic theories is that of complimentary colors, which are two colors that are opposite each other on the color wheel such as red and green. Take care with these combinations; they can vibrate when they are of the same tonal value. This may be great for getting attention, but there's a harsh effect on the eyes when being viewed for a significant amount of time. Another simple color scheme is monochromatic colors-shades and tints of one color. Done well this can be very successful. Triadic colors schemes made by drawing an equilateral triangle within the color wheel and using the colors at the points, are very popular and nice on the eyes. Analogous colors (colors that are next to each other on the color wheel) such as green, yellow-green, and yellow are very effective — as Mother Nature can attest to. Just look around you to see how often in nature these combinations show up.

Finally, always test, test, and test again. Look at your work on as many different platforms, browsers, and monitors as you can to see what happens before you send your work off into the world.

Resources

About the author

Traci joined InContext in 2001. She worked in advertising and marketing prior to coming to InContext. Traci holds a B.S. in Communications/Media from Fitchburg State College, where she also curated the FSC Gallery for two years.

Published 06/21/2002