How to Choose a Color Palette That Reflects Brand Identity

Every designer hits this wall at some point. You open Figma, create a new frame, and then just stare at it wondering what color the app should even be. Should it be blue because everyone trusts blue? Should it be bold and loud to stand out? Should it match the logo exactly, or is that too literal?

I have been through this exact confusion multiple times while building design systems for real products, and honestly, the answer is not “pick your favorite color.” A color palette is not decoration. It is a communication tool. Before a user reads a single word on your screen, the color has already told them something about your brand — whether it is playful, serious, premium, affordable, calm, or energetic. That is a huge responsibility for something that seems as simple as choosing a hex code.

So let’s talk about a framework that actually makes this process less random: the 60-30-10 rule.

What is the 60-30-10 Rule

This rule originally comes from interior design, believe it or not. Designers used it to decorate rooms so that the color balance never feels overwhelming or boring. The same logic works beautifully for digital products.

Here is how it breaks down:

60% – Dominant Color
This is the color that covers most of your screen. Backgrounds, large surfaces, containers — basically the color your user sees the most without even noticing it. It sets the overall mood of the app. If this color is wrong, the whole app feels off, even if every other detail is perfect.

30% – Secondary Color
This supports the dominant color. Think of navigation bars, cards, section dividers, or secondary buttons. It creates depth and separates different areas of the interface without fighting for attention.

10% – Accent Color
This is the color that gets things done. Call-to-action buttons, links, notifications, highlights — anything that needs the user’s eyes immediately. Because it is used sparingly, it stays powerful. If you use your accent color everywhere, it stops being an accent and just becomes noise.

The beauty of this rule is balance. Nothing competes for attention, and every color has a clear job.

Connecting Color to Brand Identity

Choosing colors based on a ratio is only half the job. The real question is: what should those colors actually be, and why?

This is where a lot of designers go wrong. They pick trendy colors instead of meaningful ones. Before opening a color picker, I always ask three questions:

1. What emotion should the brand trigger?
A fintech app wants to feel trustworthy and stable, so cooler tones like blue or deep green often work well. A food delivery app wants to feel appetizing and energetic, so warm tones like orange or red show up a lot. A wellness app wants calmness, so soft greens, sage, or muted tones are common. Color psychology is not exact science, but it is a strong starting signal.

2. Who is the target user?
A palette that works for Gen Z users may feel too loud for a professional B2B audience. A palette built for a premium product needs restraint — often fewer colors, more whitespace, and muted tones rather than bright saturated ones.

3. What does the product actually do?
This one gets ignored a lot. A city discovery app, for example, needs colors that reflect the energy and locality of a real place, not a generic tech-startup blue. A healthcare app needs colors that feel safe and clinical, not experimental.

Once you have answers to these three questions, your dominant, secondary, and accent colors should naturally follow that emotional direction — not the other way around.

Building the Actual Palette

Here is a simple workflow that works well in practice:

1. Pick your dominant color first. This becomes your brand’s backbone. Everything else is built to support it.
2. Choose a secondary color that complements, not competes. Analogous colors (colors next to each other on the color wheel) usually blend smoothly. If you want more contrast, complementary colors work, but use them carefully.
3. Save the boldest, brightest color for your accent. This should be the color users associate with action. It needs enough contrast against your dominant color to be instantly visible.
4. Create tints and shades of each color. A single flat color is not enough for a real product. You need lighter tints for backgrounds, hover states, and disabled states, plus darker shades for text and emphasis. This is basically how design systems create their color scale, like a 50 to 900 range designers commonly use.
5. Check contrast for accessibility. No matter how good a palette looks, if the text is unreadable against the background, the whole thing fails. Always test contrast ratios before finalizing anything.

A Quick Example

Imagine you are designing an app for a local community platform. The dominant color could be a deep, grounded tone like forest green, because it reflects trust and locality. The secondary color could be a warm cream or off-white, giving it a human, approachable feel instead of a cold corporate one. The accent color could be a bright green, used only for buttons and key actions, so users always know exactly where to tap next.

Notice how none of these choices were random. Each one supports a feeling the brand wants to create.

Final Thought

A color palette is not something you finalize in five minutes by browsing Pinterest. It is a decision that should be backed by ratio, psychology, and purpose. The 60-30-10 rule gives you the structure, but the meaning behind each color is what actually turns a palette into a brand identity.

Next time you are stuck choosing colors, do not start with “what looks nice.” Start with “what should this brand feel like.” The right palette will follow naturally after that.