When it comes to blogging, nothing is more difficult for me than design, and when it comes to design, nothing is more difficult for me than picking a color scheme. Thankfully, though, I am married to a designer who is little by little teaching me to think like a designer. In the not-so-distant past, I decided to mix up the colors on my personal blog, and Chris used the opportunity to teach me the method he uses for generating a color scheme. Very little color theory was involved, which I was thankful for because I tried reading his color theory textbook, and I couldn’t get past page two. If you’re a blogger who isn’t a designer, I can imagine you have a hard time picking color schemes, too, so let’s use my personal blog as a case study and walk through his process.
We started at FashionTrendSetter.com (FTS). Yes, this is a site for the fashion industry, but on it they forecast color trends for upcoming fashion seasons, so rather than having to pick five or six colors from the entire color spectrum (millions of colors), we worked with the 24 colors for Spring/Summer 2009. We also opened up the Color Scheme Generator (CSG) at WellStyled.com, which would supplement our color choices and show us where colors were falling on the color wheel. With those two resources, we chose six colors:
1. Base color.
My favorite color is orange, so naturally, I wanted orange to be the main color on my blog, but I also wanted my blog to look professional and feminine. In the lineup of oranges below, the second from the right was my favorite, but a color scheme conjured from that bright orange wouldn’t yield something that was professional and feminine, so I chose the second from the left—a color on the FTS list named Striped. I used this color in my blog’s navigation, headings, and links.
When you choose your base color, you should consider the purpose of your blog and the adjectives associated with that purpose. My professional and feminine blog won’t use the same orange that a sporty and masculine blog would. Bright colors are intense and clean, medium colors are soothing and subtle, and deep colors are rich and elegant. What do you want your blog’s colors to say about your blog?
I put six neutrals from the FTS list next to Striped and really liked the dark brown next to it, but since dark brown isn’t a very feminine color, I chose the pale tan, which is named Side, next to the dark brown and put the dark brown on the back burner. I used Side as my blog’s background color and the dark brown for its paragraph text. Neutrals are useful for background and border colors, too.
3. Complementary colors.
This is where color scheming gets complicated fun. Complementary colors are useful for secondary information on your blog: hovering links, lower-level headings, bullet images, comments, etc. And Chris likes his color schemes to have three complementary colors; the first is usually a lighter version (without being neutral) of the base color, the second is a complement to the base color, and the third is a lighter version (without being neutral) of the second.
Using the Color Scheme Generator, I entered the RGB value of Striped (#ED764E) to start finding complements. For each color system (monochromatic, contrast, triad, tetrad, and analogic), the CSG provides five variations (pastel, dark pastel, light pastel, contrast, and pale), so I had plenty of complements to choose from. Let’s look at my options according to each color system:
Monochromatic. Monochromes are made by adding white or black to your base color, but add too much white or black to your base color, and the monochrome system becomes neutral. Next to Striped and Side, the five monochrome complements don’t add enough variation to my color scheme.
Contrast. Remember learning the color wheel in grade school? Contrasting colors are exactly opposite one another on the wheel or 180 degrees apart. Next to Striped and Side, the five contrast complements provide some options that don’t overpower Striped because they are subdued.
Triad. Back to the color wheel: Triad complements form a triangle with the base color. If the base color is at 0 degrees, possible triads range from 120 to 179 degrees and from 181 to 240 degrees. Next to Striped and Side, the five triad options add variation to my color scheme but start to make it look too primary with the bright blues and greens.
Tetrad. Return to the color wheel. Tetrad complements form a rectangle with the base color. Start with the base color, add its contrasting color, and add another set of contrasting colors from anywhere on the wheel. Next to Striped and Side, the five tetrad complements (essentially the triad colors plus some yellows) start to make my color scheme neutral again.
Analogic. This is our last time at the color wheel. Analogic complements are neighbors of the base color. If the base color is at 0 degrees, possible analogics range from 1 to 60 degrees and from 300 to 359 degrees. Next to Striped and Side, my analogic options could make my scheme very feminine and bright—but maybe too bright. I’m not much of a girly girl.
All of these color systems generated great potential color schemes; my decision really came down to what the new color scheme would say about me and my blog. Remember, I wanted it to be professional and feminine, but I wanted it to be feminine without being girly. I chose two complements from the contrast system and one complement close to some analogic colors, which you can see below:
From left to right, the colors are Striped, Side, Bar, Hyphen, Stave, and Row, all of which come from the Classic palette for the season. I really have no idea where designers come up with those names, but I guess it doesn’t sound as cool if you say the color theme uses peaches and teals, huh?
To review, using resources like FashionTrendSetter.com makes the color scheming process simpler because they narrow the entire color spectrum to a more manageable set of colors. And we’ve chosen colors that are guaranteed to be around a few years and that can be seen in other industries. (As I drafted this post, I took a break and went shopping with a friend, and I noticed how many of the colors from FTS are actually in stores—and my closet—right now!) With a manageable set of colors in hand and the CSG, it’s much easier to choose base, neutral, and complementary colors without knowing much about color theory and without having a designer hold my hand.