1. Use of colors in Web design
Nida Aslam, Front End Designer, Incepio
2. Why Colors are Important?
• Over 80% of visual information is
related to color.
• Colors make us feel pleasure or
disapproval, hot or cold, to be attracted
or repelled, our appetite stimulated or
suppressed?
3. Why Colors are Important?
• COLOR is an important element of
design that is used to create ideas,
convey messages, invoke feelings, and
accentuate areas of interest.
• It affects the mood of viewers, Website
designers should treat the association of
color as seriously as the design of
graphics and layout
5. The color wheel
• The color wheel allows you to pick the
colors that are harmonious together.
• The wheel consists of 6 basic colors: red,
orange, yellow, green, blue and purple.
In addition to the basic colors, we have
extra colors (mixes of the basic).
6. The color groups
• Colors on the color wheel are can be
separated into groups which are:
• Primary Colors
• Secondary colors
• Tertiary colors
• Complementary colors
• Analogous colors
7. The color groups
• Primary Colors :
• There are three primary colors:
• Red (#ff0000 in HTML or #f00 in CSS),
• Yellow (#ffff00 in HTML or #ff0 in CSS) and
• Blue (#0000ff in HTML or #00f in CSS).
• We cannot get them by mixing any other
color. The other extra colors can be formed
by combining of these three colors.
8. The color groups
• Secondary colors
• Mix the primary colors together, and you
get the secondary colors. There are also
three of them:
• Orange (#ff9900 in HTML or #f90 in CSS),
Green (#00ff00 in HTML or #0f0 in CSS)
and Purple (#ff00ff in HTML or #f0f in CSS
9. The color groups
• Tertiary colors
• To get one of tertiary colors you need to
mix one primary color and one secondary
color together.
• The opportunities for tertiary colors are
endless
10. The color groups
• Complementary colors
• Complementary colors are the ones that are
located directly across each other on the
color wheel: red and green, blue and
orange, purple and yellow.
• In combination with each other they
compose a striking contrast. Such color
combinations are usually used for standing
out some elements on the website
11. The color groups
• Analogous colors
• These colors are located next to each other
on the color wheel.
• They usually look extremely good together.
• Use such color combinations when you
need your visitors to feel comfortable while
looking at your website pages.
12. Color Groups Based on Emotions
• There are color groups that are
associated with emotions: warm, cool
and neutral.
18. Color Groups Based on Emotions
Cool:
Cool colors are more often associated with
calm, trust, and professionalism. The are
also associated with sadness and
melancholy.
19. Color Groups Based on Emotions
Cool:
The have the advantage of being
professional
21. Red
• Is mostly associated with boldness,
excitement and desire. Red is the color
of love, strength, power, energy,
leadership and excitement.
• It is a strong color, and you should be
aware of some its negative associations,
i.e. danger, alarms, traffic lights, etc.
22. Blue
• Means patience, peace, tranquility,
trustworthiness, love, stability.
• It is one of the most beloved colors in
web design.
• It is associated with stability and depth,
professionalism, trust and honor.
23. Yellow
• Is the color that mostly associated with
liveliness.
• It is energetic and gives the feeling of
happiness.
• Also, it associates with curiosity,
amusement, joy, intelligence, brightness,
caution, etc.
24. Orange
• Means cheerfulness and creativity.
• It can be associated with friendliness,
confidence, playfulness, courage,
steadfastness, etc.
25. Purple
• Traditionally associates with power,
nobility and wealth.
• Wisdom, royalty, independence, nobility,
luxury, ambition, dignity, magic and
mystery.
26. Green
• Is the color of harmony, nature, healing,
life, food and health.
• It symbolizes growth, hope, freshness.
• In countries with green money such as
the U.S. it evokes thoughts and feelings
of financial wealth
27. Brown
• Is the color of relaxation and confidence.
Brown means earthiness, nature,
durability, tribal, comfort, reliability, etc.
• It can be thought of sophisticated, solid
and conventional.
28. Grey
• Gives the sense of seriousness,
conservatism and traditionalism. It can
provoke the feeling purity and
innocence.
• It can be associated with security,
reliability, intelligence, modesty, dignity,
maturity, solid, practical, old age,
sadness, quality, boring, practicality,
professional, durability, quiet,
gloominess.
29. Pink
• Expresses tenderness, romance,
femininity, truth, passivity, good will,
emotional healing, care, peace, calming,
affection, emotional maturity, nurturing,
sweet tasting, sweet smelling, ethereal,
delicacy, etc.
30. Black
• Is a stylish and elegant color associated
with power, sophistication, formality,
health, etc. Black is an excellent technical
color and helps to add some mystery to
your design.
• If used in background, it can enhance
perspective and depth.
• Black is great to use for art and
photography websites to help other
colors to vibrate.
31. White
• White is associated with purity,
simplicity, fresh, goodness, innocence
easy, cleanliness, etc.
• This color is great to use for a
background or accent color, because it
highlights other colors.
37. Nike
http://www.nike.com/
Nike changes their site often, but it is
usually dark with mostly black and grey
hues.
The black shows the power in their
product, giving the impression that they
sell quality products to sporty people.
38. White house
http://www.whitehouse.gov/
The White House website is mostly white
and light grey with some blue and red
accents. The white symbolizes hope and
freedom, showing a value for safety and
purity. The red and blue are of course the
other USA colors, but the blue shows
stability and peace, while the red shows
passion and energy.
39. Amazon
http://www.amazon.com/
Amazon’s site is mostly white, which is the
best color to use for contrast and
readability. It also shows cleanliness and
helps users navigate the site freely. There
are orange and blue accents to help people
feel at ease when on the site, as well as
excited and hopeful to find their perfect
purchase.
40. Verizon
http://www22.verizon.com/
Verizon’s main corporate branding color is
red, which is used throughout the site. This
helps stimulate the excitement of users,
showing a company that sells an exciting
and fast-paced product. The white
background is used similarly to Amazon,
helping users navigate the site by
displaying a clean and orderly site.
41. Best Buy
http://www.bestbuy.com/
Best Buy’s site showcases dark blue hues,
showing their stability and power in the
electronic market. Buyers are making large
purchases from Best Buy and need to feel
secure and peaceful on their site. The
yellow emits happiness and helps people
feel excited and joyful while making their
purchases.
42. Whole food
http://www.wholefoodsmarket.com/
The main color used in Whole Foods corporate
branding, as well as their website, is green.
Whole Foods sells healthy and organic food for a
premium price. The green in their site design
does well to show their healthful and pure values
as well as their nature-loving products. They also
use some pale yellow accents that are very
complimentary to the green, and it gives a joyful
value to the site.
45. RGB (Red, Green, Blue)
• For digital/web use
• In Vector (.eps and .ai) and in JPEG, GIF,
PNG format
46. RGB (Red, Green, Blue)
• RGB is a device-dependent color model.
• Different devices detect or reproduce a given
RGB value differently
• The color elements (such as phosphors or
dyes) and their response to the individual R,
G, and B levels vary from manufacturer to
manufacturer, or even in the same device over
time. Thus an RGB value does not define the
same color across devices
47. CMYK (Cyan, Magenta, Yellow,
Black)
• For process 4/c printing (e.g. business
card, brochure, letterhead)
• In vector format (.eps or .ai)
• Coated (C) format for printing on coated
paper
• Uncoated (UC) format for printing on
uncoated paper
48. CMYK (Cyan, Magenta, Yellow,
Black)
• Note: The color you see on screen will
not be the same as print. Do you know
why?
• A computer monitor mixes shades of
red, green, and blue to create color
pictures. A CMYK printer instead uses
light-absorbing cyan, magenta and
yellow inks, whose colors are mixed
using dithering, half toning, or some
other optical technique.
49. Pantone
• Pantone is a standardized color
matching system.
• By standardizing the colors, different
manufacturers in different locations can
all reference a Pantone numbered color,
making sure colors match without direct
contact with one another.
50. Pantone
• For spot color printing (e.g. business
card, brochure, letterhead)
• Standard language for color of
identification
• In vector format (.eps or .ai)
• Coated (C) format for printing on coated
paper
• Uncoated (UC) format for printing on
uncoated paper
52. Choosing the right colors
• Colors give sites meaning without
having to use descriptive words. They
create a lot of impact.
• As seen in many of the corporate sites,
they create emotions and values that
help show users what the company is
about and what kind of products they
are selling.
53. Choosing the right colors
• Pairing colors can help change the
meaning of a site altogether.
• Pair a soft blue site that creates calming
qualities with a bright orange, and you
could change your site to be more
exciting and joyful.
54. Choosing the right colors
• When choosing the colors for your site,
you need to first (as always) think of
your audience. Is it a global audience? Is
it primarily Western? Eastern? Are they
older? Younger? Male? Female?
• All of these things, and more can affect
the color choices for your site
55. Choosing the right colors
• Determine the following factors:
• Age differences
• Class Differences
• Gender Differences
• Trends
56. Choosing the right colors
• Age differences
• Young children tend to prefer brighter,
more solid colors, while adults tend to
prefer more subdued colors. If you're
writing to an audience of children and
you're using muted pastels and shades of
grey, their parents might like it, but the kids
will be long gone before the page finishes
loading.
57. Choosing the right colors
• Class differences
• Marketing research in the United States has
shown that working class people tend to
prefer colors that you can name: like blue,
red, green, etc.
• While more highly educated classes tend to
prefer colors that are more obscure: taupe,
azure, mauve, etc.
58. Choosing the right colors
• Gender differences
• In many cultures, men tend to prefer cooler
colors (blues and greens) while women
tend to prefer warmer colors (reds and
oranges).
59. Choosing the right colors
• Trends
• Colors, like everything else in design, go
through ins and outs in popularity.
• Black Web pages were all the rage a few
years ago, and now you hardly see it at all.
60. Choosing the right colors
• Trends
• Colors also tend towards seasonality, in
other words, the designs reflect the season
they were built in: winter blacks, whites,
and greys; spring greens and bright colors;
summer yellows; fall browns and gold's.
61. Tips: Choosing the right colors
Tip1.
If you wish your text
content to be easily
readable, choose
contrasting colors. It is
important to make
contrast between the text
and background.
62. Tips: Choosing the right colors
Tip2.
Use less colors. Don’t
make your website to look
like a circus. For the best
impact you can use one
color on headlines and
another color (the
complementary one) for
the text.
63. Tips: Choosing the right colors
Tip3.
Use enough colors. Use
less, but enough. If you
use too little colors, you
risk to make your website
boring. Or use little colors
but just use other means
to underline the elements
in that case.
64. Tips: Choosing the right colors
Tip4.
If you need to attract the
visitor’s eye, use intense
colors. But be careful, as If
the color scheme is too
intense, it attracts the eye
in too many directions,
and the techniques will
lose its effectiveness.
65. Tips: Choosing the right colors
Tip5.
Derive inspiration from
nature: you can find really
great complementary
color schemes.
