Hello, color! How to choose the right colors for your app.

Published On Sep 30 , 2021
Hello, color! How to choose the right colors for your app.

Hello, color! How to choose the right colors for your app.

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 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, “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.

The color wheel

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. 

Primary colors

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.

Secondary colors

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. 

Tertiary 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.

image credit

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 be used for various applications including websites and apps. For the science behind how colors are reproduced for printing, using CYMK, or created on screens/digitally, using RGB, read this article.

Warm colors, cool colors

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. 

image credit

Color sets the mood

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. Keep in mind that color associations can vary across cultures. Here are some colors and the moods they convey (in Western culture):

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

a color wheel documenting the psychology of colors
image source

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.

Combining colors — analogous, complementary, monochromatic, triadic palettes

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 have a handle on these, 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 color palettes

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 color palettes

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 color palettes

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 color palettes

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.

Notes on hex codes*

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, the hex colors should be indicated there. Read more about hex codes in this article.

Notes on Neutrals* 

Pure neutrals like black and white are often included in addition to your color palette, as backgrounds for the main colors. 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). 

Examples of each classic color combination:

  • Analogous scheme: yellow, orange, and green

an image by limetech illustrating a color palette build around the color green

  • Complementary scheme: orange and blue

a color palette built around the color salmon

  • Monochromatic scheme: blues

a color palette built around the color blue

  • Triadic scheme: orange, green, violet

a color palette built around the color purple

UI/UX methods with color

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:

  • Start with grayscale. Create user flows and screen hierarchies first, using a grayscale color palette. This will help you choose page elements without being distracted by color choices.
  • Less is more. Research has shown that consumers prefer a maximum of three main colors in a design palette. In fact, the inclusion of too many colors is a classic mistake of newbie designers. Keep your color palette simple, and users will thank you.
  • UI design is organizational, and the purpose of any element should be discernible by the color and design — this is a fundamental principle of good UI/UX design. 
  • Standardize your foundational colors. Designate color codes for neutral colors like white, black, and gray. White doesn’t have to be extreme white; consider using eggshell or vanilla. 
  • Standardize your denotative colors. Denotative colors are purpose-oriented. For example, use red text for error messages and green text for success messages.
  • Standardize your interactive colors. Assign color choices to interactive elements, such as hover-over buttons, clickable links, and more. For elements that are classically 3D in nature (buttons, for example), consider the role of light. For example, a button in its natural state would be raised and would catch more light than a button that is hovered over. Therefore, a button selected via hover would have a darker shade than one its natural state. Note: this is not a hard and fast rule.
  • Design for accessibility. Users with vision challenges will benefit from high-contrast color schemes. Also take into consideration the needs of color-blind users, especially when using reds and greens. For these two colors, be sure to include a label that indicates the utility or function of the feature. These tools can help you make choices around accessibility.
  • Test, test, test. As with anything, always conduct testing. Compare color options side by side and test them on real users if you can. At its most basic level, testing can even be as simple as pulling aside a colleague and asking for their input. Your designs will inevitably benefit from multiple perspectives.

Tools for your kit

If you’re ready to do a deep dive into color combinations, you’re in luck; there are some great tools available to help you find the right combinations for your app. 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!

Summary of how to choose the right colors for your app

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 designs with a bit more confidence.

If you’d like to design and build you mobile app with a skilled, creative team, LimeTech is ready. Submit our contact form and we’ll get back to you to schedule a conversation about your project.

Editor’s note: This article was created collaboratively by Kerry Abukhalaf and Addie Kugler-Lunt.


LimeTech is a creative tech company with a focus on innovation and adaptive change. We use technical know-how, design skills, and deep experience in entrepreneurship to help companies advance their business goals. Our specialties include mobile app developmentwebsite designtechnology planning, and remote work solutions.

app design    color theory    design    ui design    website design    

FRESH TECH — December — 2021

FRESH TECH — December — 2021

Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on tech.  Monthly theme: Fresh design and tips....

Read more
Sneak peek: a mobile app for customized denim

Sneak peek: a mobile app for customized denim

Read more
Looking ahead in turbulent times

Looking ahead in turbulent times

COVID-19 has brought doubt, change, and instability the world over. The virus has wreaked havoc on our health and wellness—the very foundation from which personal development and prosperity are built.....

Read more
Everything is agile

Everything is agile

Everything is agile: the story of agile (and how it became everyone’s favorite work method) Origins Back in the 90s, software development was a laborious, time-consuming process, and products could....

Read more
Fresh Tech — October 2021

Fresh Tech — October 2021

Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on tech.  Monthly theme: reimagine with intention.....

Read more
Nice to meet you, color! Color terminology explained.

Nice to meet you, color! Color terminology explained.

Nice to meet you, color! Color terminology explained. Building on our article “Hello, Color!”, published last week, we’re going to cover some common color terminology. This will help you have....

Read more
The 5 stages of design thinking (and how they can help your app development process)

The 5 stages of design thinking (and how they can help your app development process)

The 5 stages of design thinking (and how they can help your app development process) Whether you’re designing a new toothbrush, a stoplight, or a mobile app, the process of....

Read more
A glossary of agile software development terminology —  A to Z

A glossary of agile software development terminology —  A to Z

A glossary of agile software development terminology —  from A to Z Agile software development is a method used by the vast majority of software development teams. For the layperson,....

Read more
What is agile mobile app development?

What is agile mobile app development?

What is agile mobile app development? Agile as the new norm If you’re in the process of researching app development partners, you’ve likely heard the phrase “agile development” more than....

Read more
Fresh Tech — August 2021

Fresh Tech — August 2021

Fresh Tech — August — 2021 Our monthly series — Fresh Tech — a collection of fun things on the web that sparked our interest with their fresh takes on....

Read more
LimeTech’s website design process

LimeTech’s website design process

LimeTech’s website design process Your new website. With all the things. You’ve got big ambitions for your site. But do you have a plan? Don’t worry — we do. Here....

Read more
The LimeTech approach

The LimeTech approach

The LimeTech approach The LimeTech approach involves business savvy, big-picture thinking, and total transparency. We understand the challenges of running a business in a fast-changing world. Find out how LimeTech....

Read more
The 4 stages of app prototyping

The 4 stages of app prototyping

The 4 stages of app prototyping There are lots of good reasons to start your app project with a prototype. Savvy entrepreneurs choose this method to save money, conduct early....

Read more
5 reasons to start your app project with a prototype

5 reasons to start your app project with a prototype

5 reasons to start your app project with a prototype You’re a savvy entrepreneur, right? So starting your app project with a low-stakes prototype just makes sense. Prototyping is the....

Read more
Creating your app monetization strategy

Creating your app monetization strategy

Creating your app monetization strategy So you’ve got a great idea for an app and you’ve done some planning. Now it’s time to think about revenue. How will you generate....

Read more
What to include in your mobile app marketing plan

What to include in your mobile app marketing plan

What to include in your mobile app marketing plan (and how to not get overwhelmed by the process) So, you’ve ventured into the process of building a new mobile app.....

Read more
Choosing an app development team for your project? Make it easier with these 7 things.

Choosing an app development team for your project? Make it easier with these 7 things.

Choosing an app development team for your project? Make it easier with these 7 things.   So you’ve got an idea for a mobile app but lack the technical chops....

Read more
Native vs. cross-platform mobile app. Comparing the pros and cons.

Native vs. cross-platform mobile app. Comparing the pros and cons.

What’s the right development approach for your new mobile app?  Should you build a native app for iOS or Android? Or take a cross-platform approach and build for both? Your....

Read more
iOS or Android for your new mobile app?

iOS or Android for your new mobile app?

iOS or Android for your new mobile app? These 5 questions will help you decide In this multi-part series we talk about how to explore, vet, and develop your great....

Read more
Planning your dream app? Let’s talk mobile app terminology.

Planning your dream app? Let’s talk mobile app terminology.

Planning your dream app? Let’s talk mobile app terminology. In this multi-part series we talk about how to explore, vet, and develop your great idea for an app. We move....

Read more
How to write a great mobile app project brief

How to write a great mobile app project brief

How to write a great mobile app project brief In this multi-part series we talk about how to explore, vet, and develop your great idea for an app. We move....

Read more
Validating and mapping your app idea

Validating and mapping your app idea

Validating and mapping your app idea Got a great idea for a mobile app? Before you start building and coding, you’ll want to validate your idea and make sure it’s....

Read more
5 easy steps to prepare your web design project

5 easy steps to prepare your web design project

When you’re getting ready to design, or re-design, your website, it can be hard to focus on what’s essential. What information do you need to assemble for your web design....

Read more
What to do if you have an app idea: getting started

What to do if you have an app idea: getting started

In this multi-part series we’ll be talking about how to explore, vet, and develop your great idea for an app. We’ll move from the exciting early phases of brainstorming and....

Read more
Planning a website for your business? Answer these 5 questions to get some clarity.

Planning a website for your business? Answer these 5 questions to get some clarity.

Planning a website for your business? Answer these 5 questions to get some clarity. Embarking on a new website design project? Congratulations! You’re taking a step toward one of the....

Read more
How to save money on mobile app development

How to save money on mobile app development

How to save money on mobile app development If you’ve been thinking of hiring a company to build a mobile application, you may be concerned about the potential for high....

Read more
How to help your web design team succeed at your website build project

How to help your web design team succeed at your website build project

How to help your web design team succeed  You’ve agreed on the price and terms for your web project. Now, your kickoff meeting is approaching. Here are our tips on....

Read more
What is a minimum viable product?

What is a minimum viable product?

What is a minimum viable product, and why do you need it? The 411 on MVPs A minimum viable product (MVP) is a concept popularized by author Eric Ries in....

Read more
Website hosting and security in the age of COVID-19

Website hosting and security in the age of COVID-19

More than ever, your website is one of your company’s most valuable assets. As business moves increasingly online, you should be taking active measures to protect the integrity of your....

Read more

Watch Out for SEO Scams

Watch out for SEO scams If you run a small business like we do, you probably receive countless emails pushing Search Engine Optimization (SEO) services. Many will make rash promises....

Read more

The Agile Family

How Agile is Your Family? The world of software development has influenced many sectors of business, but this is the first time we’ve heard of someone taking the methods of....

Read more

A Small Business WordPress Website For You

You Need a WordPress Website, But Who’s Got the Time? Imagine you run a busy local coffee shop and you’re at the store, setting up shop at 5am every morning.....

Read more

What Do We Actually Do?

Technology Support for Bay Area Businesses IT support becomes important for any business, even the techie ones, when the business outgrows the capacity of the savviest staff to troubleshoot problems....

Read more

Join the Fight Against SOPA/PIPA

Looking for a way to participate in the fight against SOPA/PIPA without actually taking your site down? Local San Francisco startup CloudFlare has created an Anti-Censorship App that will enable....

Read more

Contact us

Type of project
*Don’t worry – we won’t share your email.
*Don’t worry – we won’t share your email.