For the designers: Choosing colors?

[DisgruntledOrangatang]

Been way too long since I made a post here! Lawlz.

How do you designers out there choose good colors?

There are two approaches, complimentary and contrasting sure. I know like go to the opposite side of the color wheel and all that. And Web 2.0 styles changed that up a bit with adding bright accent colors. But lets say you are given two colors to make a site out of, and you need to come up with 2 more that look good with the already chosen 2. How do you go about doing this? BESIDES trial and error obviously. There has got to be some sort of logic process to follow. Like I know when you want to design something that involves pictures, you pull colors from that picture and maybe adjust the brightness but that gives it a nice aesthetic. Right now I just randomly spent 5 minutes choosing any old color in Photoshop until I get something I think looks good.

The problem with me is that I have found in my experience , unless I can choose every single color, if I am given colors to start with, the following colors I choose that I think look good, many times other people do not. But if I can choose all the colors, 95% of the time everyone else thinks it looks good to. Not sure why but it kinda annoys me.

For instance, what 2 colors would match well with 6e8bbf (110/139/191) and ef8a1c (239/138/128)?

[lendarios]

Blue.

You can never go wrong with blue

[DisgruntledOrangatang]

Did you see those colors!? One is already blue!!!

[Screamfeeder]

I'll give you the answer I give students.

It depends.

It depends on how prominent the primary and secondary colors are.
It depends on who the project is being marketed to.
It depends on the style guide that is set forth by whatever creative directors.
It depends on what those colors(and the new ones) are actually on.

I know that's a cop out, but the entire basis behind color theory is so abstract, that anyone that tries to come out and give a definitive answer is going to have 100 other designers beating down their door on why they are wrong.

This is what I would recommend. Take those two colors and develop two new ones off each one so you end up with 6 total. Make each new color a variation of the hue and chroma of the primary depending on the list of "depends" I gave earlier.

For example, your two colors are light and fairly pastel. Given that one is a light blue and the other a light orange pink, I am going to just take a random guess that it has something to do with babies(no idea).

Based on that information I want to stay away from strong, forceful colors and stick with natural pastels.

This is what I came up with based on those metrics. It's quick, dirty and might be the complete opposite of what you need but this is usually my first approach. If this way is no go then I go right into traditional color theory using Newton or even split primary.

[Alcestis]

EF8A1C is not 239/138/128, but 239/138/28. There's a superfluous "1" in your B value, for some reason.

When given a specific hex, I usually plug it into this site and tinker with the settings. It's a nice tool for when you're feeling particularly artistic, and it appears to fit it quite nicely with your "I need two more colors!" plight. Unfortunately, I haven't found a faster way than running around the color wheel for two explicit hexes together yet - besides finding complimentary colors for each of the colors separately (in a site like the above), then mashing them all together and narrowing it down that way. Still a bit of trial and error there.

Bah to all of it, though. Needs more employers who say "Do what looks good" (and effectively give an excuse to browse Kuler), rather than give exact RGBs to be used.

[DisgruntledOrangatang]

Yes thanks for catching that typo ><

Thanks Scream for giving me that breakdown helpful, and also /agree Alcestic and HOLY SHIT thanks for those two links they are super kickass.

[Lenas]

kuler = awesome.

[Horse]

there are lots of books that just show color combinations.
Amazon.com: The Designer's Toolkit - 1000 Colors: Thousands of Color Combinations (9780811863056): Graham Davis: Books is one of them. The prob I have with websites is that they don't let you look at a lot of combinatiosn at once. The swatch books that are good will show a "root" color with like 40 sets of 5 based around it that roughly describe them. Like kuler but with a lot more visible at once. Imagine choosing XYZ for rgb values and then seeing every pattern around it. Don't know why kuler doesn't let you choose a color and find all themes that use it... maybe i'm missing something.


another method is to take a photograph /poster/whatev you like and sample colors out of it. There are programs that will abstract a photograph down to a few colors.


I taught color theory at the bauhaus and the top secret rule of thumb was if it doesn't work make it bigger, if that still doesn't work make it red

[Alcestis]

Originally Posted by Horse

Don't know why kuler doesn't let you choose a color and find all themes that use it

It does - just plug the hex into the Search box on the left, sans pound sign. Here's one for DO's blue.

Kuler is awesome (like Lenas said) but the caveat is, of course, that you have to rely on user submissions for that exact hex. Couldn't find one for that orange-ish color, for instance. Limits a lot.

[Fedor]

Color Scheme Designer 3

[DisgruntledOrangatang]

Perhaps I am being a retard with the colorschemedesigner site, but how can I have it select two colors to make a good scheme on? Selecting a color then changing the other ones just manually overwrites it but doesn't change the scheme. I seem to be able to only select 1 color and make matches, or is this the problem you exactly described in your mention of the site Alcestis?

If so ...QQ.

[Alcestis]

It is. Sorry.

[ToeMissile]

ColorSchemer | Instant Color Schemes is, from a quick glance, basically the same as kuler. It's color picker tools aren't as robust, but it has a pretty solid library (easier to navigate/search imo) of user submitted sets/schemes and they aren't limited to 5 colors. Worth taking a look at at least.

[Mixtilplix]

Aviary.com is an awesome site with a flash based color picker(toucan). Might also want to check out their other flash based apps they have on the site. BTW they are all free to use. You can even upload an image into their color picker.

[wild_whiskey]

I don't really think sticking with Complementary or Tertiary colors is necessarily the best plan. What that creates is too much ocular tension and it becomes uncomfortable to look at.

What I'd recommend is deciding what you want your primary color to be - this should come mostly conceptually. For example, if you want something that exemplifies calmness, light shades of blue, and of course white would be suitable colors. From there, decide a secondary color that you think would feel right, and pull up a Panton color palette and just put the two colors next to each other, cycling through various hues and shades of the secondary color.

You can have orange and blue (complementary colors), so long as its not pure blue and pure orange, unless of course you're designing for a college or sports team that has these colors already set. For example, Underware uses a reddish-tinted orange and a cool, blue-tinted grey, as well as a bright magenta for their designs, which I think do a great job communicating their bottom line as a quirky Scandinavian font foundry.

The problem with sites like Kuler (and the books that try to tell you the best color schemes) is that most of those color schemes came from people who were designing something with a purpose in mind. The colors may transfer over to your project, but the purpose does not (also, to get the exact hex, just take a screen cap of the colors you like and use the eye dropper tool in Photoshop). A lot of them are also explorations of color communicating meaning by itself (for example, the associations with, say, communism, that you get from red and olive green/grey) and don't have any attachment to the meaning of your project.

Hope this makes sense...

BTW if you're using Illustrator, that built-in color program lets you change the scheme on the fly completely and is a good tool to see if what you have on a swatch is going to look good in the final comp...