{"id":11689,"date":"2021-09-30T09:00:29","date_gmt":"2021-09-30T13:00:29","guid":{"rendered":"https:\/\/limetech.co\/?p=11689"},"modified":"2021-09-30T09:00:29","modified_gmt":"2021-09-30T13:00:29","slug":"hello-color-how-to-choose-the-right-colors-for-your-app","status":"publish","type":"post","link":"https:\/\/tjarb.com\/limetech\/blog\/app-development\/hello-color-how-to-choose-the-right-colors-for-your-app\/","title":{"rendered":"Hello, color! How to choose the right colors for your app."},"content":{"rendered":"

Hello, color! How to choose the right colors for your app.<\/h2>\n

So, you\u2019re building an app and you\u2019re starting to think about your product\u2019s look and feel. This process usually starts with branding<\/strong> and logo design<\/strong>, but sometimes an entrepreneur or designer starts with UI design. Either way, you need to set the mood for your customers, and color is your most powerful tool to get this done. Say, \u201cHello, color!\u201d. Here\u2019s how to choose the right colors for your app (without your eyes going buggy in the process).<\/span><\/p>\n

Color is a vast topic. In fact, did you know that using standard hex codes (more on this later), we can notate more than 16 million different colors<\/a>? From the outset, your biggest challenge will be to narrow down your options to a select few colors that suit your brand.\u00a0\u00a0<\/span><\/p>\n

Here we present a primer on the science of color to help make your decisions around color a little easier.<\/span><\/p>\n

The color wheel<\/span><\/h3>\n

Twelve colors (along with black and white) form the basis for every color that can be created in the visible color spectrum.<\/strong> Regardless of whether you\u2019re printing, painting on paper, or creating digitally, understanding the color wheel is essential. Even if you\u2019re not creating the design yourself, a common language of color is extremely helpful in working with a designer.\u00a0<\/span><\/p>\n

Primary colors<\/h3>\n

The color wheel starts with the three primary colors<\/strong>: red, blue, and yellow. You can see these colors arranged in a triangle relationship in the graphic below. Every other color in the entire color spectrum is created out of a combination of these three primary colors. You cannot create these colors from any other color; you have to start with them. They are your foundation for the entire rainbow.<\/span><\/p>\n

Secondary colors<\/h3>\n

The secondary colors<\/strong>: orange, green, and violet are created by combining two of the primary colors together. They are shown in relation below, in the inverted triangle. If you add the secondary colors to the primary ones you get the classic R-O-Y-G-B-V rainbow colors.\u00a0<\/span><\/p>\n

Tertiary colors<\/h3>\n

Lastly, we have tertiary colors<\/strong>–represented by circles in the graphic below. These colors are created by combining the two colors next to each other. For example, combine half yellow and half green to make a color called yellow-green (or green-yellow, which is the same). See the whole list of tertiary colors at the bottom of the graphic below. Also note, tertiary colors are not the same as tints or shades: tints<\/strong> are lighter versions of any color, created by adding white; shades<\/strong> are darker versions of any color that are created by adding black to a color.<\/span><\/p>\n

\"\"
image credit<\/em><\/a><\/figcaption><\/figure>\n

Notes on RGB and CMYK*<\/strong><\/p>\n

In this article we’re discussing traditional color theory, which uses the colors in the color wheel above. We’re focusing on how these colors can be combined in different ways to make harmonious palettes which can be used for various applications including websites and apps. For the science behind how colors are reproduced for printing, using CYMK<\/strong>, or created on screens\/digitally, using RGB<\/strong>, read this <\/span>article<\/span><\/a>.<\/span><\/p>\n

Warm colors, cool colors<\/span><\/h3>\n

The easiest way to distinguish warms vs. cools is to think about two simple aspects of nature: The colors associated with the sun\u2019s warmth: yellows, oranges, and reds are all warm colors<\/strong>. The colors associated with water\u2019s coolness: blues, greens, and violets are all cool colors<\/strong>. The color wheel below shows this classification.\u00a0<\/span><\/p>\n

\"\"
image credit<\/em><\/a><\/figcaption><\/figure>\n

Color sets the mood<\/span><\/h3>\n

First of all, let\u2019s put it front and center: color sets the mood. Each color can be associated with certain attributes or psychological states. Keep in mind that color associations can vary across cultures. Here are some colors and the moods they convey (in Western culture):<\/span><\/p>\n

Red:<\/b> excitement, energy, strength, adventure, action, passion, love (also hunger and desire)<\/span><\/p>\n

Orange:<\/b> optimism, freedom, pleasure, rejuvenation<\/span><\/p>\n

Yellow:<\/b> joy, positivity, clarity, confidence, enthusiasm, curiosity<\/span><\/p>\n

Green:<\/b> loyalty, harmony, prosperity, safety, luck, health, balance<\/span><\/p>\n

Blue:<\/b> trust, honesty, confidence, security, success, intelligence<\/span><\/p>\n

Purple: <\/b>royalty, spirituality, fantasy, imagination, mystery, justice<\/span><\/p>\n

Pink:<\/b> femininity, calm, softness, respect, gratitude, creativity<\/span><\/p>\n

\"a
image source<\/a><\/em><\/figcaption><\/figure>\n

Take time to consider the mood of your app, and how it relates to your target user(s)<\/a>. Establishing the attributes or mood will help you choose the main color for your project.<\/strong> In fact, the mood can be your north star, helping you make important choices throughout this process. Settle on your main color (or base color) and you can begin working with color combinations.<\/p>\n

Combining colors — analogous, complementary, monochromatic, triadic palettes<\/span><\/h3>\n

If you\u2019ve ever attended an art or design class, even as a kid, you likely remember something about how the color wheel is used to find and create harmonious color combinations<\/strong>. Keep in mind there are many more combinations than the classics we\u2019re going to discuss here. However, once you have a handle on these, you\u2019ll be able to create pleasing palettes of your own and\/or have a conversation with a designer. If you\u2019re new to creating color combinations, keep your color wheel close by for reference and it will all start to make sense.<\/strong><\/span><\/p>\n

Analogous color palettes<\/h3>\n

Analogous<\/b> — The easiest way to create an analogous palette is by following this process: S<\/strong><\/span>tart by choosing one color on the color wheel. You can call this your main color. Then, add an adjoining one.<\/strong> For example, start with yellow, and then add orange. Next, you’ll choose between two options: <\/span>1. Add red — the color next to orange (the example below uses pink, a lighter version of red) <\/span>OR <\/span>2. instead of orange, move the opposite direction on the color wheel to yellow’s other neighbor, green. Either of these combinations of three: red, orange, yellow OR orange, yellow, green can be the basis of an analogous color scheme. <\/span><\/p>\n

On the cooler side of the color spectrum, a green, blue, violet combination would also be analogous. You\u2019re not limited to just warms or cools in an analogous scheme: warms and cools work together in an analogous palette, as long as they are next to each other on the color wheel<\/strong>: red, violet, and blue would be one example.\u00a0<\/span><\/p>\n

Complementary color palettes<\/h3>\n

Complementary<\/b> — These palettes may be the easiest to spot, as they are inherently attractive and eye-catching. In Western culture, when people think about Christmas colors, they typically visualize a complimentary color scheme: red and green. These colors are opposite each other on the color wheel <\/strong>— the complete opposite of the analogous colors we discussed above. <\/span><\/p>\n

In the first graphic of the color wheel above, you can quickly see the other complementary combinations: orange and blue, and yellow and violet<\/strong>. Classically, there are only two colors in a complimentary palette. So what if you want a third or a fourth color? You can add tints and\/or shades of one or both of the two complementary colors. In the example below, we chose two tints of red (ie. pinks) and two greens (one tint and one shade) to create four harmonious colors for the palette.<\/span><\/p>\n

Monochromatic color palettes<\/h3>\n

Monochromatic<\/b> — The simplest of all color schemes is monochromatic. All you need is one main color!<\/strong> In the example below, we\u2019ve used a warm green-yellow as the basis for the palette. Then, tints and shades of that same color are brought in to make several harmonious colors that work well together<\/strong>. This is undoubtedly the subtlest of the classic color combinations. Many of the color tools referenced below can assist you in locating the tints and shades of a color quickly. So if you are drawn to this look for your product, website, or app, this is an easy way to go.<\/span><\/p>\n

Triadic color palettes<\/h3>\n

Triadic<\/b> — This is the most complex of the classic color combinations because we\u2019re veering away from both direct opposites and also neighbors on the color wheel. But don\u2019t be put off because triadic color palettes are some of the most recognizable and commonly used schemes out in the world. Referencing our favorite color wheel tool at the top of this article, the triangle or inverted triangle is our starting place<\/strong>. The most classic triadic combination is the three primary colors: red, blue, yellow. It\u2019s instantly recognizable and always looks good! That\u2019s followed closely by the secondary colors: orange, green, violet, which is what\u2019s used in the example below.<\/span><\/p>\n

\"\"<\/p>\n

Notes on hex codes*<\/b><\/p>\n

As seen in the graphic above, the numbers and letters below each circle of color correspond to a unique hexadecimal code<\/strong> (or “hex code”). This code indicates how the digital RGB colors are combined to create each color. You\u2019ll see hex codes in the color apps and tools listed below. Once you\u2019ve decided on your color palette, you and your designers use the hex codes to make sure all the colors remain consistent<\/strong> across every screen and marketing campaign. If you have a company or product style guide<\/strong>, the hex colors should be indicated there. Read more about hex codes in this <\/span>article<\/span><\/a>.<\/span><\/p>\n

Notes on Neutrals*<\/b>\u00a0<\/span><\/p>\n

Pure<\/strong> neutrals<\/strong> like black and white are often included in addition to your color palette, as backgrounds for the main colors. T<\/strong>inted<\/strong> and shaded<\/strong> neutrals<\/strong>, containing a tiny bit of one of your main colors, can be used in one of two primary ways: either as neutrals in addition to the main palette to replace black and white OR as part of the main palette colors in schemes that have fewer colors overall (especially in monochromatic palettes).\u00a0<\/span><\/p>\n

Examples of each classic color combination:<\/b><\/p>\n