I ran across this article about how to figure out a color scheme for a webpage, written by PackT publishing.
–Angie
Color Schemes
Now that the general layout is hammered down, we’re ready to move onto more exciting design elements.
You’ll want a predefined palette of three to ten colors arranged in a hierarchy from most prominent to least. I like to create a simple text file which lists the colors’ hex values and then add my own comments for each color and how I plan to use it in the theme. This makes it easy for me to add the colors to my CSS file and then later to my Photoshop document as I create graphic interface elements.
Color schemes are the hardest thing to start pulling together. Designers who have years of color theory under their belt still dread coming up with the eye-catching color palettes. But the fact is, color is the first thing people will notice about your site and it’s the first thing that will help them not notice that it is just another WordPress site (especially if you’re taking the ‘Simplicity’ route and modifying an existing theme).
Two-Minute Color Schemes
When it comes to color schemes, I say, don’t sweat it. Mother nature, or at the very least, someone else, already created some of the best color schemes for us. Sure, you can just look at another site or blog you like and see how they handled their color scheme, but it’s hard to look at someone else’s design and not be influenced by more than just their color scheme.
For those intent on an original design, here’s my color scheme trick: If your site will be displaying a prominent, permanent graphic or picture (most likely in the header image), start with that. If not, go through your digital photos or peruse a stock photography site and just look for pictures which appeal to you most.
Look through the photos quickly. The smaller the thumbnails the better, content is irrelevant! Just let the photo’s color hit you. Notice what you like and don’t like (or what your client will like, or what suits the project best, etc.), strictly in terms of color.
Color Schemes with Photoshop
Pick one or two images which strike you and drop them into Photoshop. A thumbnail is fine in a pinch, but you’ll probably want an image a bit bigger than the thumbnail. Don’t use photos with a watermark as the watermark will affect the palette output.
Lose the watermark: Most stock sites have a watermark and there’s nothing you can do about that. You can create a free login on gettyimages’s photodisc (http://Photodisc.com). Once logged in, the watermark is removed from the comp images preview which is about 510 pixels by 330 pixels at 72dpi, perfect for sampling a color palette.
The watermark free image is for reference and mockups only. We won’t be using the actual images, just sampling our color palettes from them. If you do end up wanting to use one of these images in your site design or for any project, you must purchase the royalty free rights (royalty free means once you buy them, you can use them over and over wherever you want) or purchase and follow the licensing terms provided by gettyimages’s LTD for rights-managed images. (Rights-managed images usually have restrictions on where you can use the image, how long it can be on a website, and/or how many prints you can make of the image.)
Once you have an image with colors you like, opened up in Photoshop, go to Filter | Pixelate | Moziac and use the filter to render the image into huge pixels. The larger the cell size, the fewer colors you have to deal with, but unfortunately, the more muted the colors become.
I find that a cell size of 50 to 100 for a 72 dpi web image is sufficient (you might need a larger cell size if your photo is of high-resolution). It will give you a nice, deep color range and yet, few enough swatches to easily pick five to ten for your site’s color scheme. The best part, if you liked the image in the first place, then any of these color swatches will go together and look great! Instant color scheme!
Once the image has been treated with the mosaic filter, just pick up the eyedropper to select your favorite colors. Double-clicking the foreground palette in the tool bar will open up a dialog box and you’ll be able to ‘copy and paste’ the hex number from there into your text file.
Keep track of this text file! Again, it will come in handy when you’re ready to paste items into your style.css sheet and create graphic interface elements in Photoshop.
-by PackT Publishing
I was surfing around the Net when I stumbled upon an article that caused me to roll my eyes. Apparently a man in Russia has trademarked the winking smiley - 
.
- in the United States as a joke, or perhaps as a way to point out flaws in the US patent and trademark system. A few press outlets back then picked up the story and generated some good press coverage for Despair.
Previous
