More Color Psychology & Examples
- Hue: what color something is, like blue or red
- Chrome: how pure a color is, the lack of white, black or gray added to it
- Saturation: the strength or weakness of a color
- Value: how light or dark a color is
- Tone:created by adding gray to a pure hue
- Shade: created by adding black to a pure hue
- Tint:created by adding white to a hue
The following text is adapted from
Cameron Chapman at Smashing Magazine, and further elaborates on color psychology, and provides examples from other websites.
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 (making it a secondary color), 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 warning labels are often 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. 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 bright red of the illustration on the homepage of
Nacache Design's site
gives the page a ton of energy and vibrancy.
This sneaker website has a white background with black text
for the headers and the main menu. There is a faded grey
picture of sneakers in the background that is centered and
blends in with the white background. In front of the
rectangular picture there is big text that reads
'Sneakit' in black, which has good contrast
against the light background and makes the letters very
legible. The website also contains a big image of a red shoe
in the center, which works as a point of visual emphasis for
users because it is the only element with an accent color.
The use of grayscale + black and white + only one accent
color (red) is a good strategy to ensure that all colors
combine well together and the accent color is used to call
the user's attention while visiting the website.
The muted red on the Startup Lab website is
energetic without being aggressive.
This website uses mostly black, white and grey - with a
white background. In this example, an orange-red accent
color is used for multiple elements throughout the website
and it helps give consistency and different visual emphasis
points. There are three squares overlaid. Two of the squares
are gray (one lighter than the other) and the other bigger
square is red (bright pink-ish red). Each square has black
titles written on them with all caps. The logo of the
company reads 'Start Up Lab' and displays in the
top left corner in the same red color as the colored square.
The menu icon in the top right corner of the screen is also
in the same red. The use of white background and different
shades of gray combined with one accent color used in a
bigger element clearly indicates that the intention of the
website is for the users to click on the bigger red square
because that is where the most important information is
contained. The use of the accent color goes hand by hand
with the intention of the website.
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. Orange is also strongly associated with creativity. 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.
The Milk Street food website has an off white background and light grey border. The top navigation menu is composed of dark grey text elements that change to red-ish orange on focus. In the center of the elements of the menu the logo of the website is displayed. The logo is composed of dark grey text that reads “Milk Street” and below an orange text that reads “Change the way you cook”. There is a dark grey line that divides the main menu from a secondary menu. The search box for recipes, has a yellow-orange outline and no fill (this means the inside of the box is grey like the background). The use of the red-orange and yellow-orange is very important for this website because since it is a warm color, it makes food look more attractive. It is important to notice that since this website is loaded with multiple navigation levels and a lot of pictures it is important to use base colors (in this case greys) and use one accent color with possible variations (in this case one orange color is closer to red, and the other one is closer to yellow). This is a good example of a monochromatic orange palette.
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.
Susa Ventures uses a goldenrod yellow as an accent color in their
typography overtop an image to great effect.
The background of Susa Adventures website is a fullscreen image of mountains covered in green trees and a cloudy sky. In the left top corner there is a logo that reads 'Susa' with an icon of an orangutan, the icon and the text are both dark grey color. In the center of the screen there is a big bold yellow title that reads 'We are susa ventures' and below that text there is a subtitle in white that reads 'a growing family of dreamers and builders'. In the left bottom corner there is a small yellow text that reads 'start scrolling' The use of the yellow color as an accent color works perfectly in this website because it provides a clear visual emphasis on the title of the website. There is enough contrast between the yellow title and the image in the background which is very important for the text to be legible. The background image, white text and the dark grey logo combined feel like cold colors, however the yellow text adds warmth to the website.
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). Because of this, green takes 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 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.
This Anna Rosa website has a very simple design and uses a pastel green color for the background. In the center of the screen is a picture of a foggy window, and to the right of the screen another picture, shows the back of a blond woman. Alongside the images is vertical text that reads 'Anna' and 'Rosa' in black. The contrast of the black text on top of the pastel green background is easily legible, and the pictures contain mostly cold colors and grey backgrounds which gives the website a sense of elegance and sophistication.
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, like navy, are
excellent for corporate sites or designs where strength and reliability
This Future of Designwebsite has a bright blue background with an overlay of an image of office supplies like paper and clips taken from above. This image is semi transparent which means that it blends in with the bright blue background. In the center of the screen there is a white text that reads 'The Future of Design in Start-Ups' and right below it there is a smaller white text that reads '2016 survey results'. In the center bottom of the screen there is a small white arrow facing down that indicates that the user must scroll down to navigate to the rest of the content of the website. The high contrast of the white letters and elements on top of the bright blue background provide good legibility. The blue color is widely used for tech/finance related websites and in this case it works great by giving it a pop of color but remaining simple at the same time.
In ancient times, the dyes used for creating purple hues were extracted
from snails and were very expensive, so only royals and the very wealthy
could afford them. Purple is 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 lavender) 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.
This KIKK international festival of digital and creative cultures website is used to advertise a festival, the background is a fullscreen image with a dark purple background and an iridescent soap bubble (appears to gradually change color). The transparent bubble reflects different shades of purple, blue and pink colors which gives a futuristic look to the image. Their main navigation menu is at the top of the page displayed in white letters, the logo that reads 'kikk festival' is displayed in the left top corner. There is a big vertical text in the center of the screen and right on top of the bubble that reads 'INTER' in white letters. The contrast between the background with different shades of purples and the use of all white text provides good legibility.
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 is the strongest of the neutral colors. Black is commonly
associated with power, elegance, and formality. Paradoxically, black is
the traditional color of mourning in many Western countries. It’s also
associated with rebellion in some cultures, and can have associated with
Halloween and the occult. Black, when used as more than an accent or for
text, 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 its neutrality. Black can make it easier to convey a
sense of sophistication and mystery in a design.
This hello heco design studio website has a plain light grey background overlaid with all black elements. The logo is displayed in the top left corner and reads 'HECO', in the top right corner there is a link to the contact email that is displayed in black text and underlined with a wavy back line. In the center of the screen there is a big black text that reads: 'We created dynamic brands that help new companies grow' and immediately below there is a black arrow pointing down. In the bottom of the screen there are some black waves with light grey lines on top that move slowly. The use of all black elements on top of a light grey background is very effective, easy to read and it looks very elegant and professional.
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 cleanliness. In the West, it associated with the
healthcare industry, especially with doctors, nurses and dentists. In
much of the East, however, white is associated with death and mourning.
In India, it is traditionally the color widows wear. 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.
Nuno Coelho's digital portfolio site has a plain white background. The top left corner displays the designer's name in a small black text, and all clickable links are in black text with a pink underline. In the center of the screen there is a big black text that reads: 'I'm Nuno, a product designer based in London'. The text is followed by a pink smiley face and a smaller black text that reads 'Read more' with the same pink underline that indicates it is a clickable link. The use of the white background is very effective especially because this is a design portfolio that contains a lot of projects in the internal pages, since the designer wants the users to center the attention on his projects, the design of the portfolio itself has to be simple and easy to read, which is achieved well in this example.
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
The Lundqvist & Dallyn design website has a light grey background overlaid with mostly black and white elements. The top left corner displays the name of the website which also works as the logo that reads 'Lundqvist & Dallyn'. In the top right corner the main menu is displayed with black text. In the center left of the screen a bigger black tagline text reads 'Simplicity in Design' and right below that title there is a square picture with black background and a futbol player running, wearing a black uniform with white letters. The use of the grey color provides simplicity and elegance and high contrast when overlaid with black elements that provide good legibility.
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.
This Trifecta bicycle website displays the site logo Trefecta in white letters against a rectangular grey background and below that logo, the menu items light grey text over a dark grey background. To banner in the background changes between different images of electric bikes. All the images have light backgrounds and overlaid with black text, and Brown buttons with white letters. The use of the Brown color is very effective because there is only one element in the entire page that has this color, and it is used strictly for the call to action (links and button text), this means that the intention is to encourage the user to click on that button.
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.
Beige and Tan Example
This Mile Inn production website has a beige background overlayed with dark grey elements. In the top left corner there is the main logo that looks like the outline of the letter “M”, in the center top of the screen the main menu is displayed with dark grey text. There is a very big all caps text in the center of the screen that reads 'Mile INN' and right below that there is a longer text that explains the purpose of the company. The use of beige and dark grey is very effective because it combines the coldness of the grey with the warmth and snug of the color beige, which provides elegance to the content that is being presented in the website.
Ivory and Cream
Ivory and cream are sophisticated colors, with some of the warmth of
brown and a lot of the coolness of white. They're generally quiet,
and can often evoke a sense of history. Ivory is a calm color, with some
of the pureness associated with white, though it's a bit warmer. In
design, 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.
Ivory and Cream Example
The Sweet Magnolia Gelato website has a plain cream background, in the top center of the screen the main menu is displayed with brownish red color. The logo is located in the very center of the screen and it reads 'Sweet Magnolia gelato, a southern delight'. This text is displayed in the same brownish red color and decorated with yellow swirls. All around the logo there are a lot of decorative illustrations using the same red and yellow colors from the logo, these illustrations include milk, ice cream cones, chocolate bard and spinning flowers. The use of the cream color is very effective because it is warm and it makes the website look more rustic. This is very important for this specific food industry because the whole site looks like ice cream