Selecting Colors

Bright shades, moody tones — when it comes to designing your blog, selecting colors often becomes the most fun part of design. Different colors have different personalities, and each shade of color can imply different things. This chapter guides you through making the best choices of color for your blog design.

If you already have a blog, you can read this chapter from the perspective of deciding whether to change your existing colors or not. If you’re starting a new blog or completely redesigning your blog, this chapter can help you select colors that match your personality and blog content.

Colors communicate a lot about your blog’s brand and make an impression on your readers, so you have to get these right.

So keep reading to see how to find the perfect colors for your blog and select ones that don’t clash. I also give you a crash course on the color wheel, what colors mean, and how to effectively use color throughout your blog design.

Choosing Colors

Colors matter, but don’t take my word for it. According to The Institute for Color Research, between 62 and 90 percent of a person’s assessment of an environment is based on color alone. Color can also improve readership by 40 percent. I don’t know about you, but those stats got my attention.

So what colors jump to mind when you think about certain brands? How about UPS? Brown, of course. What about Coke? Red. Although you don’t have to employ a strong color association, colors can help you define your overall brand.

Colors can also help establish a tone, or mood, with your readers. If your writing style is punchy and humorous, then bright, vivid colors would work better with your blog design than somber colors like industrial gray or a pale blue. See the section “Exploring what colors mean” to learn how different colors evoke certain emotions.

These next sections give you a better understanding of colors and how to combine them on your blog design. I also share a way to determine which colors work best for your blog and then list some inspirational places to find colors galore.

Knowing the Color Wheel

Ah, our old friend, the color wheel, which is simply a circular diagram that shows relationships between colors and serves as a tool to help you understand why certain colors work better together than others.

A standard color wheel shows primary, secondary, and tertiary hues, which are the purest form of a color:

• Primary colors: You probably already know that red, yellow, and blue make up the three primary colors. All other colors stem from these three biggies. If you’re wondering why all the talk about RGB (red, green, blue) and not RYB in image editing and web design, see the next section.
• Secondary colors: These colors are combined by mixing primary colors: orange (red+yellow), green (yellow+blue), and purple or violet (red+blue).
• Tertiary colors: This third level of colors are created by mixing a primary color with a secondary color: red-orange, red-violet, yellow-orange, yellow-green, blue-violet, and blue-green.

If you were to go a deeper into a color wheel (or play with a color picker online or in an image-editing program), you would see these variations of each hue:

• Tint: A hue made lighter by adding white 
• Shade: A hue made darker by adding black 
• Tone: A hue mixed with gray

Defining RGB and hex color codes

If all colors come from red, yellow, and blue, you might be wondering why we often look at onscreen colors in terms of RGB and hex (short for hexadecimal) colors.

RGB is a three-color additive color model used for light-based devices, such as TVs, computer screens, and digital cameras. Pixels on backlit screens are dark until you add various levels of red, green, and blue light, which create an array of colors.

Hexadecimal numbers represent the red, green, and blue values with a sixdigit code that begins with a hash (#) symbol. The six-digit code is essentially broken down into three, two-digit values that use a mix of numbers and letters. The lowest value given is 00 (meaning no light), and the highest is FF (meaning the highest amount of light). This makes sense when you think of twocommon hex codes you might see: #000000 (black) and #ffffff (white).

So, when designing blogs, you use hexadecimal numbers (hex codes) to give certain design elements color values. You can create more than 16 million colors using hex codes! That means you definitely have lots of choices when it comes to colors for your blog design!

If you visit a website and love the colors, you can find out exactly what colors they are with ColorZilla, a free browser add-on for Chrome and Firefox.

Creating color harmony

Just as certain fonts go well together, so do certain colors. I’m sure you’ve seen a color scheme before and said, “Oh, that clashes!” And finding color harmony can be as simple as understanding one tool: the color wheel. After you understand how to create color harmony using the color wheel, creating color schemes for your blog design is much less of a mystery.

Here are the basic schemes created using the color wheel as a tool (as shown in Figure below):

• Analogous color scheme: Uses three or more colors that sit next to each other on the color wheel. 
• Monochromatic color scheme: Uses tints, tones, and values within the same family.
• Triadic color scheme: Uses three colors that are evenly spaced around the color wheel.
• Square color scheme: Uses four colors evenly spaced around the color wheel.
• Complementary color scheme: Uses colors opposite of one another on the color wheel.
• Split complementary color scheme: Uses one color paired with two colors on both sides of that color’s direct complementary color.
• Tetrad (or rectangular) color scheme: Uses four colors arranged by two complementary pairs. 
• Diad color scheme: Uses two colors that are two colors apart on the color wheel, with one color skipped in between.

In the everyday world, we may not talk about tetrad or diad color schemes, but most folks can relate to warm and cool colors. Looking at the color wheel again, you can see how the colors are divided into warm and cool:

• Warm: Red, orange, yellow, and variations of those colors
• Cool: Green, blue, purple, and variations of those colors 

And not to complicate life, but you can also have “cooler” oranges or “warmer” purples. For example, a cool color can have red, orange, or yellow undertones, and a warm color can have green, blue, or purple undertones.

And here is why color choice matters: Both warm and cool colors can evoke both positive or negative emotions. Warmer colors can evoke a sense of anything from coziness and happiness (sunny yellow) to anger and aggression (blood red). Cooler colors can bring a sense of calmness and relaxation (sky blue) or can feel indifferent or subdued (steel gray).

Finding color inspiration

Colors, colors everywhere! With the color wheel as your foundation and guide, peruse the web for color inspiration. Many places offer colors and color schemes that you can use as-is or let them serve as a jumping point into creating your own color combinations.

• Kuler: Kuler, has long been one of my favorite sites for color combo inspirations. Create your own color swatch or choose one submitted by the community. The site showcases five-swatch color palettes that you can search by keyword, such as “nature” or “bold.” You can even download these color palettes and open them up in Adobe programs like Photoshop and Illustrator. It’s magical. 
  
• COLOURlovers: This community-based site allows users to create and share color palettes from all over the world. Here, you can also find paid color tools (such as ColorSchemer) to build color schemes, or you can design a seamless pattern (for free using Seamless Lite, or the paid version Seamless Studio).
• Design Seeds: Jessica from Design Seeds has many years of experience as a color specialist, and it shows. She starts with a photograph and then creates a custom color palette based on the photo (without using an eyedropper tool that merely pulls a color from a photo). Her talent is impressive, and this site is serious eye candy. Each palette includes the hex codes so you can use a palette in your own blog design.
• Pantone: Pantone is the authority on color. Sift through their top colors, the color of the year, and seasonal colors to find some cool ones that fit your blog.
• ColorCombos: The ColorCombos site provides articles on color, color combination palettes, and tools like the Color Tester tool, which lets you play around with color combinations.

You can find color inspiration from everyday things all around you: nature, products or displays in a store, photos, everyday household items, food, paint swatches, and more.

And if you have an iPhone or iPad, give the Palettes app a whirl (). Create color schemes by pulling colors from a website or picture or add colors using one of five color models. Palettes comes in three offerings: Free, Basic, and Pro.

Deciding on colors to match your brand

The colors that visitors see when they land on your blog make a psychologi- cal impact within seconds. Not only do humans unconsciously attach mean- ing to certain colors, but visitors will also form instant impressions about your blog based on color.

This association happens so instantly you probably don’t realize it — but, colors can make or break your blog design. I’m sure you’ve been to a blog or website that immediately felt welcoming and cozy. Or perhaps you’ve been to a website with colors so loud and mismatched that you assumed the blog’s content would be horrible.

Colors also convey emotion and visually set the tone for your blog. In fact, your colors should help reinforce what your blog is about. For example, if you blog about a serious subject, you probably don’t want to use loud, fluorescent colors. If your writing is hysterically funny, you don’t want subdued, muted colors.

In image given below, notice how the blog Intimate Weddings uses light colors to create an intimate setting. The blog wouldn’t give off the same vibe with a turquoise rather than a pale blue, or a bright orange rather than a softer, lighter orange.

Deciding on the exact colors can seem like a fun yet overwhelming process. Start by looking at some of the places that I mention in the earlier section, “Finding color inspiration.” If you want to try creating a color scheme yourself, follow these basic steps:

1. Start with a basic color that inspires you. It’s your blog, so you should like the colors, but also consider your audience. If you love hot pink but your blog is geared toward financial advisors, you may want to start with another color that you love.
2. Jot down the topic you write about and a few words that describe your blog’s voice and tone. If you write about many topics, try to think as broadly as possible. Bringing these tidbits of information top-of-mind gets those creative juices flowing so you can choose a color that really fits your blog. 
3. Select a more specific color based on Steps 1 and 2 to narrow down your basic color to a hue, tint, shade, or tone that will be the most fitting.
   Do bright colors fit your blog the best? Are pastels the way to go? Earthy?, rich?, warm?, cool?, and so on. Also remember to consider what certain colors mean.
4. Finish your blog design’s color scheme by adding more colors. See the earlier section, “Creating color harmony” for help with creating colors that look good together.

If you aren’t sure which color to start with, try this exercise a few times with a different starting color. You can then have a few color schemes to choose from.

Determining how many colors to use

You don’t just need to choose colors for your blog design: You also need to consider how many colors and how much of each color will appear in your design. You really don’t have to abide by any set rule for this, but the following guidelines offer a good starting point:

• Start with three colors. White and black typically don’t count toward your three-color palette. What I’m talking about here are the splashes of color that call attention to different parts of your blog to add visual appeal. Again, three isn’t a rule but a nice starting point. Many blogs (including my own) use five or six colors, and some use just one or two.
  If you decide to add colors beyond your initial three, combining them effectively becomes trickier. To use more color while still maintaining coherence among the colors in your design, try using tints, shades, and tones from one color.
• Apply colors using the 60-30-10 rule to create a harmonious design. The 60-30-10 rule stems from interior design but is often used by web designers to create a nice balance of color. Typically, the 60-30-10 rule means:
  
  • A primary color covers 60 percent of your design.
  • A secondary color covers 30 percent.
  • An accent color finishes the remaining 10 percent of your design.
  You don’t have to follow the 60-30-10 rule exactly. In fact, many bloggers modify this rule a bit, because their blog’s purpose is showcasing photography. (Food bloggers, travel bloggers, and of course photography bloggers all come to mind.) On these blogs, the design is mostly white so that photos stand out and “design” colors don’t interfere with how the color photos are perceived. If your blog uses lots of photos or you simply want a white, airy design, you can still maintain the 60-30-10 proportions among the colored elements.
  A great example is the blog Oh My Veggies, shown in image given below. Kiersten’s blog uses a colorful palette of yellow, green, and orange without detracting from her mouth-watering food photos. The blog design still gives off a vibrant feel without being too heavy with color. Moreover, notice how the blog uses the three colors in different proportions, using mostly yellow, then green, and then just a few splashes of orange. 
  

The upshot: Vary the degree to which you use each color in your design. You don’t want all the colors to have equal weight.