| Color as Rhetoric |
Websites are visual spaces. You can even apply the design theory for decorating a physical room to websites. Color is rhetoric--- color communicates style, atmosphere, and emphasis. It tells a story. This means that to be a 21st century digital writer, you need a crash course in color theory, the purpose of this webpage.
This is the color wheel (to the left). It shows you how colors are related to one another. Red, yellow, and blue are the primary colors--- these three make all of the other colors and hues. Red and blue make purple; yellow and blue make green (which can mixed seemingly infinitely to give different hues of purple and green). Click here if you would like a copy of the color wheel.
Colors and hues can be complementary or analogous. Complementary colors are located opposite one other on the color wheel (Red-Violet 9 is directly opposite of yellow-green 9). If your site is saturated with Red-Violet9, then Yellow-Green9 will be a good accent color that will have some pop. Colors that are analogous hues are located near/next to each other on the color wheel.
A good approach is to make one color act as the central player while the other two colors work alongside that central player as an accent and as a supplement.
Colors are often described as warm and cool. Warm colors (red, orange, yellow, etc) are considered lively and vivid. Think of the sun here. Cool colors (blue, green, turquoise) create a calming atmosphere. Think of the ocean and the sound/feel of waves. Just remember that colors create a mood.
If you chose cool colors, it doesn’t mean you should only stick with cool colors. A small pop of a warm color in a cool color scheme, for instance, will give a pop to the whole space. You should not, however, choose two, high-intensity colors in equal ways. The website will look cartoonish. Unless the purpose of the site is to showcase cartoons, too many colors will detract from your work. Have one intense color carry the site and let the other colors work as aides to it. If you click the words in this sentence, you will be taken to an ePort where the blue in the banner pops off the black and white photo and is then used as the color of the main module. Since purple sits near blue on the color wheel, a purple-based background is used with yellow as accent. When you use such strong colors, choosely deliberately and consistently.
White, grays, and black are pigments that can tint all of these colors and hues to lighter and darker values. When only a grayscale is used, you get a gallery effect where the artwork tells the central story. Think of an art gallery here. If the visual story of your site will be about the art that you upload, then maybe a white-gray-black scheme is the way you want to go. Click here for an ePort example of this.
Now, it's time to decide your color story. What is your 3-color package? Why do you choose these three colors? Why do you like them? How are these colors related on the color wheel? What do you want these three colors to convey about your website and about you/your goals?
Just remember that your three colors need to be repeated in your ePortfolio. The repetition helps your readers’ eyes move across the website. Thus, the colors guide your reader the way a thesis statement would. The repetition gives your webspace logic and coherence. Go back to your three colors. Think about how you plan to use your colors now. Which color gets used where and how? Why? Your top tab must especially have prominence and must communicate with the banner and with the rest of the site. What colors in your banner and what colors in the top tab are in communication?
You already know a lot about color and the ways it conveys ideas and moods. You choose outfits to wear. You put on make-up. You wear the logo of a favorite soccer/basketball/football/hockey team. You live in tones of color (even if you are colorblind). Now you get to decide what you want your website to convey with color.
| HTML Color Codes |
Here are two websites that offer HTML color codes and explanations:
These sites allow you to choose the color that you want as well as mix and blend them until you get the right shade.
Give yourself time with this. Choosing color codes can take a considerable amount of time depending on how picky you are. Here is an example of a demo site that I created. This is top banner and top-nav bar:
This is just an informal demo site for students that outlines the top tabs and content. Only students in the particular sessions will ever see this. But here's the thing. The yellows are all different and this annoys me A LOT! It could take me 15-30 minutes to make these hues of yellow match up perfectly and come to think of it, the reds do not all match either. DO NOT lose yourself in this mess: one minute you are just experimenting with color, then you play with something else on the website, when all of a sudden you look up and realize that you have been in front of the screen for a lonnnnnnng time. Beware... do not go overboard with these colors... they WILL entice you.
Always remember that when you add color values, the "#" must be included for the code to work!