MetalSoftware, Inc.

Web Design Guide – Part 1: Great Colors in 3 Simple Steps

Need a color scheme for your site? Don’t fret. Let a photo be your inspiration.

You can generate great colors fast using digital photos.

If you’re on a life-or-death deadline… skip to “Bah! I’m too busy!”

Still up for it? Great! Here’s how:

Step 1: Find some inspiration
You can use your own stock photo collection or visit some of these websites to find some reference photos to get your colors…
istockphoto.com
shutterstock.com
flickr.com

Find a photo that appeals to you or the “mood” you’re trying to create at your site. For example, if you’re in real estate, you might choose some dramatic photos of your area.

Step 2: Extract some color
The most simple way to do this is to use a program designed for it.

Free and paid programs for Mac or Windows can be found here: www.colorschemer.com
Or, if you’re already a Photoshop guru, you know the drill.

You’ll need to use the color picker portion of whichever program you’ve chosen to extract the color values from the photo.
For example, if you’re on Windows and using the free Color Schemer ColorPix, you’ll have all the different color value schemes you’ll need (RGB, HEX, HSB, CMYK).

It’s best to start with one main color then use it in Step 3 below making the variations for that color, then come back to Step 2 before moving on to a new color.

Starting with the main color, and for each subsequent color, make a note of each RGB and HEX value.

Step 3: Mix and match
If you have a paid version of Color Schemer above, you can create your color palette from within the program.

If you’re using a free version, you can use the RGB and HEX code color values you saved to create your color scheme at these free generator sites:
http://www.colorblender.com/
http://kuler.adobe.com/
http://colorschemedesigner.com/

Bah! I’m too busy!…
If you’re out of ideas or don’t have the time to do any of this, you can always skip right to a finished color scheme by browsing some of the ones created at any of these sites:
http://www.colourlovers.com/
http://www.colorschemer.com/schemes/

Note from the legal department: It’s fine to use a photo for color scheme inspiration. However, you’ll get into trouble if you actually put a photo on your web site that you don’t have the rights to use. When in doubt, take your own or stick to royalty free images.