Designing color for mobile apps introduces constraints that web designers rarely consider. Both iOS and Android have design systems (Human Interface Guidelines and Material Design) with specific color conventions. Your custom brand palette needs to coexist with these platform expectations.
Platform System Colors
iOS provides system colors (systemBlue, systemGreen, systemRed) that automatically adapt to light and dark mode, accessibility settings, and device context. Android's Material Design uses a similar dynamic color system. Your custom brand colors need to work alongside these system colors without conflicting.
Dark Mode Is Not Optional
On mobile, dark mode is a system-level setting that users expect every app to respect. Your palette must include both light and dark variants of every color from day one. PaletteRx's light and dark base colors give you the foundation, but you also need dark-mode variants of your primary and supporting colors (typically lighter and slightly less saturated).
Smaller Screens, Bolder Colors
Mobile screens are smaller, often viewed in suboptimal lighting, and used at arm's length. Colors need to be slightly bolder and contrast slightly higher than their web equivalents. A contrast ratio that is comfortable on a 27-inch monitor may feel washed out on a phone in sunlight.
Cross-Platform Consistency
If your brand has both a website and mobile apps, the palette should be the same core colors adapted for each platform. Build the master palette in PaletteRx (which is web-focused), then derive mobile variants: use the same hex values for brand colors, but follow each platform's conventions for system UI colors, navigation bars, and status bars.