{"id":14395,"date":"2018-02-20T16:18:50","date_gmt":"2018-02-20T16:18:50","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14395"},"modified":"2020-11-05T14:49:49","modified_gmt":"2020-11-05T14:49:49","slug":"intro-color-theory","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/intro-color-theory\/","title":{"rendered":"An Intro to Color Theory"},"content":{"rendered":"

We\u2019re able to see different colors because of our retina\u2019s innate ability to differentiate frequencies of light waves.<\/p>\n

Certain colors or shades evoke different sentiments in people. In this post, I want to give a quick introduction to color theory, ways to combine colors, and tools for designing with color \u2014 that you as a designer can benefit from to make your designs delightful.<\/p>\n

Let\u2019s start!<\/p>\n

Different moods are attributed to different colors and you can use these different colors to achieve different ends.<\/p>\n

    \n
  1. Red<\/strong> has been traditionally associated with Love, Energy, and Intensity. So a lot of car ads, or anything related to love are some shade of red.<\/li>\n
  2. Yellow<\/strong> tends to be used for things to convey Joy, Attention, Intellect. Yellow is an incredibly attention-grabbing colour. However, yellow is not a good choice for the background of your app or as the main interface. Yellow can cause attention fatigue. It\u2019s an excellent choice for app icon design or app screenshot design.<\/li>\n
  3. Green<\/strong> has been associated with Freshness, Safety, and Growth. This is why you\u2019ll see most nature, healthy food, related companies use green for their branding.<\/li>\n
  4. Blue \u2014 <\/strong>Stability. Trust. Serenity. No surprise why both Facebook and Twitter are blue.<\/li>\n
  5. Purple <\/strong>stands for royalty. Wealth. Feminity. Purple tends to be used for women-targeted products. And luxury products.<\/li>\n<\/ol>\n

    To see these theories in action, start analyzing advertisements. After all, ads are really well thought-out experiments in persuasion and manipulating human psychology<\/a>.<\/p>\n

    Next time you see an ad, try to see what techniques or design principles they\u2019re using to make their design look beautiful and what emotion they\u2019re trying to evoke.<\/p>\n

    Choosing a color palette is not all about advertising and attention-grabbing, though. It\u2019s also about selling your product and appealing to certain instincts or desires that people have.<\/p>\n

    So the next time you\u2019re designing an app\/website, the first thing to think about is what emotions you want to evoke and ideas you\u2019re trying to convey to the user and pick a colour palette accordingly.<\/p>\n

    Read this<\/a> to learn more.<\/p>\n

    How to combine colors to create color\u00a0palettes<\/h2>\n

    Now, of course you\u2019re not going to use the same color everywhere in your app. You\u2019re going to need combinations of color that go well with each other and are pleasant to look at.<\/p>\n

    To combine colors, artists and designers often use a tool called color wheel.<\/p>\n

    <\/p>\n
    \"\"<\/a>

    A color\u00a0wheel.<\/p><\/div>\n

    <\/center>There are a few ways you can use the science of color theory to combine different colors for your designs.<\/p>\n

      \n
    1. Analogous Color Palette: <\/em>For this combination, you pick up a color from the color wheel. Then you pick up a color adjacent to it. And you create a design using those colors. Analogous colors create a design that is harmonious and easy to look at.<\/li>\n<\/ol>\n

      <\/p>\n
      \"\"<\/a>

      Image credits.<\/a><\/p><\/div>\n

      <\/center>2. Complementary Color Palette: <\/em>For this combination, pick a color and a pick a color opposite to it on the color wheel. For example, the red and green here.<\/p>\n

      <\/p>\n
      \"\"<\/a>

      Image credits<\/a><\/p><\/div>\n

      <\/center>Complementary Color design is usually attention-grabbing and thus not so good for the main interface or the background of your app. Instead, use them for your app icon or the screenshots.<\/p>\n

      3. Split Colors: <\/em>For this color combination, you pick up a color. And then pick up two colors that are adjacent to the opposite color.<\/p>\n

      <\/p>\n
      \"\"<\/a>

      Image credits<\/a><\/p><\/div>\n

      <\/center>They\u2019re still attention grabbing but also pleasant to look at.<\/p>\n

      4. Triadic Color Palette\u00a0: <\/em>You pick up a color and draw an equilateral triangle. They tend to give a well-balanced feel.<\/p>\n

      <\/p>\n
      \"\"<\/a>

      Image credits<\/a><\/p><\/div>\n

      <\/center>This color palette is from the 90s, so it feels a little bit dated. A lot of fast-food chains from the era have their logos in the triadic color scheme.<\/p>\n

      5. Monochromatic Colours: <\/em>They\u2019re very modern and very much in vogue. Monochromatic designs look beautiful on modern smartphone screens. You simply pick up a single colour and combine it with either various amounts of white or various amounts of black to create different tones and shades that stand out from each other.<\/p>\n

      You can mix as much black or white to get the contrast that you want. These colour palettes tend to be incredibly contemporary and work very well for modern digital design.<\/p>\n

      <\/p>\n
      \"\"<\/a>

      Image credits<\/a><\/p><\/div>\n

      <\/center>Read this<\/a> and this <\/a>to learn even more.<\/p>\n

      Tools for designing with\u00a0color<\/h2>\n

      We covered a bit of theory behind how different colours can be combined to look pleasing to the eye and achieve certain effects.<\/p>\n

      There\u2019s tons of online tools to use for finding a color palette or making your own. My most used tools are:<\/p>\n

        \n
      1. Color Hunt<\/a>. This is a place where professional designers go to curate their favorite color palettes. You can find Hot, Random, Popular palletes and depending on the mood of the color palette, you can find one for your particular project.<\/li>\n
      2. Flat UI Colors<\/a>. This website has 20 colors formulated to work especially well on the iOS platform. For Android, I\u2019ve heard Material Palette<\/a> is what developers use.<\/li>\n
      3. ColorZilla<\/a>. This is a super awesome chrome extension that finds out the HEX code of any colour on a website.<\/li>\n<\/ol>\n

        By using these tools, understanding the theory behind moods of color, and mixing and matching colors, you should be able to arrive at a color palette that is suitable for your app\/website project. This will help make your product look appealing as well as to evoke a certain idea or emotion within your user.<\/p>\n

        This article was originally published on Harshita's Medium page<\/a>.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

        We\u2019re able to see different colors because of our retina\u2019s innate ability to differentiate frequencies of light waves. Certain colors or shades evoke different sentiments in people. In this post, I want to give a quick introduction to color theory, ways to combine colors, and tools for designing with color \u2014 that you as a designer can benefit from to… Read More ￫<\/a><\/p>\n","protected":false},"author":208,"featured_media":14407,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-14395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n