This article from Cameron Chapman of SmashingMagazine.com explains the theory behind the different color families, with examples & analysis of how these colors are used on different website designs. Summarized below, colors are categorized by Warm, Cool and Neutrals, with subcategories by specific colors. Not just for web designers, color theory can be used by clients to determine their own branding and message they aim to send through their online presence.

This article from Cameron Chapman of SmashingMagazine.com explains the theory behind the different color families, with examples & analysis of how these colors are used on different website designs. Summarized below, colors are categorized by Warm, Cool and Neutrals, with subcategories by specific colors. Not just for web designers, color theory can be used by clients to determine their own branding and message they aim to send through their online presence.

Warm Colors

Warm colors include red, orange, and yellow and variations of those three colors. These are the colors of fire, fall leaves, sunsets and sunrises, and are generally energizing, passionate and positive. Use warm colors in your designs to reflect passion, happiness, enthusiasm and energy.

Red

In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.

The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.

Orange

Orange commands attention in design without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.

The bright orange box draws attention to its contents, even with the other bright red elements on the page.

Yellow

Bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children.

Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.

The bright yellow header and graphics used throughout this site give a sense of energy and positivity.

Cool Colors

Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing and somewhat reserved. Use cool colors in your designs to give a sense of calm or professionalism.

Green

Green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.

The extremely muted greens of this site give it a very down-to-earth and natural feeling.

Blue

The exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.

The light, muted blue of this site gives a very relaxed and calm impression.

Purple

Dark purples can give a sense of wealth and luxury. Light purples are softer and are associated with spring and romance.

The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.

Neutrals

Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.

Black

Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.

The strong black accents on this site add to the overall sophistication of the design.

White

In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.

White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.

Gray

Gray is generally conservative and formal, but can also be modern. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. In design, gray backgrounds are very common, as is gray typography.

The grayish-brown here lends a sense of responsibility and dependability.

Brown

Brown is commonly used as a background color. It’s also seen in wood textures and sometimes in stone textures. It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in its darkest forms as a replacement for black, either in backgrounds or typography.

The orangish-brown here gives a very earthy and dependable feeling.

Beige & Tan

Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will take on the characteristics of colors around it, meaning it has little effect in itself on the final impression a design gives when used with other colors.

The beige header background and other accents on the site lend a refined and traditional feeling to the overall design.

Cream & Ivory

Ivory can lend a sense of elegance and calm to a site. When combined with earthy colors like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colors, without the stark contrast of using white.

The grayish-cream background here is made warmer by the orangish-brown accents.