Mobile App Color Palette: How to Choose + 20 Palettes

This guide is for founders, developers and designers who need a color palette that looks good, reads well and holds up across every screen of a mobile app. You'll learn a step-by-step method based on color roles rather than favourite colors, how to handle contrast and dark mode, how to hand colors to developers as tokens, and you'll get 20 ready-to-use palettes with hex codes.

TL;DR: An app palette is a set of roles, not a set of pretty colors: one primary for actions, neutrals for backgrounds and text, and semantic colors for success, warning and error. Use the primary sparingly (roughly 10% of the screen), check every text pair against WCAG contrast, design dark mode deliberately, and ship colors as named tokens.

Step 1: Define the color roles

Every app needs the same roles, regardless of brand.

Most of these are neutrals. Material 3 formalises the same idea with roles like primary, on-primary, surface and on-surface, and iOS provides semantic system colors such as label, secondary label and system background that adapt automatically to light and dark mode.

Step 2: Pick the primary color

The primary color is the one users learn means "tap here". Choose it based on three things:

1. •Category expectations. Finance leans blue and green, food warm red and orange, wellness soft green. Break convention only on purpose.
2. •Distinctiveness. Look at your top five competitors' icons and primary buttons. If they're all blue, a different hue makes your app recognisable on the home screen.
3. •Contrast. White text on your primary button should reach 4.5:1. Very bright yellows, light greens and cyans usually fail, so either darken them or use dark text on them.

If you have a brand image or logo to start from, the color picker from image pulls a palette from it and assigns colors to roles. Our walkthrough on building an app palette from a screenshot shows that process in detail.

Step 3: Build the neutrals

Neutrals do most of the work. Pure grey can feel cold, so many teams tint neutrals slightly toward the primary hue, a warm grey for a coral brand or a cool grey for a blue one.

Build a scale of around 8–10 steps from near-white to near-black: the lightest for backgrounds, mid-light for borders, mid-dark for secondary text (still passing 4.5:1), and the darkest, usually not pure black, for primary text.

Step 4: Apply the 60-30-10 rule

Borrowed from interior design, the 60-30-10 rule is a useful sanity check:

• •60% dominant: backgrounds and surfaces (neutrals).
• •30% secondary: text, cards, secondary elements.
• •10% accent: the primary color on buttons, active states and highlights.

Spotify's dark interface with its green reserved for key actions, and Airbnb's mostly white screens with its pink-red for primary buttons, both follow this kind of restraint.

Step 5: Add semantic colors

Success, warning and error need to be distinguishable from each other and from your primary. Common choices are a green for success, an amber for warning and a red for error. Two rules:

• •If your primary is red or green, shift the semantic color's hue or value so error states don't look like normal buttons.
• •Always pair semantic colors with icons or text ("Payment failed"), never color alone. Roughly 1 in 12 men have some form of color vision deficiency, a figure widely reported by color-blindness organisations.

Step 6: Check contrast

WCAG 2 sets the minimums most teams use:

Test every text-on-background pair, including text on your primary button, secondary text on surfaces, and placeholder text. The contrast checker tests WCAG 2 and APCA and suggests the nearest passing colors when a pair fails.

Step 7: Design dark mode on purpose

Dark mode isn't an inversion. Guidelines that hold up:

• •Use dark grey, not pure black, for most backgrounds (something like #121212 to #1C1C1E). Pure black can work for OLED-focused apps, but surfaces need lighter steps to show depth.
• •Show elevation with lighter surfaces, since shadows barely show on dark backgrounds. Material 3 uses tonal surface colors for this.
• •Desaturate accents. Bright, saturated colors vibrate on dark backgrounds; use a lighter, softer version of your primary.
• •Use off-white text, not pure white, for long reading.
• •Re-check contrast. A pair that passes in light mode tells you nothing about dark mode.

Step 8: Ship it as tokens

Give developers named roles, not scattered hex codes:

{
  "color": {
    "primary": { "light": "#2563EB", "dark": "#7FA6F5" },
    "onPrimary": { "light": "#FFFFFF", "dark": "#0B1530" },
    "background": { "light": "#F7F8FA", "dark": "#111318" },
    "surface": { "light": "#FFFFFF", "dark": "#1B1E25" },
    "textPrimary": { "light": "#111827", "dark": "#E8EAF0" },
    "textSecondary": { "light": "#4B5563", "dark": "#A3A9B6" },
    "border": { "light": "#D9DDE3", "dark": "#2E333D" },
    "success": { "light": "#15803D", "dark": "#4ADE80" },
    "warning": { "light": "#B45309", "dark": "#FBBF24" },
    "error": { "light": "#DC2626", "dark": "#F87171" }
  }
}

These map to iOS asset catalog colors, a Material 3 color scheme, or a React Native or Flutter theme. You can try your palette on real screens in floow by putting the hex values in your prompt, which is a quick way to see whether the 60-30-10 balance actually works.

20 ready-to-use mobile app color palettes

Each palette lists primary, accent, background, surface and primary text for light mode. Check contrast for your exact usage, especially if you put white text on the accent.

A few notes on using these:

• •Bright primaries need dark text. Night Lavender (#A99BEB) and Volt Fitness (#C6F432) need their dark background color as button text; white text fails. Every other primary passes 4.5:1 with white text.
• •Dark palettes need a light-mode partner if you support both themes. Generate one by keeping the hue and raising lightness for backgrounds.
• •Accents are for small areas: badges, illustrations, charts and secondary highlights, not body text.
• •Gradients: if your brand uses gradients, build them from the primary and accent; the gradient generator exports them as CSS and native code.

For category-specific advice, our guide to banking app design explains why fintech apps should avoid red for normal outgoing transactions.

Color palette checklist

• • Every color has a role name (primary, surface, text secondary…).
• • One primary color, used for actions on roughly 10% of each screen.
• • White (or dark) text on the primary button passes 4.5:1.
• • Secondary text passes 4.5:1 on both background and surface.
• • Field borders and icons pass 3:1.
• • Error, warning and success are distinct from the primary and always paired with icons or text.
• • Dark mode uses dark greys, lighter surfaces for elevation and desaturated accents.
• • Colors are shipped as tokens with light and dark values.

FAQ

How many colors should a mobile app palette have?

Usually 10–12 including neutrals: one primary, an optional accent, a background, one or two surfaces, two text colors, a border color, and success, warning and error. Most of the palette is neutrals; only one or two colors are truly "brand".

How do I choose a primary color for my app?

Consider your category's expectations, what your competitors use, and contrast. Pick a hue that stands out from competitors, then adjust its lightness until white or dark text on it passes 4.5:1.

What is the 60-30-10 rule in app design?

It's a balance guideline: about 60% of the screen in dominant neutral colors, 30% in secondary colors and 10% in the accent or primary. It keeps the primary color reserved for the actions you want users to notice.

How do I check if my app colors are accessible?

Test every text and UI pair against WCAG 2: 4.5:1 for normal text, 3:1 for large text and UI components. Check both light and dark themes and make sure color is never the only way information is shown.

Design it with floow

Paste your palette into a prompt on floow.design to see it on real iOS or Android screens, then refine through chat. Try: "Design a fitness app home, workout detail and progress screen using the Coral Energy palette: primary #D2343A, accent #FFB224, background #FFF8F5, surface #FFFFFF, text #1C1917. Use the primary only for main buttons and active tabs, with a matching dark mode."