Use of colors in Web design    Nida Aslam, Front End Designer, Incepio
Why Colors are Important?• Over 80% of visual information is  related to color.• Colors make us feel pleasure or  disappro...
Why Colors are Important?• COLOR is an important element of  design that is used to create ideas,  convey messages, invoke...
The Color Wheel
The color wheel• The color wheel allows you to pick the  colors that are harmonious together.• The wheel consists of 6 bas...
The color groups• Colors on the color wheel are can be  separated into groups which are:  •   Primary Colors  •   Secondar...
The color groups• Primary Colors :  •   There are three primary colors:  •   Red (#ff0000 in HTML or #f00 in CSS),  •   Ye...
The color groups• Secondary colors  • Mix the primary colors together, and you    get the secondary colors. There are also...
The color groups• Tertiary colors  • To get one of tertiary colors you need to    mix one primary color and one secondary ...
The color groups• Complementary colors  • Complementary colors are the ones that are    located directly across each other...
The color groups• Analogous colors  • These colors are located next to each other    on the color wheel.  • They usually l...
Color Groups Based on Emotions• There are color groups that are  associated with emotions: warm, cool  and neutral.
Color Groups Based on EmotionsWarm:
Color Groups Based on EmotionsWarm:These are the colors of fire. They radiatewarmth.
Color Groups Based on EmotionsWarm:Warm colors are more often associatedwith passion, energy, impulsiveness,happiness, coz...
Color Groups Based on EmotionsWarm:They draw attention and have theadvantage of being inviting andharmonious.
Color Groups Based on EmotionsCool:These are the colors of water.
Color Groups Based on EmotionsCool:Cool colors are more often associated withcalm, trust, and professionalism. The arealso...
Color Groups Based on EmotionsCool:The have the advantage of beingprofessional
Meaning of colors
Red• Is mostly associated with boldness,  excitement and desire. Red is the color  of love, strength, power, energy,  lead...
Blue• Means patience, peace, tranquility,  trustworthiness, love, stability.• It is one of the most beloved colors in  web...
Yellow• Is the color that mostly associated with  liveliness.• It is energetic and gives the feeling of  happiness.• Also,...
Orange• Means cheerfulness and creativity.• It can be associated with friendliness,  confidence, playfulness, courage,  st...
Purple• Traditionally associates with power,  nobility and wealth.• Wisdom, royalty, independence, nobility,  luxury, ambi...
Green• Is the color of harmony, nature, healing,  life, food and health.• It symbolizes growth, hope, freshness.• In count...
Brown• Is the color of relaxation and confidence.  Brown means earthiness, nature,  durability, tribal, comfort, reliabili...
Grey• Gives the sense of seriousness,  conservatism and traditionalism. It can  provoke the feeling purity and  innocence....
Pink• Expresses tenderness, romance,  femininity, truth, passivity, good will,  emotional healing, care, peace, calming,  ...
Black• Is a stylish and elegant color associated  with power, sophistication, formality,  health, etc. Black is an excelle...
White• White is associated with purity,  simplicity, fresh, goodness, innocence  easy, cleanliness, etc.• This color is gr...
Some web designcolor terms
HueWhere the color sits in the visiblewavelength
SaturationThe intensity of the color      Blood Red              Pastel Red
Tonal value of the colorHow light or dark the color is
Examples of colors
Nikehttp://www.nike.com/Nike changes their site often, but it isusually dark with mostly black and greyhues.The black show...
White househttp://www.whitehouse.gov/The White House website is mostly whiteand light grey with some blue and redaccents. ...
Amazonhttp://www.amazon.com/Amazon’s site is mostly white, which is thebest color to use for contrast andreadability. It a...
Verizonhttp://www22.verizon.com/Verizon’s main corporate branding color isred, which is used throughout the site. Thishelp...
Best Buyhttp://www.bestbuy.com/Best Buy’s site showcases dark blue hues,showing their stability and power in theelectronic...
Whole foodhttp://www.wholefoodsmarket.com/The main color used in Whole Foods corporatebranding, as well as their website, ...
Color models
Color models• RGB (Red, Green, Blue)• CMYK (Cyan, Magenta, Yellow, Black)• Pantone
RGB (Red, Green, Blue)• For digital/web use• In Vector (.eps and .ai) and in JPEG, GIF,  PNG format
RGB (Red, Green, Blue)• RGB is a device-dependent color model.• Different devices detect or reproduce a given  RGB value d...
CMYK (Cyan, Magenta, Yellow,Black)• For process 4/c printing (e.g. business  card, brochure, letterhead)• In vector format...
CMYK (Cyan, Magenta, Yellow,Black)• Note: The color you see on screen will  not be the same as print. Do you know  why?• A...
Pantone• Pantone is a standardized color  matching system.• By standardizing the colors, different  manufacturers in diffe...
Pantone• For spot color printing (e.g. business  card, brochure, letterhead)• Standard language for color of  identificati...
Choosing the right colors
Choosing the right colors• Colors give sites meaning without  having to use descriptive words. They  create a lot of impac...
Choosing the right colors• Pairing colors can help change the  meaning of a site altogether.• Pair a soft blue site that c...
Choosing the right colors• When choosing the colors for your site,  you need to first (as always) think of  your audience....
Choosing the right colors•   Determine the following factors:•   Age differences•   Class Differences•   Gender Difference...
Choosing the right colors• Age differences  • Young children tend to prefer brighter,    more solid colors, while adults t...
Choosing the right colors• Class differences  • Marketing research in the United States has    shown that working class pe...
Choosing the right colors• Gender differences  • In many cultures, men tend to prefer cooler    colors (blues and greens) ...
Choosing the right colors• Trends  • Colors, like everything else in design, go    through ins and outs in popularity.  • ...
Choosing the right colors• Trends  • Colors also tend towards seasonality, in    other words, the designs reflect the seas...
Tips: Choosing the right colorsTip1.If you wish your textcontent to be easilyreadable, choosecontrasting colors. It isimpo...
Tips: Choosing the right colorsTip2.Use less colors. Don’tmake your website to looklike a circus. For the bestimpact you c...
Tips: Choosing the right colorsTip3.Use enough colors. Useless, but enough. If youuse too little colors, yourisk to make y...
Tips: Choosing the right colorsTip4.If you need to attract thevisitor’s eye, use intensecolors. But be careful, as Ifthe c...
Tips: Choosing the right colorsTip5.Derive inspiration fromnature: you can find reallygreat complementarycolor schemes.
Thanks for watchingand listeningTwitter: @nidaaslamabout.me/nidaaslam
Upcoming SlideShare
Loading in...5
×

Use of colors in web and graphic design

16,269

Published on

Published in: Design
2 Comments
30 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,269
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
0
Comments
2
Likes
30
Embeds 0
No embeds

No notes for slide

Transcript of "Use of colors in web and graphic design"

  1. 1. Use of colors in Web design Nida Aslam, Front End Designer, Incepio
  2. 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. 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
  4. 4. The Color Wheel
  5. 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. 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. 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. 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. 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. 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. 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. 12. Color Groups Based on Emotions• There are color groups that are associated with emotions: warm, cool and neutral.
  13. 13. Color Groups Based on EmotionsWarm:
  14. 14. Color Groups Based on EmotionsWarm:These are the colors of fire. They radiatewarmth.
  15. 15. Color Groups Based on EmotionsWarm:Warm colors are more often associatedwith passion, energy, impulsiveness,happiness, coziness, and comfort.
  16. 16. Color Groups Based on EmotionsWarm:They draw attention and have theadvantage of being inviting andharmonious.
  17. 17. Color Groups Based on EmotionsCool:These are the colors of water.
  18. 18. Color Groups Based on EmotionsCool:Cool colors are more often associated withcalm, trust, and professionalism. The arealso associated with sadness andmelancholy.
  19. 19. Color Groups Based on EmotionsCool:The have the advantage of beingprofessional
  20. 20. Meaning of colors
  21. 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. 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. 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. 24. Orange• Means cheerfulness and creativity.• It can be associated with friendliness, confidence, playfulness, courage, steadfastness, etc.
  25. 25. Purple• Traditionally associates with power, nobility and wealth.• Wisdom, royalty, independence, nobility, luxury, ambition, dignity, magic and mystery.
  26. 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. 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. 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. 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. 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. 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.
  32. 32. Some web designcolor terms
  33. 33. HueWhere the color sits in the visiblewavelength
  34. 34. SaturationThe intensity of the color Blood Red Pastel Red
  35. 35. Tonal value of the colorHow light or dark the color is
  36. 36. Examples of colors
  37. 37. Nikehttp://www.nike.com/Nike changes their site often, but it isusually dark with mostly black and greyhues.The black shows the power in theirproduct, giving the impression that theysell quality products to sporty people.
  38. 38. White househttp://www.whitehouse.gov/The White House website is mostly whiteand light grey with some blue and redaccents. The white symbolizes hope andfreedom, showing a value for safety andpurity. The red and blue are of course theother USA colors, but the blue showsstability and peace, while the red showspassion and energy.
  39. 39. Amazonhttp://www.amazon.com/Amazon’s site is mostly white, which is thebest color to use for contrast andreadability. It also shows cleanliness andhelps users navigate the site freely. Thereare orange and blue accents to help peoplefeel at ease when on the site, as well asexcited and hopeful to find their perfectpurchase.
  40. 40. Verizonhttp://www22.verizon.com/Verizon’s main corporate branding color isred, which is used throughout the site. Thishelps stimulate the excitement of users,showing a company that sells an excitingand fast-paced product. The whitebackground is used similarly to Amazon,helping users navigate the site bydisplaying a clean and orderly site.
  41. 41. Best Buyhttp://www.bestbuy.com/Best Buy’s site showcases dark blue hues,showing their stability and power in theelectronic market. Buyers are making largepurchases from Best Buy and need to feelsecure and peaceful on their site. Theyellow emits happiness and helps peoplefeel excited and joyful while making theirpurchases.
  42. 42. Whole foodhttp://www.wholefoodsmarket.com/The main color used in Whole Foods corporatebranding, as well as their website, is green.Whole Foods sells healthy and organic food for apremium price. The green in their site designdoes well to show their healthful and pure valuesas well as their nature-loving products. They alsouse some pale yellow accents that are verycomplimentary to the green, and it gives a joyfulvalue to the site.
  43. 43. Color models
  44. 44. Color models• RGB (Red, Green, Blue)• CMYK (Cyan, Magenta, Yellow, Black)• Pantone
  45. 45. RGB (Red, Green, Blue)• For digital/web use• In Vector (.eps and .ai) and in JPEG, GIF, PNG format
  46. 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. 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. 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. 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. 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
  51. 51. Choosing the right colors
  52. 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. 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. 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. 55. Choosing the right colors• Determine the following factors:• Age differences• Class Differences• Gender Differences• Trends
  56. 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 youre writing to an audience of children and youre 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. 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. 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. 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. 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 golds.
  61. 61. Tips: Choosing the right colorsTip1.If you wish your textcontent to be easilyreadable, choosecontrasting colors. It isimportant to makecontrast between the textand background.
  62. 62. Tips: Choosing the right colorsTip2.Use less colors. Don’tmake your website to looklike a circus. For the bestimpact you can use onecolor on headlines andanother color (thecomplementary one) forthe text.
  63. 63. Tips: Choosing the right colorsTip3.Use enough colors. Useless, but enough. If youuse too little colors, yourisk to make your websiteboring. Or use little colorsbut just use other meansto underline the elementsin that case.
  64. 64. Tips: Choosing the right colorsTip4.If you need to attract thevisitor’s eye, use intensecolors. But be careful, as Ifthe color scheme is toointense, it attracts the eyein too many directions,and the techniques willlose its effectiveness.
  65. 65. Tips: Choosing the right colorsTip5.Derive inspiration fromnature: you can find reallygreat complementarycolor schemes.
  66. 66. Thanks for watchingand listeningTwitter: @nidaaslamabout.me/nidaaslam

×