Subscribe 
Send me an 
Read more 
Follow 
Shop Other posts that might interest you
Favorites
Vintage Popcorn Boxes
Tortilla Chips
Easter Fudge
Even Christians Have Abortions
Paint Old Baking Pans for Storage
DIY Fabric Tape + Stickers
Override Inline Styles from the Stylesheet
Book Cover Tutorial
Chocolate Pancakes Recipe
Customizing Big CartelI’ve been thinking about color a lot and have heard a lot of talk about that being the most difficult thing for many designers, particularly men (seriously, how many times have you mismatched your clothes, guys). Specifically, I heard Greg Storey and Jason Santa Maria talking about color on the Web2.0 Show this morning, so it’s fresh in my mind today. So I’m working on some color schemes for you and an exercise you can do to help you pick out color.
This week: Ghirardelli
The way I practice is very simple, only takes about five minutes, and I do it about once a week or more as I have time to play. Here’s what to do (you can do this with me):
Find an image to play with
You can use any image you like, but one with more color gives you the most options for playing, and it’s easier to work with more colors.
I chose this colorful macro of a puzzle I put together a few weeks ago. It’s a closeup of my favorite place in San Francisco: Ghirardelli Square!
Pixelate to find the colors
You can use any of the pixelate filters and each will get different results. For this picture I like the crystallize results because it maintained more of the brighter colors. That was found under FILTER –> CRYSTALLIZE. Now you’ll want to open up your swatches palette if it’s not there already so you can take swatches of the photo. I use Color Schemer to do this part, but I’m explaining this for photoshop users who don’t use Color Schemer.
Now choose the eyedropper tool and click a color. Now click the ‘new’ button on the color swatches palette (as shown). If you want to use ColorSchemer, there’s an eyedropper tool built into the program so you can clip a color from anywhere on the screen (no photoshop necessary). You can also drag and drop colors from the palette directly to a color scheme, which is how I got the neat and tidy squares you see at the top of this post. I highly recommend the expense of ColorSchemer, especially if you have a hard time in this area.
Keep choosing colors with the eyedropper until you’re sick of it. Then you can go to your palette and look things over. Before Color Schemer I would make a bunch of squares on a blank canvas and then make each one a different color from the palette. Then just drag them around the canvas, arranging them to your liking. You’re just playing here, so have fun. You might not come up with some fabulous color scheme, but you’ll start to get an idea of what colors look nice together so that when the pressure’s on and you really need a color scheme, it will be easier to put something together.
Do this once a week with a different photo and you’ll get better with color every time. Of course, if you have other ideas, things that work for you, please share. I love new ideas (it’s a beta personality).
You can see my other color schemes here as I create them.
Thanks for writing about this. As a man I really struggle with colors in what (little) design I do. This is the first practical advice I’ve ever heard on the subject and it blessed me. Thanks!
Often colour is a thing misused on the web either through ignorance or just awful advertising constraints. Thinking about colour is an important part of design. Colours for the web have opened up and as a result I think a lot of people are often lost in a sea of possibilities now.
Natalie,
Thanks for listening to our show! This is an awesome process for picking color, do you mind if we go over it on our show some time?
Thanks for such a cool technique and idea.—Josh
Ben: Always a pleasure to be a blessing.
Josh: You betcha!
All: I should point out that I didn’t come up with this myself. I first saw a similar technique in Before and After Magazine Great magazine…
This is an awesome idea! I look forward to trying it soon. :)
This is a great technique to use to learn about color relationships and the like. Lovely.
Though, I feel I must speak up for us guys, color use can be learned and constantly improved. We aren’t all chronic clashers :D
LOL, no, Jason, YOU have no trouble. ;) You’re absolutely right though. My groom is constantly learning which socks are black and which are actually Navy. I have complete faith that he’ll master that someday! hahaha…
So glad to have you, Mr. Santa Ma-deea, please come again! :0)
It it wasn’t for the women I have dated in my life, I would look like a total bum. I too am very color deficient. This is a really great way of breaking down a couple of million possibilities into just a few combo’s. Great tip (and I really need to get a Before and After subscription).
There are a few tools out there which take an image and suggest some colour combinationsSuch as this one But maybe it’s not something you can automate…
BTW. Great site, but full text feeds would be hugely welcome.
Neil: Hey, thanks for the tip. That IS a handy link for someone in a hurry. Obviously, it CAN be automated, and I’m not against that. I love to create things on my own, and for those who have trouble, they can practice on their own, but it’s great for them to have resources to help make things easier.
Oh, and as for full text feeds… if I did that, you’d only see the stripped version of the post and being a highly visual person, I do a lot with my posts visually that you might miss in the feed reader. Besides, if I did that, how many do you think would still click over to the site? ;)
In my household, the roles are reversed – my wife is the one who can’t choose colours which go together, leaving me to choose most of her outfits…
For design, I’ve always been one to pick a few base colours out of the mac/windows colour-picker and then just tweak the hue/saturation until everything “feels” right.
Fantastic technique. I think I’ll use it when redesigning my photolog.
Natalie, I understand your position about feeds but I subscribe to your feed in Rojo and as you can see from this screenshot – I am not completely deprived of visual stimulation over there.And you know, if people have tons of posts to read and one of them is just a partial feed, they end up skipping it. And that would be a shame.Anyway, I’ll shut up now, it’s your feed :-)
That’s right. My feed. Read Molly. :)
Natalie,
I’ve been using a technique with Fireworks to get a pixelated image, for choosing colors. I described the method here:http://andabien.com/html/words/blog/?p=31
I hope it’s okay to mention this in your blog.
This is such an excellent idea. I know what I’ll be doing when I get home! That’s right playing games, I mean web design :P Love the sight Natalie onto my del.icio.us this goes.