Mobile App UI Color Palettes

Modern mobile apps are expected to support both light and dark appearance modes, following the system preference set by the user. Designing for both from the start is far easier than retrofitting dark mode into a light-only app.

The key difference between good and bad dark mode in mobile is surface elevation. In Material Design's dark theme specification, darker surfaces are at lower elevations and lighter surfaces are at higher elevations, the opposite of light mode. Cards and modals feel "elevated" because they are slightly lighter than the page background, not darker. This creates a sense of depth without using drop shadows, which are largely invisible on dark backgrounds.

For iOS dark mode, Apple's semantic color system uses adaptive colors that automatically shift between light and dark values. If you are building in Swift UI, using system colors wherever possible ensures your app respects user preferences automatically. For custom brand colors, define light and dark variants and reference them by semantic name in your code.

For React Native and cross-platform apps, CSS custom properties or a design token library (Style Dictionary, Theo) is the cleanest architecture. Define every color as a token with both light and dark values, then inject the appropriate set based on the current color scheme.

Color accessibility in mobile apps goes beyond contrast ratios. Apple's Human Interface Guidelines and Google's Material Design both recommend minimum touch target sizes of 44×44 points (iOS) or 48×48dp (Android). Smaller touch targets need stronger visual differentiation through color, shape, or size to compensate.

Icon-only buttons are a particular risk area. Without a text label, users rely entirely on the icon's visual weight and the button's color to understand its function. Ensure that icon-only CTAs use your primary brand color with sufficient contrast against their background, at minimum 3:1 for large interactive elements under WCAG 2.1.

For tab bar and navigation bar color, avoid using your primary CTA color as the selected-state indicator if it is too similar in saturation to unselected items. A common mobile pattern uses a bold application of the primary color for the selected tab icon with the unselected icons in a muted grey (#9CA3AF or similar), creating a clear visual jump between states.

Test your palette in actual device conditions: direct sunlight, low-brightness night mode, and with OS accessibility settings like increased contrast and smart invert enabled. What looks fine on a calibrated design monitor can fail badly on a real phone screen outdoors.

Your app icon is the smallest and most distilled expression of your brand on mobile. It appears at sizes from 29×29px (Spotlight search) to 1024×1024px (App Store), so it must be legible and recognizable at every scale.

From a color standpoint, the most successful app icons share a few traits: a single dominant background color (not a gradient, icons rendered at small sizes turn gradients into muddy noise), high-contrast iconography or letterform on top, and a clearly recognizable silhouette.

Avoid using the same background color as the iOS Springboard wallpaper defaults (solid black, solid white, or the standard dark blue gradient). Your icon will blend in rather than stand out.

For distinguishing yourself from competitor apps in the same category, study what dominant colors are used in your app category and deliberately choose something adjacent but different. If your entire app category uses blue, a deep green or warm amber will make your icon pop on the home screen.