| Color selection for Website design is a topic that's | | | | yellow and violet, or orange and blue. These colors |
| been approached from many different angles. Some | | | | are said to complement one another. When placed |
| people approach it from a usability standpoint, | | | | next to each other, a phenomenon known as |
| explaining how to ensure readability and | | | | simultaneous contrast occurs, wherein each color |
| cross-platform compatibility. Some well-meaning | | | | makes the other look more vibrant. |
| people try to explain that design is all about feelings, | | | | There are two pitfalls to avoid when using |
| describing colors with such hallucinatory delineations as | | | | complimentary schemes: 1. If you place |
| happiness, energy, and stability. Others come to the | | | | complementary colors on top of one another, this |
| table with advertising concerns like, "Yellow means | | | | creates an illusion of movement. This is really bad for |
| cheap, green means money, and black may mean | | | | text. Have you ever tried to read violet text on a |
| elegance, or maybe…death!" Have you ever | | | | yellow background? Trust me: it's not pretty. |
| wondered where designers get that mystical ability | | | | 2. Also, colors like cyan and red, which are not quite |
| to say whether a color is or is not "working"? While | | | | directly across from each other, yet are not close |
| it's true that sea-foam green doesn't make a good | | | | enough to be analogous, will clash rather than |
| accent for a palette of primary colors, nobody really | | | | complement. These colors are known as discordants. |
| explains why. Just like having a knack for | | | | Unless you want to promote discord among your |
| programming concepts, some natural ability can be | | | | visitors, I suggest that you don't use these |
| advantageous when you're working with color, but | | | | combinations in your projects. |
| most of the skills can be gained from a basic | | | | Complementary color schemes are often more |
| understanding of color theory. Armed with a little | | | | complex than simply using two colors from opposite |
| knowledge and a few safe rules of thumb, you'll be | | | | sides of the color wheel. |
| more dangerous with a palette than a card-counter | | | | A double-complementary color scheme, for instance, |
| at a poker table. | | | | is one in which two complementary color sets are |
| The Painter's Best Friend To begin to understand | | | | used in a single theme. Similarly, a split complimentary |
| color, you'll have to think like a painter. Now, don't go | | | | theme is one in which a color is paired with the two |
| out and start throwing paint around like Jackson | | | | colors adjacent to its compliment. For instance, if you |
| Pollack; I mean simply that you need to think in | | | | wanted to create a split-complimentary theme using |
| terms of red, yellow, and blue. When you're working | | | | the colors on our color wheel, you would first select |
| with your beloved computer, colors are displayed in | | | | a color you want to use, like yellow. Then, you'd |
| percentages of RGB (red, green, and blue) light using | | | | choose the dark blue and pink that are adjacent to |
| an additive method. This means that, as more of | | | | yellow's complement, violet. |
| each color is added, you get closer to white light. In | | | | Here are a few solid examples of complementary |
| contrast -- no pun intended -- painters use a | | | | color schemes: http://www.ufl.edu - The University of |
| subtractive color method. | | | | Florida has been widely acclaimed for its recent |
| So, by asking you to think like a painter, I really mean | | | | XHTML redesign. It's also a great example of a |
| that I want you to think about colors as | | | | complementary color scheme. |
| combinations of red, yellow, and blue, and to realize | | | | Take note that although orange and blue are the |
| that, as you add colors, you get closer to black. | | | | main design colors, you don't really see them |
| Being a master painter, your most critical tool for | | | | overlapping much – this would cause that |
| mixing colors is your understanding of the simple color | | | | whole movement illusion thing we discussed earlier. |
| wheel shown here. The black triangle that I placed in | | | | http://www.modestmousemusic.com - Modest Mouse |
| the center points out the primary colors. If you mix | | | | is another example of a pure complementary color |
| two primary colors, you will get the secondary color | | | | scheme. It's also one of the few sites I've ever seen |
| that's pointed out by the lighter gray triangle. When | | | | that's been able to pull off a green and pink color |
| you mix a primary with either of its closest | | | | scheme. |
| secondary colors, you get a tertiary color; these are | | | | http://www.panera.com - Panera Bread offers an |
| located between the points of the black and gray | | | | interesting example of a complimentary color scheme. |
| triangles. With this painterly understanding of the | | | | You can clearly see the double-complementary action |
| color wheel, grasping the concepts of color theory | | | | with the green to red and the orange to blue |
| will be a snap. | | | | relationships on the page. |
| Color Schemes When I mentioned my programmer | | | | Monochromatic If you mix white with a pure color, |
| friends, and how they couldn't create a harmonious | | | | you produce tints of that color. If you mix black with |
| set of colors, I was talking about color schemes. | | | | a pure color, you get shades of that color. So, what |
| There are three main sets of color schemes: | | | | do you get if you create an image using only the |
| analogous, complimentary, and monochromatic. | | | | tints and shades of one color? A monochromatic |
| Analogous Analogous colors are those that are | | | | color scheme. This example is yet another of |
| adjacent to each other on the color wheel. If you | | | | color-theme based still life, and consists of only tints |
| pick any range of colors between two points of | | | | and shades of the color orange. |
| either triangle on our color wheel (ie yellow to red, | | | | Here are a few examples of monochromatic color |
| orange to violet, red to blue, etc), you will have an | | | | schemed sites: http://www.target.com - Target is the |
| analogous color scheme. While I was taking an | | | | textbook definition of a monochromatic color |
| introductory design class at UCF, we were given a | | | | scheme. Everything is red, white, black, and |
| still life, and one class period to paint it using | | | | combinations thereof. On the homepage, it looks like |
| whatever color scheme we were studying. | | | | they even avoid using photos that don't fall in this |
| Risking public ridicule in the interest of avoiding | | | | scheme. Now that's design dedication! http:/ |
| copyright infringement, I'll use these as my color | | | | www.macromedia.com - Macromedia has a similar idea |
| scheme examples. | | | | with its teal gradient color scheme. It, too, is |
| This still-life has an analogous color scheme achieved | | | | strategically using images to tie together the look on |
| by mixing only yellow and blue acrylic paint. | | | | the homepage. |
| Try checking out the links below to see some | | | | http://www.yakima.com - Yakima does a terrific job |
| examples of analogous color schemes in action. | | | | of using multiple monochromatic schemes. Each of |
| http://www.zeldman.com - Jeffery Zeldman | | | | the main navigational pages has an orange, blue, or |
| presents…a very limited analogous color | | | | green monochromatic scheme. |
| scheme. It's certainly not complimentary, as none of | | | | There are many variations of these three color |
| the colors are positioned opposite one another on | | | | schemes, and much research has gone into defining |
| our color wheel. | | | | scientific methodologies for the coordination of colors, |
| Notice that he only really uses two colors in his | | | | but these are the foundation principles. The best |
| design, and only two or three tints/shades of each | | | | advice I have for developing an eye for color is: keep |
| color. Using a limited color palette is a great idea, as | | | | your eyes open. If you see a Website, |
| long as the colors fall into a strict color theme. | | | | advertisement, or illustration that really stands out, |
| Depending on how you pull it off, this will usually | | | | ask yourself what type of color scheme it uses. Like |
| produce a crisp, fresh feel. | | | | analyzing a block of code, knowing the syntax of the |
| http://www.jasonsantamaria.com? - Jason Santa | | | | language of color is a great start for understanding |
| Maria's classic book cover design is another great | | | | its purpose. |
| example of an analogous color scheme. Notice that | | | | Hopefully you will find this information useful in |
| every bit of color on his site falls within one third of | | | | choosing colors for your next Web application, or |
| our color wheel. | | | | perhaps even as an introduction to your newfound |
| http://www.gorillaglue.com - I'm wondering how a | | | | painting hobby! Remember, the color wheel is your |
| company that sells glue has such a flashy, fun | | | | friend. You might even consider going out and buying |
| Website … but you'll notice as you play with | | | | a revolving plastic one from your local art supply |
| the gorilla menu that all of the color on the site | | | | store to keep on your desk. At the very minimum |
| ranges from yellow, through orange, to a dark red. | | | | you should be able to impress the designer(s) in your |
| Complementary Complementary color schemes | | | | department when you define for them the color |
| consist of colors that are located opposite each | | | | scheme they used on their latest design comp. Just |
| other on the color wheel, such as green and red, | | | | remember: coders can use color, too. |