In order to see the difference between using a good color scheme and a bad one, we’ll look at an example. Leslie Cabarga’s book The Designer’s Guide to Color Combinations contains a chapter on bad color. The following fi gure shows what two identical Web pages shown in a mobile device look like with a color scheme based on a photo and one using an example of bad color from Cabarga’s book.
Good and bad color.
The fi gure on the left uses colors picked up from the photo, and the one on the right does not — plus, it’s just a bad combination.
79 background may not provide the contrast you need for other midtone colors, so a dark or
light color in the palette may be a better choice. Figure 4-9 shows the color palette developed around a logo that will be used as the page’s palette.
Figure 4-9: A logo-based color palette.
Th e hexadecimal integer values for the four colors are pasted right in with the CSS3 at the top of the HTML5 page for reference. Th e following script (ColorsPhoto.html in this chapter’s folder at www.wiley.com/go/smashinghtml5) employs the colors so that they work with the logo and rest of the page.
<!DOCTYPE HTML> <html>
<head>
<style type=”text/css”>
/* 027333,7FA646,D9B448,F2DFA7 */
body {
margin-left:1em;
background-color:#F2DFA7;
color:#027333;
font-family:Verdana, Geneva, sans-serif;
font-size:11px; }
h1 {
font-family:Tahoma, Geneva, sans-serif;
color:#7FA646;
}
h2 {
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
color:#7FA646;
background-color:#D9B448;
}
div {
text-align:center;
}
a {
font-family:Arial, Helvetica, sans-serif;
text-align:center;
font-size:10px;
text-decoration:none;
background-color:#027333;
color:#F2DFA7;
}
a:hover {
80
} </style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Arranging Colors</title>
</head> <body> <div><nav>
<a href=”#”> Link 1 | </a>
<a href=”#”> Link 2 | </a>
<a href=”#”> Link 3 </a> </nav> </div>
<img src=”Sandlightlogo.gif” alt=”Logo” align=”left”> <header><h1> Welcome</h1></header> <br><br>
<article>
<h2> We are all about...</h2>
Sandlight Productions is an international development company that specializes in HTML5/CSS3, streaming video, mobile device development, online education, Action- Script 3.0 architecture, Flash, and PHP.
</article> <br>
<footer><div> <nav>
<a href=”#”> Link 1 | </a>
<a href=”#”> Link 2 | </a>
<a href=”#”> Link 3 </a> </nav>
</div></footer> </body>
</html>
Th e CSS3 script uses the property a:hover to change the property when the mouse is over the link. In the <a> tag CSS3 defi nition, the text-decoration is set to none, which means that the text link will not be underlined. Without the underline, you want to do something to alert the user to the presence of a link; you do that using the hover property. Changing the color of the link text subtly yet eff ectively shows the user that the mouse is over the link. Both the initial color and the hover color are part of the palette. So, in setting up the page, remember that more than just the <body> and <h> tags use the color palette.
Th is particular design is focused on mobile devices (see the right side of Figure 4-10), but it should work with computer and table screen as well (see the left side of Figure 4-10). Of course, your page is always going to look better if you have a Web designer do the page design. However, even developers can make it look better by paying attention to the color combinations.
81 Figure 4-10: A color scheme applied to a page.
TAKE THE WHEEL
Th e following two challenges should be fun, and you’ll learn a lot from doing them both: Reproducing the standard color chart: In Figure 4-1 is an image with the standard
colors. Your fi rst challenge is to see if you can reproduce the Web page that displays those colors. Here are a couple hints to get started:
•
Defi ne each named color as a class in your <style> container with the same color for the text and background colors..aqua { color:aqua; background-color:aqua; }
•
One way to do this is to use the <span> tag to assign classes to the content of the <span> container.<h3> <span class=aqua>COLORNAME</span><span class=black>COLORNAME
</span><span class=blue>COLORNAME</span><span class=fuchsia>COLORNAME
</span> <h3>
Your picture belongs on a Web page! Th is is a three-part task:
1. Make a digital image of yourself using the built-in camera on your computer or upload one from a digital camera.
2. Load the image into Kuler and create a color palette.