How to choose the best color palette for your mobile app design

11 min read
September 27, 2022

Color is perhaps one of the most powerful aspects of UX design.

Indeed, research shows that 90% of first impressions of a product are based on color.

The right colors can evoke emotions, spur your user to action, or even change their beliefs. Unfortunately, the opposite is also true—misusing a color palette can ruin your UX.

Picking a color for your app might seem trivial. However, there’s actually much consideration that goes into this decision.

From looking at the cultural beliefs of your target audience to using color scheme generators properly, here’s how to choose the best palette for your mobile app design.

Research your audience

The first step in determining your color palette is to research your audience and determine how they perceive different colors so that you can use the appropriate ones for your app.

See, while each person will have their favorite colors, you’d be surprised by how universal some choices are.

For instance, several studies have shown that people of the same age tend to have similar color preferences.

Here are the results of one survey that’s been ongoing since 2011:

rOLKYGnhW2WlkdAnXK5ZbAULtfN2uUCGqfsmOzAI45bVXPlmWjzfk8og3fE3629H1k0MTSh5PeNpFMd1X4zuI9fRYi4UyYfz4HU5Q8pObxV2tx88aEHGV VPxyRC7PZN4qKdsS AfFF 1a16Q tFglJLjdr54ktdfEhGNsRzAZzXkInNOSAPGLospg

Source: Hot Design

You’ll also realize that color preferences tend to change as we grow older.

Notice how people cite blue as their favorite color most of their life but suddenly shift to red once they reach an advanced age (over 70 years old).

But age is just one factor. Gender also plays a role. Here’s a study by Joe Hallock that illustrates this:

ow7 6PLJG5o8hajZxwoo17Pkh9 vSR55Ut3E zsGkaNF1cj1k5P7dKBidiaDL5ElybDb9B26d6EC7SP9q9 DGCK8kFDNBlCUjFIxdO6malKVJLLwkgLmdAnSS0G3HZKo2Eiz62PtgMAPDkqCq

Source: AZ Design

From both studies above, you’ll see that blue is a universally loved color, which is why it’s a safe bet when designing your apps.

The reason is that blue is commonly associated with safety and tranquility—desirable qualities at any age and gender.

But the type (whether blue, red, etc.) is just one aspect of color. There are other things like tints, shades, and vividness, which also affect perception.

For example, a follow-up study in 2007 discovered that males prefer brighter colors while women prefer softer colors.

Hence, if you were to create an app aimed mostly at women, going with softer colors is ideal.

jGbCCRRMC 2aANXDlmC4OUl7om2 neQm7gWI9Q OlgApDV GFlW9y9gHzaokZ18DNS7fSFPHruMC1 qvG36dcIRlKB3CB 5jEaH8zkcdQmktTjakTgUZPprVYrFJxW

Source: Digital Synopsis

An interesting thing about these studies is that respondents came from various countries, meaning color choices tend to be universal worldwide.

However, that doesn’t mean you should disregard the impact of culture on color choices because they can be significant.

For instance, red is commonly used in UI design to connote danger or a warning. But in Asian cultures, it’s often a symbol of happiness and celebration.

On the other hand, in Latin American cultures, it could mean conflict when combined with black.

It’s, therefore, crucial to double-check the cultural significance of your color scheme to avoid offending some of your users.

FpTm d2MxZ Gzgu0zESnbczYtb4 sPc3fONW0FRysXGMShQ 8eChMCPJesKp5eaR2BzbtQHcR7IQapzzjh7Dhw7JhCFWHxft9DTomxX6yLoQWEMCF4Ntm4VQahNbMsa0XNaUKRwQodi3WN02JttLOyooTeGPrdiyYvo OTterk dQrdbLjGYyUn9og

Source: Colours and Materials

Ultimately, these findings are just guidelines. It’s still best to get the exact color preferences of your target audience through market research methods like surveys and interviews.

A simpler alternative is to look at the colors your competitors are using.

Study your competitors

Studying your competitors is a must when doing market research. And more than giving you ideas on how to refine your app idea, you could also glean insights about color usage.

In other words, you can review the successful apps in your niche and check what colors are working for them.

You can easily do this by going to the Apple App Store or Google Play Store and checking the top charts in your chosen category.

Alternatively, you could also search for apps using relevant keywords.

Icons are a great shortcut for comparing the color schemes of different apps at once because icon color tends to be the same as UI color.

Let’s take this listing of top fitness apps in 2020 as an example:

BAaR6thTis8vAmts 4SM80o8JoXf56aGwdtxVy5xkic0epbxd OMPDNtoxJIZ4DPQ3wxL3TonG8kwXIXjlSiOwzxq3U2BWxPXQmrKxVo5FYqkot453IAbS02OUjS7BFdkWO26rz25d7dun2biM5zByauGJY93Z pBZ 2eVjA

Source: Mobile Action

You’ll notice that the vast majority of exercise apps use the red and orange color scheme. No surprise there, as they give the impression of energy and activity.

So, using the same colors is a good idea if you’re building your own fitness app.

However, adopting isn’t always the best approach. Sometimes, you want to know what everyone’s using so you can be different and stand out.

Take the neobank Cleo.

sOxWzf5rcj7yTXdiOYjo5H4Zl3KJTnrLWJn7hJxi7z LK75WPfK9zLzblE5gEVGQ8JfkLs4BRzFnCi1CsrB6NnxTN

Source: Lauren Rowe

The UI design veered away from the typical blue or white color schemes of financial apps. Instead, it opted for a bright and colorful palette.

It was an intentional move to showcase the fresh and irreverent nature of Cleo.

So, if you want to aim for the same vibe in your app, you already have proof of concept.

Ultimately, that’s the advantage of checking your competitors. It allows you to evaluate if your color scheme works for your target market—without doing it yourself.

Strive for minimalism

Minimalism is a crucial principle to consider if you want to achieve the best palette for your app. That’s because it helps prevent your UI design from becoming a colorful mess like this:

rwjwSF1W LLegIJJ873R7vJriHUs3dHHJ9AtBHg1ES4BFWwqVbjBEg fSMakniDEzk2mCzqR1S8G8VhCdkjN 3vVqa5Wj1MK8UxTaoNe2cErzIFHzkWGG F

Source: Sitepoint

The main way to achieve a more minimalist approach and avoid this eyesore is to use visual hierarchy.

Visual hierarchy is the practice of arranging UI elements based on importance by emphasizing crucial areas like the headline. And one of the primary methods of doing this is through color.

For example, notice that most call-to-action (CTA) buttons use a bright color like red or green to stand out.

But it can only achieve this if no other surrounding UI elements use the same hues, as the illustration below shows.

vi4kqoiRSmdI74EZktuOQYvLoA0Q1qCwAq Gu8MEdvGD99heoHkazcFstagcpg995NV8awKkKyrOiyuqYGQ7QZPJP9Mh6HA6iCSWajQ yudcN EMJlYcU

Source: UX Movement

Thus, you should limit your UI design’s palette to a maximum of four colors, then rely on whitespace or monochromatic hues for everything else.

One would be the primary or dominant color you’ll use most in your app design. Examples would be the title bar or menu icons.

The primary color is often derived from your brand colors, and it’s a great way to enforce your branding throughout the app.

You can also use various shades of your primary color to have more options in your design.

For example, notice how the UI design below uses different shades from only one primary color. That way, you can stick with one palette but still create enough contrast between elements.

xy FJ8 Y 7sfVnmUN j 9MNT0cGuytYL NECVmiQnmi2pntYCyur7k9tF8FiI yzjpUvZv62l6wpOtUODrKYE EFy6rsX0iRxq0By3npTGm3G ZRococtbzXkdItZP9fjyK02 KeH z sCnFER3wQc


The other colors are secondary, and used to accent certain elements such as buttons, switches, or text selection highlights.

Because they’re only used as accents, secondary colors should be used only sparingly.

Remember, they shouldn’t compete with your primary color, or else it would break your visual hierarchy.

There are exceptions, of course.

Black or white is almost always used for body text, thanks to their legibility. And some colors are universal, like red, for denoting errors.

Use color psychology

According to research, people make snap judgments about a product within the first 90 seconds of seeing it.

And a lot of these split-second decisions are based on color psychology.

Color psychology is the emotional effect colors have on people. This is powerful for a UI designer since you can alter a user’s state and mood by using the right colors.

At the core of color psychology is the notion of warmth and coolness.


Source: Glovory Design

Warm colors are generally considered more dynamic and active. However, they can evoke either happiness and passion or danger and hostility.

Cool colors, on the other hand, are calmer and more soothing. But they could also be used to represent sadness.

But these are just broad strokes.

Specific colors also have their associated emotion and mood. Check out this chart:


Source: Huffpost

Once you know color psychology, you’ll begin to understand why some apps gravitate towards one color over another.

For example, notice that many financial apps use blue as their primary color. That’s because blue gives a feeling of trust and reliability, which is important when handling people’s money.

On the flip side, fun apps like games often use a red or orange palette. That’s because both are warm colors, meaning they’re dynamic.

Not only that, but they also evoke feelings of excitement, friendliness, and confidence in the user.

Color psychology can even influence users’ actions to help drive conversion rates.

For instance, this research shows that red is the most effective color for a buy button because it evokes a sense of urgency.

5Aovr2uzIKIwq9wGYDEiJy1Tx8oN nBZHF gFZr1gsRIlNXtJecxCiq5v26yMeJp48V9mMY3ehTutgHPFKJ fwC7kbdzzV3DsQFb5pG08ItS4lpU9Ytkdf2g8 b4ErKWGpKsZ1yIYHrYlBDIowRe l1PoxS3py4t8CTJFLdqdE2H9F AS 0zR7wZTA

Source: Amasty

But as with anything else, these findings aren’t hard and fast truths.

For example, when the researchers conducted the study above in the consumer electronics industry, a green buy button drove the highest conversion.

Ultimately, combining color psychology with solid market research will deliver the best results.

Utilize app category colors

In most cases, apps in the same category tend to share similar color palettes. Thus, it’s a good idea to adopt the same palette as the other apps in your niche.

Following the color conventions of your chosen app category isn’t just trendy. It helps users to associate your app with other apps in your niche. In most cases, it serves a practical purpose.

Take social media apps. Notice that most of them have a blue color scheme:

P9RNNUUPMuL Lc59GZ3Mv3mN8HNVBiAiOfUxuj HA PVBFuz2xNrC5e cFL3ZDOfDKBe3LxdlB61zLDG4gx6x t748vyNmRisLSIpucTMoeX5msF

Source: Dew Solutions

Blue is popular because it goes well with text, which social media apps have in abundance. Furthermore, many users are already familiar with social media going with a blue palette.

Another example is the trend of delivery apps using red hues.

mRoYU84jGHdfiIwc 9Ls Z3XehUDLgBaa hKjtqM5nPdhvl32tiW94tGZEbYDcQ1H9pEkld1Q1He8PqC8y1EL7ZQjYPvTgVSTnKl nHh6BATZJmnYfLWaHZ2U6wrPTqdAVsSU1aMhwRybe 2aM LFjM9tL8JbsYnSpu2ZGEpIb8oFm2Ofik3Mg06 g

Source: Apptunix

Remember that red is associated with energy and speed, which are desirable qualities for delivery services.

Furthermore, red can also instill hunger and appetite in a person, which is why many fast food restaurants use the color.

Using red in your delivery app is like borrowing these already established qualities. People would come to expect that your app provides a fast service.

The only thing you need to do is to deliver on that promise.

Now, breaking the color convention of your category can be risky, but there are situations where it could be wise.

One good example is if you want to stand out among a sea of apps with the same hues.

But in most cases, it’s easier (and safer) to stick with what’s working.

Use color palette generators

Palette generators are arguably the most useful tool for deciding which color to use in your UI design.

The truth is that picking a group of colors that go well together is no easy feat. The science of doing this is called color theory.

At the heart of color theory is the color wheel, a circular diagram that arranges colors strategically, like so:

LPPUK1bL4MkAfKQkW4N6jtEH3s2YpD3DoYbA0T1IxXj6l8pJcNFr5g14CnqMOgqw3UMUkE nDZwgE8kB4DcRBsDuaUm6KADR38CDhmAAAZ8H

Source: Color Meanings

To pick colors, you can use different color schemes, depending on the effect that you want to achieve.

For example, a monochromatic approach picks shades from only one color (such as dark purple and light purple from purple). This is great for minimalistic designs.

On the other hand, a complementary approach picks two opposite colors in the color wheel.

Complementary colors deliver stark contrast, which helps make elements stand out in the design.

If you want to balance three colors in a design, you could consider picking triadic colors.

Indeed, there are other methods to choose from:

HalcVEDiJ96 L4xdfW89VMy10CEKHK77WBprM14bJnwSjWxAzVxhC7Urgv21c940QyqeF91 Arkd8Yz0rTSdh71qP

Source: Interaction Design Foundation

It seems like a lot to keep in mind.

But the main benefit of a palette generator is that it automates the process for you.

You can pick which method you want, and the software will choose the right sets of colors for you with minimal guesswork involved.

Some generators even have a random feature so you can browse through color palettes for inspiration.

Fortunately, there’s no shortage of color generators online, both paid and free. Good tools to start with include Coolors and Muzli Colors.

How to achieve excellent UX

No doubt picking the right colors can do wonders for your app’s UX.

But that’s just one aspect of it. Achieving excellent UX is tricky and challenging, with many best practices and pitfalls to remember.

And the best way to prepare for this is by acquiring knowledge.

For further reading, we suggest going over the top UX mistakes to avoid. You can also familiarize yourself with the top UX trends that could help your app succeed.

Written by

Petar Simic

Co-founder and Shake CEO

Petar leads Shake (DECODE’s sister company) as CEO, delivering the product to a growing number of happy, innovative clients. Day-to-day, he ensures the engineering, design, product, marketing and sales teams all work in harmony. Before moving to Shake, Petar led DECODE. Although an engineer by schooling, his natural talent soon saw him making an impact on the marketing, sales and branding side of things. Petar’s passions include architecture, skiing, sailing, and a good glass of red wine.

Related articles