Friends:

I am generally design-challenged and color-challenged, but I like the way the look and feel of this simple site turned out. I’d like to use a similar look and feel for some other sites I’m working on.

I’m in the process of putting together a procedure for duplicating the site (install EE, create basic graphics, duplicate templates, etc., etc.).

You’ll notice that the above-referenced site has only one basic color - blue, with different shades of blue used for different elements of the site. For the next site I’m going to create, I want to use a different color scheme.

What I would like to do is start with a graphic for the large banner and then pick a complementary color for the title of the site (the “Frank N. Johnson” part in the above-referenced site). From there, I want to be able to quickly identify the other shades of that same color which would correspond to the different shades of blue on the above-referenced site. So for example, if I choose a dark maroon color for the title of the site, I might want a very light shade of pink perhaps for the background of the search box.

Make sense?

Can anyone think of a way to start with one color and then quickly arrive at the other necessary shades?

Thanks in advance for any help anyone can offer - I really appreciate it.

Frank

FrankJohnson - 28 December 2008 01:58 PM

Can anyone think of a way to start with one color and then quickly arrive at the other necessary shades?

Where to start?

I am totally design challenged and rely on a modicum of good taste and bookmarks to other sites who can help fill in my blank talent spaces.

Do a little Googling on “web site color schemes” and you’ll come up with this, this, and this, and many more.

If you’re a Mac user I highly recommend Color Schemer and Shades. I’m sure there are plenty of similar tools for Windows users, and others that are web based.

Thanks for the quick response, RonnieMc. I’ve seen those before, but it’s not quite what I’m looking for.

On the site I referenced, I have this color scheme:

masthead = #003399
search box background = #ecfaff
calendar box header = #003399
article background = #ecfaff
subscribe buttons = #1268cd
sidebar headings base color = #1268cd
article footer background = #1268cd
article title = #1268cd
article title rollover = #000066
article footer rollover = #66ccff
calendar heading bar = #003399
calendar day header = #6699cc
contact me page buttons = #1268cd

I consider the masthead color (#003399) to be the base color in the color scheme. If I change the base color to #7e0804, what will the other color values become if the mathematical relationship between the masthead color and the other color values remains the same (assuming that there is a mathematical relationship).

Does that make sense?

I don’t think the online color wheels will help me because I believe they have set combinations. I’m wanting to be able to quickly adjust the color combination I already have (which isn’t going to be part of a color wheel).

Thanks,
Frank

Whew. There is a relationship between the colors and related shades, which is why I use “Shades” on my Mac. I don’t think you can apply a mathematical relationship of shades between non-related colors, but I could be very wrong (which is why I prefer to use utilities that provide some direction). It seems to me that the other color values cannot change appropriately unless they’re related using complements, split-complements, triads, tetrads, analogous, or monocrhomatic, etc. In other words, you’d have to start with a base color for whatever element, then use colors from the above (complements, split, triads, tetrads, etc) for other elements, then change the base—supposedly the other elements would change in harmony with the changed base. I do that kind of thing all the time but still requires the utilities for color harmony. Maybe there’s a simple ‘math tool’ that does the same thing in hex.

I was just playing with some things trying to line up colors for a site I’m working on and found something that might be of interest to you in developing a color schema:

VisiBone Webmaster’s Color Lab

Since colors on a monitor appear to change slightly when placed next to other colors, you can play with it to select the combination that works best for you.  One thing to note though, colors on a mac are sometimes render differently than on a window’s platform do to their gamma curves.

Hope this is useful.

I stopped using the 216 color palette years ago. Almost every PC and Mac can handle millions of colors these days.

If you have Photoshop, you can plop all those colors on a blank image and use the Image->Adjustments->Hue/Saturation dialog to get the results you want VERY quickly!

You could also try Kuler

Cheers

Dry

jejuna - 29 December 2008 07:17 PM

If you have Photoshop, you can plop all those colors on a blank image and use the Image->Adjustments->Hue/Saturation dialog to get the results you want VERY quickly!

How does Photoshop translate those to hex values for a CSS file?

RonnieMc - 29 December 2008 08:03 PM

jejuna - 29 December 2008 07:17 PM

If you have Photoshop, you can plop all those colors on a blank image and use the Image->Adjustments->Hue/Saturation dialog to get the results you want VERY quickly!

How does Photoshop translate those to hex values for a CSS file?

If you use the dropper tool to sample the color and then look inside the color palette, it tells you the hex value that you can then copy/paste into the CSS file.

Arun S. - 30 December 2008 09:09 AM

If you use the dropper tool to sample the color and then look inside the color palette, it tells you the hex value that you can then copy/paste into the CSS file.

The problem I have with that method is that it goes against the grain of “Quickly Adjusting A Color Scheme.” The objective seemed to be to determine a quick, if not automated, way to adjust color schemes.

On any given site I have perhaps half a dozen different colors, give or take two or three, so manually sampling colors and listing hex values isn’t much of a pain.

Still, it would be nice to start with a base color, add complementary colors, then have some kind of way to tweak the base color and have the complementary colors automatically adjusted accordingly.

Here is a good PSDTUTS article about using different themes for the same layout.

http://psdtuts.com/tutorials/interface-tutorials/five-looks-one-layout-how-to-develop-a-library-of-web-design-styles-at-your-fingertips/