Choosing Colors, Part 1

Color. I love color. It can express how we feel, affect our mood, make products seem more appealing, and so much more. For a website, color is a huge issue. You want something appealing, but not distracting to your visitor. For me as a blogger, I want a color scheme that not only pleases my visitors, but pleases me as well. Blogging is a very personal thing, and I want the colors of my blog to reflect my own personality.

But how to choose those colors? And how to find colors that match the color you really like? Oh boy. This is always a tough one. Here are some things I thought about when choosing colors for Not Exactly Bento.

If you followed Not Exactly Bento from Blogger to this current site, then you know this site has gone through at least 3, possibly four, formatting changes since I started. It has taken awhile, but I think I’ve found the color scheme I really like. Now, the layout is another matter and another topic for another post.

How did I choose this particular color scheme? Well, there were two main places I used to choose NEB’s current color scheme. And this is how I’ve chosen all my other color schemes.

For NEB, I decided I wanted a color scheme that reflected something about bento. I took several photos of bento food, bento accessories, and more. I used Big Huge Labs‘ Palette Generator to help me.

First if you aren’t familiar with Big Huge Labs, I highly suggest you go there and spend some time goofing off with their many fun Flickr tools. If you don’t have a Flickr account, never fear. The tool that we are going to use doesn’t require you to have a Flickr account.

Scroll down the page and look for the Palette Generator in the right hand column. Click on that.

Now, you get a screen that looks like this. This is where you can use a picture to help you generate a color scheme.

Here you can upload an image to generate a palette. To choose an image, click on browse and find the image you want to use wherever you’ve stored it on your computer. Note: If you have a Flickr account, you can choose an image from there. Just click on Flickr (two over from the Upload tab).

Once you’ve found the image, and said okay to the popup box, click on the large blue create button.

Here is the image that I used to help me generate a palette for NEB. I chose this because I thought this picture had great color.

Here’s the color palette that Big Huge Labs generated for me based on the picture above.

I really liked this palette. Now, it’s a bit too subdued for what I was looking for. But there was one color in particular that really jumped out at me. It’s that great leafy green that is the very first swatch.

You’ll notice that each swatch has a code of sorts below it. It starts with a number sign (#) and has six characters next that is a combination of letters and/or numbers. This is the HTML code for the color. You need this code to plug into your WordPress theme to get these colors on your blog. (Again, more information for another day). Also, this the code to have to use this color in other programs, like Microsoft Word (or any MS Office Product) or graphics programs like Adobe Photoshop Elements (which I use).

Okay, back to that leafy green color. I liked that color. But really wanted a color scheme that was more vibrant. The leaf green color made me think of the tropics, the caribbean, the jungle, etc. etc. These are the keywords I used at another website.

If you haven’t discovered Color Schemer yet, you sooooo need to browse around their site. On the front page in the top menu, click on Scheme Gallery. Once you click on Scheme Gallery, click on Search Schemes. You’ll get the below page.

In the search box, you could type in a keyword that describes the type of color you might want or you can even type in the HTML code for a color you know you want to use.

i’m going to type in the word tropical and hit search. Here’s what I get back.

I received back a search result list of 4 pages of color schemes that could spark my creativity. If you place your mouse over any of the colors, a little box pops up that tells you what the HTML codes is for that number. This is important if you want to search by color.

You’ll also notice that each color scheme has a list of keywords associated with it. You can click on those keywords and see other schemes.

Color Schemer is my absolute FAVORITE website to search for colors.

If you want to save the colors you found in color schemer, make sure that the scheme you want is visible on your computer screen (scroll to it if you have to). Press CTRL+Print Screen on your computer. This copies whatever you are seeing on your computer screen to the computer’s clipboard. The print screen button is normally above the number pad on your keyboard. Then, go to Photoshop Elements, and click on File>New>Image from Clipboard. You can then save this image.

If you don’t have Photoshop Elements, you can usually use your word processing program for this. If you have Microsoft Word for instance, click Edit>Paste. It will normally copy what is in your clipboard to your document.

VOILA! You’re well on your way to choosing your color scheme for your website!

We’ll talk soon about using those colors to make graphics and customize your blog template later.

In the meantime, be the bento!