Color choice is one of those things that seems simple until you actually try to do it well. Pick wrong and your app looks amateurish. Pick right and users don't even notice—they just feel like the app is "well designed."

This guide covers the practical side of color for mobile apps. Less theory, more usable advice.

The basics you actually need

Primary, secondary, neutral

Most apps need three color categories:

Primary color: Your brand. The main action buttons, links, headers. One color that identifies your app.

Secondary color: Accent or complement. Used sparingly for variety or to differentiate secondary actions from primary ones.

Neutral colors: The bulk of your UI. Backgrounds, text, borders, cards. Usually grays or very desaturated versions of your primary.

That's it. Three categories. You don't need more to start.

A simple starting palette

┌─────────────────────────────────────┐
│  Primary:    #2563EB (blue)         │
│  Secondary:  #7C3AED (purple)       │
│  │                                  │
│  Neutrals:                          │
│  Background: #FFFFFF                │
│  Surface:    #F3F4F6                │
│  Border:     #E5E7EB                │
│  Text:       #111827                │
│  Text muted: #6B7280                │
└─────────────────────────────────────┘

This palette works. It's boring but functional. Start here, then customize.

Where colors go

Primary color:

Primary buttons
Links
Active states (selected tabs, toggles)
Key icons
Progress indicators

Secondary color:

Secondary buttons (sometimes)
Decorative elements
Graphs and charts (as second data series)
Badges or highlights

Neutrals:

Everything else

Most of your app should be neutral colors. Primary and secondary are accents, not the main event.

Color psychology (the real version)

Color psychology gets oversimplified. "Blue means trust" is too reductive. Here's what actually matters:

Cultural context varies

Red means danger in Western contexts but luck in Chinese culture. Green means go/safe most places but is the color of Islam in many Middle Eastern countries. White is clean and pure in the West but associated with death in parts of Asia.

Know your audience. If you're building for a global market, test your colors with users from different cultures.

Industry expectations exist

Some colors feel right for certain industries:

Blue: Finance, tech, healthcare, corporate. Safe and professional. Green: Health, finance (money), sustainability, outdoors. Purple: Luxury, creativity, beauty, wellness. Red: Food, entertainment, urgency, energy. Orange: Youth, energy, affordable/value positioning. Black: Luxury, fashion, sophistication, premium.

These aren't rules, but fighting them requires intention. A bank app in hot pink would need a good reason.

Emotion is contextual

Colors don't make people feel things in isolation. A calming blue in a meditation app is different from a corporate blue in a banking app. Context matters more than the color itself.

Building accessible color systems

Contrast requirements

WCAG (Web Content Accessibility Guidelines) requires:

4.5:1 contrast ratio for normal text
3:1 contrast ratio for large text (18pt+ or 14pt+ bold)
3:1 contrast ratio for UI components and graphics

This isn't optional. Many users have vision impairments. And in some jurisdictions, accessibility is legally required.

Testing contrast

Tools that check contrast ratios:

WebAIM Contrast Checker (online)
Stark (Figma plugin)
Color Contrast Analyzer (desktop app)

Or use the formula: (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are relative luminance values. But honestly, just use a tool.

Common contrast failures

Light gray text on white background. Looks elegant but often fails. #9CA3AF on white is only 2.5:1—not enough.

Colored text on colored backgrounds. Blue text on purple background might look okay but fail contrast requirements.

Placeholder text. Often way too light. Users with vision issues can't see it.

Bad:  Placeholder #D1D5DB on white (2.1:1) ✗
Good: Placeholder #6B7280 on white (5.4:1) ✓

Don't rely on color alone

Color blindness affects about 8% of men and 0.5% of women. If color is the only way you communicate information, some users miss it.

Bad:
┌─────────────────────────────────────┐
│  Status: 🔴 🟡 🟢                   │
│  (What if you can't see red/green?) │
└─────────────────────────────────────┘

Good:
┌─────────────────────────────────────┐
│  Status:                            │
│  ✗ Error  ⚠ Warning  ✓ Success     │
│  (Icon + color + text)              │
└─────────────────────────────────────┘

Use icons, text, patterns, or position in addition to color.

Dark mode design

Dark mode isn't just inverting colors. It requires its own palette. We cover this topic in depth in our dark mode design guide.

Why dark mode is different

Pure black (#000000) is harsh. It causes halation (text appears to bleed) and creates too much contrast with white text. Use dark grays instead: #121212, #1E1E1E, or similar.

White text should be slightly dimmed. Pure white (#FFFFFF) on dark backgrounds is tiring. Use #E5E7EB or similar for body text.

Saturated colors look different. Bright colors that look fine on white can be eye-searing on dark backgrounds. Desaturate them slightly for dark mode.

A dark mode palette

┌─────────────────────────────────────┐
│  Light Mode    →    Dark Mode       │
├─────────────────────────────────────┤
│  #FFFFFF       →    #121212         │
│  #F3F4F6       →    #1E1E1E         │
│  #E5E7EB       →    #2D2D2D         │
│  #111827       →    #E5E7EB         │
│  #6B7280       →    #9CA3AF         │
│  #2563EB       →    #3B82F6         │
│  (darker blue)      (lighter blue)  │
└─────────────────────────────────────┘

Notice: primary colors often get lighter in dark mode to maintain visibility.

Dark mode elevation

In light mode, shadows create depth. In dark mode, shadows are invisible on dark surfaces. Instead, use lighter surfaces for elevated elements.

Dark mode elevation:
┌─────────────────────────────────────┐
│  Background:   #121212              │
│  Card (low):   #1E1E1E              │
│  Card (high):  #2D2D2D              │
│  Modal:        #3D3D3D              │
└─────────────────────────────────────┘

The closer to the user, the lighter the surface.

System preference detection

Users have system-wide dark mode settings. Respect them by default, but let users override.

┌─────────────────────────────────────┐
│  Appearance                         │
├─────────────────────────────────────┤
│  ○ Light                           │
│  ○ Dark                            │
│  ● System (currently Dark)         │
└─────────────────────────────────────┘

See your palette in action: Generate app screens with your color scheme — pick your brand color and GenDesigns builds a full, coordinated UI around it.

Semantic colors

Certain colors have universal meanings in UI.

Status colors

Success/Positive: Green variants

Light mode: #059669 (text), #D1FAE5 (background)
Dark mode:  #34D399 (text), #064E3B (background)

Error/Danger: Red variants

Light mode: #DC2626 (text), #FEE2E2 (background)
Dark mode:  #F87171 (text), #7F1D1D (background)

Warning: Yellow/amber variants

Light mode: #D97706 (text), #FEF3C7 (background)
Dark mode:  #FBBF24 (text), #78350F (background)

Info: Blue variants

Light mode: #2563EB (text), #DBEAFE (background)
Dark mode:  #60A5FA (text), #1E3A8A (background)

Interactive states

Buttons and interactive elements need multiple states:

Primary button:
- Default:   #2563EB
- Hover:     #1D4ED8 (darker)
- Active:    #1E40AF (darkest)
- Disabled:  #93C5FD (desaturated)

Each state should be visibly different. Users need feedback that their interaction registered.

Color in data visualization

Charts and graphs have different color needs than UI.

Sequential data

When showing a range from low to high, use a single hue with varying lightness:

Low ──────────────────────────── High
#DBEAFE  #93C5FD  #3B82F6  #1E40AF

Categorical data

When showing different categories, use distinct hues:

Category A: #3B82F6 (blue)
Category B: #10B981 (green)
Category C: #F59E0B (amber)
Category D: #8B5CF6 (purple)

Limit to 5-7 categories. More than that and users can't distinguish them.

Colorblind-safe palettes

Some color combinations are safer for colorblind users:

Blue + Orange (deuteranopia-safe)
Blue + Purple + Brown
Avoid red/green combinations as the only distinction

Current trends (use sparingly)

Gradients are back

After years of flat design, gradients have returned—but subtler than the 2000s versions.

Button gradient: #3B82F6 → #8B5CF6
Background gradient: #FEF3C7 → #FBCFE8

Use them as accents, not everywhere.

Muted and desaturated

2026 favors slightly muted colors over fully saturated ones. Instead of #FF0000 (pure red), use #EF4444 (still red, but more refined).

Monochromatic schemes

Apps with single-color schemes (variations of one hue) feel sophisticated when done well.

Monochromatic blue:
Primary:    #2563EB
Secondary:  #1D4ED8
Accent:     #3B82F6
Background: #EFF6FF

Neubrutalism accents

Some apps use harsh, high-contrast color combinations as accent elements. Works for playful brands, not for everyone.

Generating color schemes with AI

AI tools can suggest color palettes, but you need to guide them.

Example prompt:

Generate a color scheme for a meditation and wellness app.

Requirements:
- Calming and peaceful feel
- Works in both light and dark modes
- Meets WCAG AA contrast requirements
- Primary color, secondary color, and full neutral scale
- Success, error, warning status colors

Target audience: Adults 25-45 seeking stress relief.
Competitive reference: Calm, Headspace (but distinct from them).

You can also generate complete app designs with your color scheme applied to see how the palette works in real screen layouts. Then test the output for:

Actual contrast ratios (AI often gets this wrong)
How it looks in real UI contexts
Dark mode viability

Testing your colors

In context

Colors look different in isolation vs. in a real interface. Always test in context:

On actual mobile screens (not just design tools)
In various lighting conditions
On both iOS and Android (color rendering varies)

With real users

What looks good to you might not work for your audience. Test with:

Users with varying vision abilities
Users from different cultural backgrounds
Users of different ages (color perception changes with age)

Across devices

The same hex code looks different on different screens. Test on:

iPhones (tend toward cooler tones)
Various Android phones (color calibration varies widely)
In bright sunlight (low contrast becomes invisible)

Color and typography together form the backbone of your app's visual identity. Getting both right makes the difference between "generic" and "polished."

Building a design system

As your app grows, you need systematic color management.

Name colors semantically

Bad:
$blue-500: #3B82F6;

Good:
$color-primary: #3B82F6;
$color-primary-hover: #2563EB;

Semantic names make it easier to change your palette later without renaming everything.

Define a complete scale

For each color category, define a full scale:

--primary-50:  #EFF6FF;
--primary-100: #DBEAFE;
--primary-200: #BFDBFE;
--primary-300: #93C5FD;
--primary-400: #60A5FA;
--primary-500: #3B82F6;
--primary-600: #2563EB;
--primary-700: #1D4ED8;
--primary-800: #1E40AF;
--primary-900: #1E3A8A;

This gives you flexibility for various use cases without creating one-off colors.

Document usage

Write down when to use each color:

"Primary-600 for button backgrounds"
"Gray-100 for card backgrounds in light mode"
"Error-500 only for actual error states, never decorative"

Documentation prevents color drift as your team grows.

Conclusion

Color is one of those design elements that users don't consciously notice when it's right—they just feel like the app is well-made. Get it wrong and everything feels off.

Start simple: primary, secondary, neutrals. Test for accessibility. Build light and dark modes intentionally. Then refine based on actual use.

The best color schemes aren't the most creative ones. They're the ones that work so well users never think about them.

Related reading:

Dark Mode Design Guide - Getting dark themes right
App Typography Guide: iOS vs Android - Font best practices
Mobile UI Patterns 2026 - Practical design reference