Key takeaway: A working mobile app color palette needs three things: one primary color for actions, one secondary accent used sparingly, and a neutral scale that carries most of the interface — with every text and UI pairing meeting WCAG's 4.5:1 and 3:1 contrast minimums. GenDesigns generates a full coordinated palette and applies it across every screen in a project automatically.
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.
The fastest way to calibrate is to open five well-regarded apps in your category and note the actual hex values they use. Our guide to learning UI design by cloning apps covers how to do this systematically rather than by vibes.
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
For more prompt structures like the one above, including palette and theming prompts, see the AI design prompt library.
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.
Frequently Asked Questions
What is a good color palette for a mobile app?
A good starting palette is one primary color for actions and brand identity, one secondary accent used sparingly, and a neutral scale for backgrounds, surfaces, borders, and text. The palette at the top of this guide — #2563EB primary, #7C3AED secondary, and a gray neutral ramp from #FFFFFF to #111827 — is deliberately unexciting and works for almost any app. Customize the primary and secondary; leave the neutral structure alone.
How many colors should a mobile app use?
Three categories, not three colors. Primary, secondary, and neutrals is enough to build an entire interface. Where you do need more range is within each category: define a 50-to-900 scale per color rather than inventing one-off hex values as you go. For charts and data visualization, cap categorical palettes at 5-7 distinct hues — beyond that, users can't reliably tell the series apart.
What contrast ratio do mobile app colors need?
WCAG requires 4.5:1 for normal body text, 3:1 for large text (18pt and up, or 14pt bold and up), and 3:1 for UI components and graphical objects. The most common failure is light gray text on white: #9CA3AF on white is only 2.5:1 and fails. Placeholder text is the second most common offender. Check pairings with a contrast tool rather than eyeballing them.
How do I convert a light mode palette to dark mode?
Don't invert it. Replace pure white backgrounds with dark grays like #121212 rather than pure black, which causes halation. Dim body text from pure white to something like #E5E7EB. Lighten your primary color rather than darkening it — #2563EB becomes roughly #3B82F6 — because saturated colors read differently against dark surfaces. And replace shadow-based elevation with lighter surfaces: the closer an element is to the user, the lighter its background. The dark mode design guide works through each rule with examples.
Can AI generate a mobile app color scheme?
Yes, but it needs direction and verification. Specify the mood, the audience, whether it needs light and dark variants, and that it must meet WCAG AA — then check the output's actual contrast ratios, because AI frequently gets those wrong. Our free AI Tailwind theme generator produces a full palette, and GenDesigns applies a generated theme consistently across every screen in a project.
Are there AI tools that generate Android app themes?
Yes. Any AI theme generator that outputs a full color scale can feed an Android theme, though Material Design 3 has its own tokens and dynamic color behaviour that are worth prompting for explicitly. See our walkthrough of generating Android app themes with AI.
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.
Free tools:
- AI Tailwind Theme Generator - Need a color palette? Generate one with AI in seconds
- App Design Cost Calculator - Estimate your app design budget
Related reading:
- Free Tailwind Theme Generator - Create custom color palettes with AI
- Dark Mode Design Guide - Getting dark themes right
- App Typography Guide: iOS vs Android - Font best practices
- Mobile UI Patterns 2026 - Practical design reference