So, you’re building an app and you’re starting to think about your product’s look and feel. This process usually starts with branding and logo design, but sometimes UI design comes first. Either way, you need to set the mood for your customers, and for this, color is your most powerful tool. Say, “Hello, color!” Here’s how to choose the right colors for your app (without your eyes going buggy in the process).
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? From the outset, your biggest challenge will be to narrow down your options to a select few colors that suit your brand.
Here we present a primer on the science of color to help make your decisions around color a little easier. To brush up on color terms, head to this article.
Twelve colors (along with black and white) form the basis for every color that can be created in the visible color spectrum. Regardless of whether you’re printing, painting on paper, or creating digitally, understanding the color wheel is essential. Even if you’re not creating the design yourself, a common language of color is extremely helpful in working with a designer. The look and feel of your app will be highly influenced by the colors you choose and how you use them. Addie’s article on visual hierarchy in content design provides useful guidance.
The color wheel starts with the three primary colors: 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.
The secondary colors: 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.
Lastly, we have tertiary colors–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 are lighter versions of any color, created by adding white; shades are darker versions of any color that are created by adding black to a color.
Notes on RGB and CMYK*
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 help you choose colors for your app or website design. For the science behind how colors are reproduced for printing, using CYMK, or created on screens/digitally, using RGB, read this article.
The easiest way to distinguish warms vs. cools is to think about two simple aspects of nature: The colors associated with the sun’s warmth: yellows, oranges, and reds are all warm colors. The colors associated with water’s coolness: blues, greens, and violets are all cool colors. The color wheel below shows this classification.
First of all, let’s put it front and center: color sets the mood. Each color can be associated with certain attributes or psychological states. Whether you’re designing a website, app, or social media post, color is a key element of visual storytelling. Keep in mind that color associations can vary across cultures. Here are some colors and the moods they convey (in Western culture). It’s helpful to keep these in mind when you’re choosing colors for your app.
Red: excitement, energy, strength, adventure, action, passion, love (also hunger and desire)
Orange: optimism, freedom, pleasure, rejuvenation
Yellow: joy, positivity, clarity, confidence, enthusiasm, curiosity
Green: loyalty, harmony, prosperity, safety, luck, health, balance
Blue: trust, honesty, confidence, security, success, intelligence
Purple: royalty, spirituality, fantasy, imagination, mystery, justice
Pink: femininity, calm, softness, respect, gratitude, creativity
Take time to consider the mood of your app, and how it relates to your target user(s). Establishing the attributes or mood will help you choose the main color for your project. 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.
If you’ve 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. Keep in mind there are many more combinations than the classics we’re going to discuss here. However, once you are familiar with the basics, you’ll be able to create pleasing palettes of your own and/or have a conversation with a designer. If you’re new to creating color combinations, keep your color wheel close by for reference and it will all start to make sense.
Analogous — The easiest way to create an analogous palette is by following this process: Start by choosing one color on the color wheel. You can call this your main color. Then, add an adjoining one. For example, start with yellow, and then add orange. Next, you’ll choose between two options: 1. Add red — the color next to orange (the example below uses pink, a lighter version of red) OR 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.
On the cooler side of the color spectrum, a green, blue, violet combination would also be analogous. You’re 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: red, violet, and blue would be one example.
Complementary — 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 — the complete opposite of the analogous colors we discussed above.
In the first graphic of the color wheel above, you can quickly see the other complementary combinations: orange and blue, and yellow and violet. 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.
Monochromatic — The simplest of all color schemes is monochromatic. All you need is one main color! In the example below, we’ve 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. 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.
Triadic — This is the most complex of the classic color combinations because we’re veering away from both direct opposites and also neighbors on the color wheel. But don’t 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. The most classic triadic combination is the three primary colors: red, blue, yellow. It’s instantly recognizable and always looks good! That’s followed closely by the secondary colors: orange, green, violet, which is what’s used in the example below.
As seen in the graphic above, the numbers and letters below each circle of color correspond to a unique hexadecimal code (or “hex code”). This code indicates how the digital RGB colors are combined to create each color. You’ll see hex codes in the color apps and tools listed below. Once you’ve decided on your color palette, you and your designers use the hex codes to make sure all the colors remain consistent across every screen and marketing campaign. If you have a company or product style guide, indicate the hex colors there. Read more about hex codes in this article.
Pure neutrals like black and white are often included in addition to your color palette, as backgrounds for the main colors. When choosing colors for your app, having good contrast for easy reading and navigation is essential. Tinted and shaded neutrals, 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).
Analogous scheme: yellow, orange, and green
Complementary scheme: orange and blue
Monochromatic scheme: blue
Triadic scheme: orange, green, violet
Once your color palettes are chosen, you can start to dive into the UI/UX design process. When doing layouts, especially when you’re designing mobile app screens, the following tips can help guide your way:
When choosing colors for your app, get started with free online color apps. There are some great tools available to help you find the right combinations. Here are a few of our favorites:
Coolors A fast, easy color schemes generator. Watch out — the “slot machine” format of their generator makes it a bit addictive!
Adobe Color Tool More complex than Coolors, Adobe’s tool is an interactive version of the classic color wheel, and can generate palettes based on chosen criteria.
ColorPick Eyedropper A Chrome extension that helps you identify hex codes for colors you find around the web.
Brandmark Color Wheel An AI tool that applies color palettes to your uploaded graphics.
Canva Upload a photo and Canva can identify the colors in it, to assist in your creating a palette. You can easily refine the colors and pull out shades or tints that work for you. Great for content creation and quick mockups!
We’ve just touched the tip of the iceberg when it comes to color combinations, palettes, and UX/UI color strategy. Hopefully we’ve given you a broad-enough overview to set you on the right path. With a color wheel in hand and a good grasp of the main concepts, you should feel comfortable enough to start playing. And in no time you’ll be talking shop with your design team, or even mocking up your own website designs with a bit more confidence.
Editor’s note: Kerry Abukhalaf and Addie Kugler-Lunt. collaborated on this article. Addie Kugler-Lunt expanded and updated this article in July 2022.
LimeTech is a creative tech company with a focus on app development. We help brands grow their impact by building digital products that please customers and solve business challenges. Our work includes strategy, design, content, and tech planning. Check out our portfolio or reach out to start a conversation about your project.
Building on our article “Hello, Color!”, we cover some common color terminology. This helps you have conversations with designers when you’re creating the look and feel of your app. Here we go with “color terminology explained”!Read more