The Importance of Color in Web Design

All too often, I see a great design concept with a poor choice of colors. Part of what makes a great web design “great” is layout, typography and color. When each of these aspects work to compliment each other, great design is born.

RGB vs CMYK

If you’re an experienced designer, but are new to web design, you’re most likely a print designer. When I made the move from print into web design, I was fortunate that I was such a web geek and already new what I needed to know in terms of RGB vs CMYK. Unfortunately, I know far too many print designers who have troubles. This section is for you!

Red Green Blue (RGB)

rgb_space

When you look at your computer monitor you’re looking at colors generated using red, green and blue light. This is called an additive color model because varying percentages of red, green and blue light create the variety of colors your monitor produces.

Note that the key word here is light. 100% red light, 100% green light and 100% blue light added together will create white on your monitor. Creating black however, is a little more tricky. In order to create black you must turn the RGB light sources down to zero. This gets much more complicated to explain because of the differences in computer monitors, tv’s and other electronics. For what this article is trying to cover we’ll keep it simple. When you create black in say, Photoshop, you’re removing all color (0% red, 0% green and 0% blue) but that isn’t technically true black.

So how do we express RGB colors on the web? We use a three-byte hexadecimal value such as FFFFFF (white) or 000000 (black). Each color (red, green, blue) is represented with a byte consisting of two digits ranging from 00 to FF. The first two digits set the color intensity of red, the second two digits set the intensity of green and the last two set blue.

hex_values

So for example the color red expressed in a three-byte hexadecimal value would be FF0000. This is because the first byte in the value is FF which means red is set to 100%. If you wanted 100% green the value would be 00FF00 and if you wanted 100% blue the value would be 0000FF.

Cyan Magenta Yellow Black (CMYK)

cmyk_space

I won’t get into CMYK too much since it doesn’t really apply to what we want to talk about. What you need to know about CMYK is it works on a subtractive color model. The more color you add, the darker the color you achieve. In CMYK however, you can’t achieve black with only CMY (cyan, magenta and yellow). That is where “K” comes to the rescue. “K” is black ink, which is used to achieve a more true black.

So why do you need to know the difference between RGB and CMYK? Well, for one, as a designer it’s just good to know. For two, you want to be working with colors intended for their destination color space. RGB has more colors than CMYK and more importantly, more vibrant colors.

Photoshop Color Settings & Browser Embedded Color Profiles

For as many designers as I know that don’t know the difference between RGB and CMYK, I know twice as many that don’t know what color profiles are let alone how to use them properly. Color profiles haven’t mattered so much in web design in past years but with ever advancing web browsers, it’s more important to know what to use.

color_profile

What is a color profile?

A color profile is used to manage colors across multiple devices so that each device will have the same appearance. They are a set of data tables that describe the properties of a color space (sRGB, Adobe RGB, etc.). Images such as Tiff, Jpeg, Png, Eps, etc. can have a color profile embedded but it isn’t required.

Browser Embedded Color Profiles? Say what?!

Have you ever run into a situation where Safari displayed an image differently than other browsers? This is because Safari 3 (and the new beta 4) support embedded ICC (International Color Consortium) color profiles. If you don’t save the image with the correct color profile embedded, it will display differently than in other browsers and could make your website look odd. Firefox 3 also supports embedded color profiles but it’s disabled by default.

What I see most often is a few images or even just a single image that has been saved for the web incorrectly and displays colors differently than other images in the website. This problem especially stands out when images that are supposed to blend together use different color profiles and display differently because they no longer blend like they appear to in Photoshop. Below is a screenshot of a section of the ThemeForest website using two different color profiles in Photoshop. If you had two separate images that used these separate color profiles, most browsers would display both images like the right section of the image below. However, Safari would actually show the color differences because it can see the embeded color profiles.

profile_comparison

So how do you setup Photoshop when designing for web?

Open Photoshop but without any images open. Navigate to Edit > Color Settings

Use these settings for Working Spaces:

  • RGB: sRGB IEC61966-2.1
  • Gray: Gray Gamma 2.2

Use these settings for Color Management Policies:

  • RGB: Convert to Working RGB
  • CMYK: Off
  • Gray: Off
  • Profile Mismatches: Check off Ask When Opening

Then navigate to View > Proof Setup and change it to Monitor RGB. When working on a web image make sure View > Proof Colors is checked.

color_settings

So what did we do here? First we set our RGB working space and our Gray Gamma to the standard for the web and viewing on monitors. This way we’ll be using the same color space as pretty much all computer monitors. Then we made sure to tell Photoshop to view the images being edited in this color space correctly. If you don’t tell photoshop how to view (proof) them then when you save the image for web, it could look different than what you were editing.

Ok, so now we understand the difference between RGB and CMYK and have our workspace setup to view, edit and save images for the web correctly. Onward with color schemes! :-)

Color Schemes

A color scheme is just a planned combination of colors (or the lack of color). There are several different kinds of color schemes but these are the 6 classics.

  • monochromatic
  • analogous
  • complementary
  • split complementary
  • triadic
  • tetradic

To get started we’ll need to establish a base color that fits the subject and purpose of the project you’ll be working on. It’s important to note that white, black and shades of gray are not technically colors.

color_scheme_designer

Monochromatic Color Scheme

A monochromatic color scheme is based on one color and uses multiple shades of that color. Monochromatic color schemes can be powerful in design if used properly. We’re so used to seeing designs with several colors that the simplicity of a monochromatic color scheme and make a very strong impression.

monochromatic-mozilla

Sometimes using a “color scheme” without the use of color will catch people off guard because we live in such a colorful world. Black and white photos are a good example of this but it can easily be applied to web design. Technically, using black, white and shades of gray is not a monochromatic color scheme as it doesn’t actually contain any color. It is actually called achromatic color scheme but still qualifies as a monochromatic color scheme, just more specific.

Analogous Color Scheme

An analogous color scheme is created using colors adjacent to each other on the color wheel. You’ll need to be careful when using this color scheme because if you choose colors farther apart than 1/3 of the color wheel, things will start getting ugly.

analogous-envato

Complementary Color Scheme

simultaneous-contrast

A complementary color scheme is created using colors on opposite each other on the color wheel. This type of color scheme tends to be high in contrast but the colors should complement each other nicely. You must be careful when using this type of scheme however, as you don’t want to encounter simultaneous contrast in the wrong way.

Simultaneous contrast means that the colors make each other look more vibrant and strong. If you use this in a situation such as foreground and background, it’s painful to look at. A good example is text on a background where the text and the background are complementary colors but cause simultaneous contrast.

Split Complementary Color Scheme

A split complementary color scheme is where you use two colors adjacent to the complimentary color of your base color. So pick out your base color, find it’s complimentary color (the one directly opposite on the color wheel) and pick two colors adjacent. See, not as complicated as it sounds!

Triadic & Tetradic Color Schemes

A triadic color scheme is created by using three colors that are each 1/3 of the color wheel apart from each other. A tetradic color scheme is created by using four colors where each pair of colors is complimentary to each other.

Generating Color Schemes and Palettes

As simple as the color schemes might sound it can actually be pretty difficult to come up with a really nice color scheme on your own. Most web designers don’t have the time to experiment with colors and figure out what looks great and there’s really no reason to unless you need something truly custom for a client or project.

color-spectrum

Generating Color Schemes

Instead of generating color schemes the hard way there are tons of online resources with some awesome color schemes freely available as well as apps that you can use to create color schemes based on certain colors. My personal favorite is Adobe Kuler and Color Scheme Designer but there are many available that you can easily find by Googling “color scheme generator”.

adobe-kuler

Generating Color Palettes

Color palettes? What?! I thought this was the same as a color scheme? It sort of is, but it really isn’t. When you design a website it’s unlikely that you’ll only use 1-5 colors which is what you’ll get with a color scheme. There are so many elements and element states that go into a website that you’re bound to use many different colors. Instead of coming up with slightly different shades for different element states as you go, it’s best to come up with a color palette first while you’re figuring out your colors.

A color palette only needs to consist of your color scheme and a few different shades of each color that you might use for other purposes. For instance, you might use a color from your color scheme for your text links but what about the hover, active, and visted states? You might want to use different shades of that same color for the other link states.


54

Comments