BestWeb Nashville

Choosing a Color Scheme

Nashville Web Design

color schemes - nashville web design

NOTE: See also our collection of color resources.

Here are some simple, quick, concise instructions that should be helpful in coming up with a color scheme for a new website design.

My single favorite resource for help in coming up with a color palette for a new website is the Color Scheme Designer.

There are several ways to use Color Scheme Designer to come up with an appealing color scheme.

  1. You can click anywhere within the color wheel to select a color. Then change the setting (above the color wheel) from "mono" to "tetrad" so you will get an array of complementary colors (as opposed to just various shades of a single color). Keep clicking away until you find a set of colors that strikes you.

  2. If you need to find a color scheme that matches or complements a specific color: click on RGB to the lower right of the color wheel, then enter the hex or RGB code (#xxxxxx) of the color you want to match. If we need to match the website colors to a given logo color, for example, this would be the way to go.

  3. You could also keep generating color schemes at random until you find one you really like. To do this, use the menu item at the upper right of the screen: just click Random - Randomize Palette over and over. This is a fast way to look at dozens of schemes.

Let's say you'd prefer to see swatches of hundreds of colors so that you could choose a few to use as starting points. This would be useful if you had a few color ideas you'd like to explore (e.g., as Kim mentioned: red, hunter green, gold, royal blue, and so on…). Just visit the Somacon CSS Color Chart; scroll down to see a wide range of colors. Note the hex codes (#xxxxxx) of the colors you want to try, then return to Color Scheme Designer and use method #2 above.

Finally, if you already have an image (eg., a logo)to which you need to match a new color palette but are unsure of the hex codes of the image's colors, there are some tools you can use to determine those hex color codes. The first option is to download and install a color tool called ColorPix, which you can find on the ColorSchemer.com website. Secondly, if you use the Mozilla Firefox browser, you can install an Add-on called ColorZilla. This gives you a little eyedropper which shows you the hex color code when you roll over the color.

Here is a list of free online color tools I like to use:

http://bestwebnashville.com/resources_color_tools.php