Color Palettes

Mobile app color palettes

In an app, colors show what's tappable, what's active and what went right or wrong. These 12 palettes include a background, surfaces, a primary color and text for different types of apps, with hex codes you can take into Figma, Flutter, SwiftUI or React Native.

Fintech blue and green

Blue for trust and green for balances and successful transactions.

Delivery orange

Orange makes order buttons and promotions stand out.

Health and wellness

Calm; for doctor appointment, habit or tracking apps.

Purple dark mode

A very dark gray background instead of pure black, with a light purple accent.

Social pink and purple

For social networks, dating or content creators.

Minimal productivity

Highly readable; for task managers and work tools.

Education yellow

Cheerful and clear; for language or learning apps.

Energetic fitness

Lime and red on dark; for workouts and stats.

Meditation lavender

Soft and calm; for sleep, meditation or journaling apps.

Travel turquoise and sand

Evokes beach and sun; for bookings and travel guides.

Fresh food green

For grocery, recipe or nutrition apps.

Premium shopping

Neutral and elegant; lets product photos take the spotlight.

Tap a color to copy its hex code. The pencil icon opens the palette in the editor so you can change it.

Define state colors from the start

Every app needs colors for error, success, warning and info. Choose shades that fit your palette and don't use the error color for anything else, like brand buttons. Pair color with an icon or text so it's clear without relying on color alone.

Design dark mode too

Most phones support dark mode, and many users have it on. Inverting colors isn't enough: use very dark grays instead of pure black and slightly lower the saturation of your accents so they don't vibrate against the background.

Check contrast and tap targets

Text should have at least 4.5:1 contrast with its background, per WCAG. Buttons should look different when active, pressed or disabled. Test the app outdoors and with low brightness, since that's how many people use it.

Colors in these palettes

White smokeAlice blueCaribbean greenOxford blueWhiteLinenSafety orangeCoal blackOff-whitePine greenDeep tealSmoky blackEigengrauMagnoliaLavender blushRebecca purple

Frequently asked questions

How many colors should an app have?

Typically one primary color, an optional secondary color, neutrals for backgrounds and text, and four state colors: error, success, warning and info.

What color should an app's main button be?

Your brand's primary color, as long as it contrasts well with the background. Use it only for the most important action on each screen.

More palettes: Design

Keep exploring