2 - 1. Color Theory

Main Points

• Color Psychology Choosing a message and finding promising colors that convey those ideas.
• Palette Experimentation Trying out different color palettes for the website.
• ^{Skip to Main Points} links return to the Main Points menu.

Color Psychology

A business may want to convey strength and boldness, or it may want to emphasize speed and agility. It may want to emphasize it's strengths, counter perceived weaknesses, or strike out in a bold new directions for the company's message. Sadly, there are frequently not right or wrong answers to these decisions. The important thing as a designer is to determine what the message of a site is and stay on point. The color palette is one of the most important areas where the design should echo the message you're trying to convey in the images and text, so that everything blends into one harmonious design. That means understanding the meaning of colors.

These choices can be very individual. Two restaurants may have very different sites: an elegant German restaurant may use a very sophisticated look which would be completely inappropriate for a fast food chain and vice versa. Even within the same website, a bakery may need a very elegant look on a page about it's French breads while a different page on it's sweet pastries may need a completely different approach right down to the color scheme. A challenging order when you're still trying to create a unified website design; a visitor switching between pages needs to soak up your emotional message even before reading a single word and yet still know they're on the same site.

Color theory tells us, that the design question is simply this... what message are we trying to convey about Earth Chronicle. We're an information site. Very similar to wikipedia, but with institutions and procedures in place to ensure more rigorous research and provide easier operation and maintenance of the site. The background will not be important to visitors, but the goals they are designed to create are absolutely part of the message we're trying to convey. We want to speak trust to our visitors. We want to speak tradition. We want to speak history and convey a human connection to the past.

At the same time, we also want to be forward looking. This is not a site for raw nostalgia or old-time sepia photography. We believe that we are part of the future and the colors should convey that. One way in which we are especially interested in doing this is playing off our name "Earth Chronicle". The green movement and conservation are major forward looking philosophies at work internationally. They are here and now but widely perceived as future oriented because they are relatively new as mass movements and they strive for long-term goals. They also campaign against the weaknesses of short-term thinking which have created the environmental problems they seek to correct. They advocate for action in the short-term to correct past errors and seek to avoid problems in the long-term with improved care, planning, and information. The Green movement encourages people to think of themselves as part of a continuum with the past and the future, and this dovetails beautifully with how we think about history. With these ideas in hand, design theory tells us the following colors may be appropriate choices to include in our Earth Chronicle color palette, based on the meaning of different colors.

• Tan - Rustic and woodsy
• Amber - Mellow, it's an Autumn leaf color
• Taupe - Classic and organic
• Ivory - Classic and warm, a natural color
• Chocolate Brown - Rich and delicious
• Brick Red - Earthy and strong
• Bright Blue - Vibrant and aquatic, a sea color
• Deep Blue - Authoritative, a different mood but also a sea color
• Bright Green - Fresh, it's a Spring color
• Foliage Greens - Lush and natural

In keeping with our Medieval scroll theme, I needed a dark brown and threw in chocolate even though it's not exactly in our philosophy, but otherwise I was pleased to see such a nice selection of earth tones to experiment with. The greens and blues echo a combination of the natural colors in our Earth images and green movement hues. Looking ahead, they will be effective both as spice hues that will stand out against the scroll background and as harmonious, sophisticated monochrome color schemes for banners or header images.

Palette Experimentation

I started with the basic color meanings to guide me in some general directions. Now it was time to research various color guides and color harmony sites, and group them in Eiseman fashion. (Unearthed, Warm, Active, etc.) I built color chips for the color schemes that seem most attractive and "on-message". In keeping with the scroll theme I'm looking mainly for earth tones as my base colors. Following those, I'm looking for some colors to spice up the design, and looking mostly at the natural blues and greens. Then I started to play. (ie the "a" series are modified versions of the original color schemes) After doing one round of modifications, and throwing out all but my favorite options, these are the ones I might use in my palette.

• Earth Tones - Good Color Schemes

• 

  Custom 1a -

  This was a color scheme I developed myself. I was originally working on modifying a different color scheme and realized I was "nowhere" near it. It looked like it had potential so I worked it into shape as a custom color scheme. I think it lacks too much contrast to use for for either foreground or background, but might have some colors usable as borders. Even the spot color if flipped to a background, is a bit too deep a tan.

• 

  Demo 1 -

  This color combination looked great in the book, but comes out decidedly blah on a monitor, though I think you can see what attracted me to it. The yellow beige may be in the area of our primary color - but maybe toned down a little and less yellow.

• 

  Demo 1a -

  A common theme of the original color schemes is that while they looked great in print, they lacked something on a monitor. Therefore, I tried to amp up the color combinations, and this one probably went a bit too far, though these colors might work in a bold two color heading, section, or image. The yellow is too bright, but the brown is a vibrant, brighter version of the chocolate color I originally started with above. It's a distinctly plausible, if brighter, dark brown with pop.

• 

  Rich 2 -

  A big part of the attraction here was the pretty realistic paper color and the gorgeous purple although that is not one of my colors thematically. The primary color is also too gray, it has a dull quality. I want the reading surface to have the warm glow of lamplight, and the gray doesn't work for that. This is another example of how my extended background information while not worked directly into the design, can help answer questions and guide you in the right direction. The darker brown came out pretty gray as well.

• 

  Rich 2a -

  This is a distinctly improved web variation on the Rich 2 color scheme. I deepened the purple spice color and took the grayish cast out of the secondary dark brown turning it a deeper hue as well. They both pop much better, and the primary color also looks better moved from the taupe to a cleaner beige. I don't know what the future of the purple is, I like it, but it is probably better used for a different site. The primary and secondary browns however are distinctly possible options.

• 

  Unearthed 3 -

  Here again was a palette that looked great on the page but was underwhelming on screen. I don't think there's anything I like about how this looks. The primary background color is equal parts too dark, too gray, and too wrong, the secondary color is rosy which is not what I want, and the spice color looks awful in combination with them. This combination needed serious work for the web.

• 

  Unearthed 3a -

  The primary and secondary colors in this palette are not bad. The primary is too dark, but I do like the warmth of the tan without being rosy. The secondary brown is probably too bright, but in the range of the borders I might want to apply. The spice color is not awful, but probably not something I'm going to use.

• 

  Unearthed 4 -

  This color combination is passable on its own, one of the few that was, although I worked up a variation on it anyway. However, I don't see any of these colors making it into the final palette though they're "close". The primary tan is a little too dark and a little too dull. The secondary color is a touch rosy, and the gray is the only color I might use in the design. If I use gray at all, it would be in a limited capacity; it's not one of the colors on my original list. If at all possible, I'm trying to stay within my psychological message.

• 

  Unearthed 4a -

  This is a much brighter variation of Unearthed 4. The primary color is one of the closest to my current background though a bit more tan. The secondary color is warmer, but probably too light. The gray is much nicer, but again, I'm not really "looking" for a gray.

• 

  Warm 3 -

  This was much more dull than I expected, especially the secondary color. The spice color is much too light to really attract attention, while being fairly dark and dull. I took a fair amount of liberty to modify this palette.

• 

  Warm 3a -

  The result of starting with too dull a palette is that this went very vibrant very quickly. The primary color is much too yellow. The secondary color while bright, is actually so bright it might pass for a primary color. I almost made this a two color palette, and I don't see the spice color working out.

• 

  Warm 3b -

  The primary color is one of the background colors from a scan of an Renaissance era vellum; it's very close to this secondary color I was exploring for a background. I combined it with the ivory color from our initial exploratory list. And the spice color from Warm 3a.

• Nature and Eco / Green Tones - Good Color Schemes

• 

  Active 2 -

  This is an interesting color scheme. One of the few four-color palettes I worked with, it's also one of the few that I didn't end up modifying. My attempts to "improve" it failed pointedly. I'm not sure about the brown spice color, but there's a nice leaf green. This palette has one of the best harmonies, though there isn't a background color here because all the browns are too dark. I'm definitely going to play with this distinctly woodsy palette for the secondary colors.

• 

  Active 2b -

  Both spice colors blew up with my leading primary color, but since all these colors were potential secondary colors, I just experimented. I liked this combination best keeping the secondary color and using the Active 2 primary color as a spice color.

• 

  Seagrass 1 -

  I like this palette though I did try a darker modification of it. The primary color is nice, but on screen it doesn't seem to pop. I like how bold it is, how natural and aquatic the colors are and will be looking at these as possible spice colors.

• 

  Seagrass 1a -

  I like the sky blue spice color even better with this darker variation than with the original and I love sky blue. I'm not sure what I think of the secondary color; it's nice, but I don't think it harmonizes with these colors. The darker variation of the primary color makes a good complement to the earth tones.

• 

  Seagrass 3 -

  This entire palette is simply unfortunate on screen. Like Demo 1, it carries enough of the harmony of the ink verion that I think you can see what attracted me to it. It's a very good additional palette for Seagrass 1, if those were the colors we were building the site around. Still this palette was begging for help.

• 

  Seagrass 3a -

  I turned the primary color down deeper to get a much richer color out of it. Then turned the brightness up on the secondary and spice colors, until you can't even recognize the spice color anymore, yet it has real pop with that background and possibly with a carefully chosen darker brown.

• 

  Traditional 1 -

  Another great ink combination that looks awful onscreen. It's distinctly washed out.

• 

  Traditional 1a -

  This color scheme shaped up nicely with some modification. The woodsy green and brown interact very nicely together and the navy blue spice color may work with the brown, even though it gets lost in the dark green. In different locations, these are all possible colors.

• 

  Traditional 1b -

  This palette saved the navy blue and the brown which I liked together in Traditional 1a and combined them with my leading candidate for a primary background color.

• Other Good Color Schemes

• 

  Active 1 -

  This was the only other four color palette that made it this far. There's nothing wrong with it, they're all good colors and they work well together. The primary color is a bit too yellow, and the secondary is stuck in between brightnesses, too light for borders, to dark for backgrounds, but the spice colors are interesting and striking.

• 

  Active 1a -

  The primary color looks cleaner and brighter but is probably still too yellow. The secondary color is interesting and might make an alternate background color. The spice colors brightened, but I'm not sure if they harmonize well with this group now.

• 

  Complexity 2 -

  This palette looks like a cloud cast a shadow over what I had in mind. I quickly settled down to edit this into a better shape.

• 

  Complexity 2a -

  The primary color is a bit too yellow, and needs to be warmed up a little, but it provides a good contrast with the spice color, and I'd like to have a sky blue. Sky blue and the secondary color, aren't really shades that seem to fit my profile however.

• 

  Unique 3 -

  Except for the bright lavendar, this is washed out. The secondary color is probably close to the background shade I'm looking for, but comes off too flat, like the yellow in Demo 1. The reddish purple spice color just looks awful.

• 

  Unique 3a -

  I brightened up the background color, but ironically it's probably no closer to what I want to use. The lavendar is pretty, but like the bluish purple of the Rich 2 palette, I have a hard time seeing purple working with my color psychology. The spice color may be the most interesting shade to come out of this. I nice brick red, might indeed look great in my final palette.

Creating tints and shades of these colors will increase the number of colors available to us. Using borders of various thickness and color, and the juxtaposition of two colors next to each other will affect how the colors are perceived. So while we've limited the palette, there's still a lot of variations we can go through. Selecting a palette is about getting colors that will work well together for our purpose. Once in the palette, colors can also be unifying or emphasizing elements of design. The higher the contrast the more empahsis a color combination will create, while lower contrast will convey a more unified design. A color that's used once in a design will also stand out more than if it is used repeatedly on multiple elements.

• Beta Home
• Beta Reader's Guide
• Beta Projects
• Beta FAQ

Subjects:

• Core,
• Core