设计色彩理论：Part 1、色彩的意义（1）
Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.
在设计中色彩是比较主观的，同一色彩对不同人所产生的感受也是不同的。有时这归咎于个人的偏好，有时归咎于文化背景。色彩理论本事是门科学。研究不同的色彩对个人或团体所产生的不同影响已经是某些人的职业领域。研究色彩有大量的工作要做，比如简单的调整色调或饱和度会引起的完全不同的感觉；文化背景的不同意味着同一种颜色在一个国家代表着快乐和高昂，而在另一个国家则相反。
This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs.
此设计色彩理论总共为三篇，本文为第一篇，在此我们将探讨隐含在不同色系背后的意义，然后逐一举例说明不同色彩的运用方法。在第二篇我们将讨论色调、色彩浓度、色值、饱和度等如何影响我们观察色彩。第三遍我们将讨论如何为我们的设计创造有力的色彩组合。
Warm Colors
暖色系
Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.
Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.
暖色系包括红色、橙色、黄色和这三种颜色的变化色。这些颜色像火焰、落叶、朝霞或晚夕，它们充满了能量，激情并积极向上。
红色和黄色同为基础颜色，橙色是两者的混合，这就意味着暖色系都是暖色而没有混合任一种冷色。在你的设计中运用暖色系会呈现出激情，欢乐，热情和能量。
RED (PRIMARY COLOR)
红色（基础色/原色）
Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.
红色是非常热烈的色彩。它能让人联想到火，暴力和战争，还有爱情和激情。在历史上，它同与魔鬼和丘比特相联系。实际上，红色能对人产生身理影响，如升高血压和加快呼吸速率。它也被证实能加快人体代谢。
Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).
红色与危险相联系，但它又表示重要性（请想下名人走秀和颁奖典礼时的红地毯）。红色同时指示着危险，比如表示停止或禁止的灯和标识，带着强烈警告意义的标签。
Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.
在非西方国家，红色有着全然不同的联想。比如在中国，红色是代表繁荣和幸福的颜色，它能招来幸运。在其它东方文化中，婚礼时新人要穿戴红色。然而在南非，红色是悼念时的颜色。红色还与共产主义相联系。在非洲，由于【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.
在设计中，红色是极具力量的重要颜色。如果在设计中运用红色，它会产生极富压倒性的影响，尤其是运用最纯正的红色。若想在设计中去描绘力量或激情，那么红色是最强有力的。然而，红色是非常多才多艺的，亮色的红更具活力，暗色的红则更具力量，更优雅。
Examples
The dark shades of red in this design give a powerful and elegant feel to the site.
在此设计中，暗红色的阴影给网站增添了有力和优雅的感觉。
The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.
The very bright red accents on this site give a sense of energy and movement.
The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.
ORANGE (SECONDARY COLOR)
Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.
Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
Examples
The bright orange box draws attention to its contents, even with the other bright red elements on the page.
Orange is used here in its most obvious incarnation, to represent fire.
The dark orange, when set against the lime green, almost acts as a neutral and grounding color here.
Orange is used here to give a friendly and inviting impression.
The orange accents here add a lot of visual interest and bring attention to the call to action.
YELLOW (PRIMARY COLOR)
Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).
Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.
In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.
In your designs, 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.
Examples
The bright yellow header and graphics used throughout this site give a sense of energy and positivity.
The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impresison.
The bright yellow accents bring attention to the most important parts of this site.
The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.
The bright yellow header here adds a bit of extra energy to this design.
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.
Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.
GREEN (SECONDARY COLOR)
Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.
Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, 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.
Examples
The extremely muted greens of this site give it a very down-to-earth and natural feeling.
The bright green header of this site mixed with the leaf motif gives it a very natural and vibrant feeling.
The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.
The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.
Another olive green site with a very natural feeling.
BLUE (PRIMARY COLOR)
Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and hue. In design, 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.
Examples
The dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.
The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.
The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.
This site combines a range of blues, which gives it a refreshing feeling overall.
The light, muted blue of this site gives a very relaxed and calm impression.
PURPLE (SECONDARY COLOR)
Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.
In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.
In design, dark purples can give a sense 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.
The light and medium purples here work well to convey a sense of creativity.
The brighter, more reddish purple of this site gives it both a rich and energetic look.
The dark purple background here adds to the creative feeling of the overall site.
The dark purple accents on this site give a sense of luxury and refinement.
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 the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.
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.
Examples
The black accents, mixed with the brighter colors and very dark brown background add an edgier look to the overall design.
Black, when mixed with icy blues, looks colder.
The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.
The black accents here add an extra layer of sophistication and modernity to the site.
The strong black accents on this site add to the overall sophistication of the design.
WHITE
White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in 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.
Examples
The white on the Fuelhaus site is used to contrast against the electric blue.
White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.
Here, white is used as an accent color, which lightens the overall effect of the site.
White combined with gray gives a soft and clean feeling to this design.
Again, white used as a background lightens the whole design.
GRAY
Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.
Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.
Examples
Light gray gives a very subdued and quiet feeling to this design.
The light gray background here adds to the modern feeling created by the typography.
The cooler gray on this site gives a modern, sophisticated feel to the site.
The dark gray backround and lighter gray typography lend a decidedly modern look to this design.
The wide spectrum of gray shades used in this design combine to give a sophisticated and professional look to the site.
BROWN
Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.
In design, 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.
Examples
The grayish-brown here lends a sense of responsibility and dependability.
The orangish-brown here gives a very earthy and dependable feeling.
The dark brown used in the background here lends an earthy and steadfast look to the overall layout, and lets the brigher colors in the design really get to stand out.
Woodgrain is a popular use of brown, and in this case the warm brown adds some friendliness to an otherwise minimalist site.
The grayish-brown background here lends a feeling of stability and down-to-earthness.
BEIGE AND TAN
Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.
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.
Examples
The light tan background here feels young and fresh because of the bright colors around it.
The light tan background here lends a more conservative and elegant feeling to the overall design.
The yellowish tan background is made even warmer by the orange and brown accents throughout this site’s design.
Tan is popularly used as a paper-bag texture, and in its more grayish form as a concrete or stone texture.
The beige header background and other accents on the site lend a refined and traditional feeling to the overall design.
在设计中色彩是比较主观的，同一色彩对不同人所产生的感受也是不同的。有时这归咎于个人的偏好，有时归咎于文化背景。色彩理论本事是门科学。研究不同的色彩对个人或团体所产生的不同影响已经是某些人的职业领域。研究色彩有大量的工作要做，比如简单的调整色调或饱和度会引起的完全不同的感觉；文化背景的不同意味着同一种颜色在一个国家代表着快乐和高昂，而在另一个国家则相反。
 |
This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs.
此设计色彩理论总共为三篇，本文为第一篇，在此我们将探讨隐含在不同色系背后的意义，然后逐一举例说明不同色彩的运用方法。在第二篇我们将讨论色调、色彩浓度、色值、饱和度等如何影响我们观察色彩。第三遍我们将讨论如何为我们的设计创造有力的色彩组合。
Warm Colors
暖色系
 |
Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.
Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.
暖色系包括红色、橙色、黄色和这三种颜色的变化色。这些颜色像火焰、落叶、朝霞或晚夕，它们充满了能量，激情并积极向上。
红色和黄色同为基础颜色，橙色是两者的混合，这就意味着暖色系都是暖色而没有混合任一种冷色。在你的设计中运用暖色系会呈现出激情，欢乐，热情和能量。
RED (PRIMARY COLOR)
红色（基础色/原色）
 |
Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.
红色是非常热烈的色彩。它能让人联想到火，暴力和战争，还有爱情和激情。在历史上，它同与魔鬼和丘比特相联系。实际上，红色能对人产生身理影响，如升高血压和加快呼吸速率。它也被证实能加快人体代谢。
Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).
红色与危险相联系，但它又表示重要性（请想下名人走秀和颁奖典礼时的红地毯）。红色同时指示着危险，比如表示停止或禁止的灯和标识，带着强烈警告意义的标签。
Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.
在非西方国家，红色有着全然不同的联想。比如在中国，红色是代表繁荣和幸福的颜色，它能招来幸运。在其它东方文化中，婚礼时新人要穿戴红色。然而在南非，红色是悼念时的颜色。红色还与共产主义相联系。在非洲，由于【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.
在设计中，红色是极具力量的重要颜色。如果在设计中运用红色，它会产生极富压倒性的影响，尤其是运用最纯正的红色。若想在设计中去描绘力量或激情，那么红色是最强有力的。然而，红色是非常多才多艺的，亮色的红更具活力，暗色的红则更具力量，更优雅。
Examples
 |
The dark shades of red in this design give a powerful and elegant feel to the site.
在此设计中，暗红色的阴影给网站增添了有力和优雅的感觉。
 |
The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.
 |
The very bright red accents on this site give a sense of energy and movement.
 |
The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.
 |
ORANGE (SECONDARY COLOR)
 |
Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.
Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
Examples
 |
The bright orange box draws attention to its contents, even with the other bright red elements on the page.
 |
Orange is used here in its most obvious incarnation, to represent fire.
 |
The dark orange, when set against the lime green, almost acts as a neutral and grounding color here.
 |
Orange is used here to give a friendly and inviting impression.
 |
The orange accents here add a lot of visual interest and bring attention to the call to action.
YELLOW (PRIMARY COLOR)
 |
Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).
Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.
In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.
In your designs, 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.
Examples
 |
The bright yellow header and graphics used throughout this site give a sense of energy and positivity.
 |
The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impresison.
 |
The bright yellow accents bring attention to the most important parts of this site.
 |
The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.
 |
The bright yellow header here adds a bit of extra energy to this design.
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.
Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.
GREEN (SECONDARY COLOR)
 |
Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.
Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, 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.
Examples
 |
The extremely muted greens of this site give it a very down-to-earth and natural feeling.
 |
The bright green header of this site mixed with the leaf motif gives it a very natural and vibrant feeling.
 |
The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.
 |
The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.
 |
Another olive green site with a very natural feeling.
BLUE (PRIMARY COLOR)
 |
Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and hue. In design, 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.
Examples
 |
The dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.
 |
The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.
 |
The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.
 |
This site combines a range of blues, which gives it a refreshing feeling overall.
 |
The light, muted blue of this site gives a very relaxed and calm impression.
PURPLE (SECONDARY COLOR)
 |
Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.
In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.
In design, dark purples can give a sense 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.
 |
The light and medium purples here work well to convey a sense of creativity.
 |
The brighter, more reddish purple of this site gives it both a rich and energetic look.
 |
The dark purple background here adds to the creative feeling of the overall site.
 |
The dark purple accents on this site give a sense of luxury and refinement.
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 the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.
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.
Examples
 |
The black accents, mixed with the brighter colors and very dark brown background add an edgier look to the overall design.
 |
Black, when mixed with icy blues, looks colder.
 |
The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.
 |
The black accents here add an extra layer of sophistication and modernity to the site.
 |
The strong black accents on this site add to the overall sophistication of the design.
WHITE
White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in 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.
Examples
 |
The white on the Fuelhaus site is used to contrast against the electric blue.
 |
White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.
 |
Here, white is used as an accent color, which lightens the overall effect of the site.
 |
White combined with gray gives a soft and clean feeling to this design.
 |
Again, white used as a background lightens the whole design.
GRAY
 |
Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.
Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.
Examples
 |
Light gray gives a very subdued and quiet feeling to this design.
 |
The light gray background here adds to the modern feeling created by the typography.
 |
The cooler gray on this site gives a modern, sophisticated feel to the site.
 |
The dark gray backround and lighter gray typography lend a decidedly modern look to this design.
 |
The wide spectrum of gray shades used in this design combine to give a sophisticated and professional look to the site.
BROWN
 |
Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.
In design, 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.
Examples
 |
The grayish-brown here lends a sense of responsibility and dependability.
 |
The orangish-brown here gives a very earthy and dependable feeling.
 |
The dark brown used in the background here lends an earthy and steadfast look to the overall layout, and lets the brigher colors in the design really get to stand out.
 |
Woodgrain is a popular use of brown, and in this case the warm brown adds some friendliness to an otherwise minimalist site.
 |
The grayish-brown background here lends a feeling of stability and down-to-earthness.
BEIGE AND TAN
 |
Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.
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.
Examples
 |
The light tan background here feels young and fresh because of the bright colors around it.
 |
The light tan background here lends a more conservative and elegant feeling to the overall design.
 |
The yellowish tan background is made even warmer by the orange and brown accents throughout this site’s design.
 |
Tan is popularly used as a paper-bag texture, and in its more grayish form as a concrete or stone texture.
 |
The beige header background and other accents on the site lend a refined and traditional feeling to the overall design.
