Picking Colors

[Datura]

Often I hear: "How do I pick colors? How do I know what works together?"

I have an easy solution to give you a start on that process. I keep this sample simple, you can expand on it and finesse it. It is a very easy step to find color schemes, what goes with what. It is not the ultimate, but it can be a spring board.

I took a photo of some wooden birds in front of a simple wall. A very average picture, it does not have to be a great photo, just one you look at and say: "I like it." I opened it in Photoshop and took sample colors with the eyedropper (I). Those I put down within a shape-selection of the marquee (M) with the bucket (K). After I had collected a large enough number of them, I duplicated them and took all the saturation out of the colors to arrive at the grey values for each of these colors.

• Enhance > Adjust Color > Hue/Saturation

That is an important step. When you combine colors and lay them on top of each other, you should be able to see them as separate grey values, there should be a distinction between them. Think about a person with poor eyesight or color blindness, they only see grey. How often have you seen red type on a black background, almost impossible to see. When you change the hue of the color, the grey value is the same. That is also good to know, because once you have determined a grey, you can shift the hue to your liking. The saturation can also be changed without changing the grey value. Only the lightness setting will change the grey value.

When you now change the hue of all these colors together, you will have automatically colors that are in harmony with each other. You can obviously add colors, or take some away, but it gives a nice and easy guide to choose colors from.

[electroskan.com]

Fine tutorial Datura!!!

[Datura]

Thank you Ram

[Dark Tranquility]

Top stuff Ulrike

[Datura]

DT -- thanks. I just hope that it can truly benefit somebody. It is difficult to make these little tuts in a compact way. I am working on this right now. Sometimes you just need to give a tiny nudge to a person, but some others need to have all detail explained, because they start from zero. What is the level of knowledge that should be assumed?

Some way is to keep the theme of the tut very broad, then there is no technical skill requirement, but that also is very limiting for the choice of subject matter…

[happyoink]

Great tutorial. This will help me a lot.

[samonteroel]

very nice one!
I already have something in my mind where I'll implement it.

Thanks a lot.

[bamaboy]

I knew one site for picking up color combinations, i just forgot the url.
Anyhow, good tutorial, i believe Hue/Saturation is one of important factor.

[Tekime]

@Datura - Thanks for sharing and great job. Very clearly explained. The desaturation tip and visual aids were awesome.

@bamabboy - Not sure if you're thinking of the same site, but this one has a bunch:

http://www.colorschemer.com/schemes/

[fvsch]

Sites for picking color combination include kuler.adobe.com and ColorJack, among others.

[operator]

Good info. Thank you!

[stikkybubble]

good info: explained the concept without getting hung up on the tools.

[Black Max]

Great tutorial, very useful for the color-ignorant like myself.

Surfing off of Tekime's link, I found this neat little Flash color scheme generator:

http://www.colortoy.net/

[joebert]

I think that's the first time I've ever heard of grayscaling colors while selecting a colorscheme like that. I'm tempted to add a swatch column for the grayscale version of each color in the selection history of my colorpicker now.

[KnightDaemon]

Be sure to pick a good and balanced picture to start with, they do not have to be yours. See Corbis for good pictures.

As Florent V. mentioned earlier in the thread, Adobe Kuler is a good utility to visualize your colors and play with them.

Another advice taken from B&W photography, there should be no pure white or pure blacks.

[mmj]

This is a pretty cool tip - it can be very good for suggesting sets of more subtle, mid-tones rather than highly saturated bright colours. It can be surprisingly hard to pick some nice muted colours in things like the colour picker in Photoshop, as they are always shown next to bright, saturated colours (unless you select the "S" radio button), which don't flatter them.

Adobe Kuler looks pretty cool too.

[praveen100]

Good one Datura

[C. Ankerstjerne]

I strongly recommend http://colorschemedesigner.com/, which allows a vast multitude of combinations. I'm still finding new settings to play with

[AlexDawson]

I use the product Color Schemer Studio to help with color palette picking, it’s a fantastic product and I use it on a daily basis, it also has some functionality to help choose colors for people with various types of color blindness which is also useful.

[Nigel Lew]

Great tutorial! Nicely done,

Nigel

[samanime]

This is a great tutorial. I'm actually teaching web design at a technology camp this summer. I'll be sure to show them this tutorial when we are going over color theory and the like. Thanks.

[MBScott]

Recently, I found

http://colourlovers.com

Excellent site for finding good color schemes.

[samanime]

I think it's important that you learn how to get a hang on selecting your own color palettes. It's okay to use color scheme generators and libraries at first, but you should work towards learning to select your own color scheme so it can suit your needs more exactly.

Also, the part I really loved about this short tutorial that I forgot to mention was the part about looking at them desaturated (gray). So often, that is something overlooked by a lot of tutorials and even more often by people selecting colors to use.

[cam_joo]

Nice tute, thanks Datura. I think you said some things about colours in a different way than usual and I found it very helpful.

One colour selecting tool I like is Color Wheel Pro. Few years ago there was only a few sites/tools to choose from compared to now. I did try the trial and found it useful and fun almost. Might buy it one day. There is a little bit of info here about colour selection theory:

color-wheel-pro(dot)com/color-theory-basics.html

Datura I think you should keep the tutes at basic level. Advanced users can skim over the fine details like tools and buttons to select and beginners can learn a bucket load in a short time.

Thanks again for the tute, loved it.

[ParkinT]

Brilliant Datura.
I am a 'developer' (master of multiple programming languages) but cannot put two colors together that don't look like a bad 1970's movie.
Your guidance and advice takes a lot of the mystery out of the design process for me.