Mobile Color System

# Mobile Color System Reference > OLED optimization, dark mode, battery-aware colors, and outdoor visibility. > **Color on mobile isn't just aesthetics—it's battery life and usability.** --- ## 1. Mobile Color Fundamentals ### Why Mobile Color is Different ``` DESKTOP: MOBILE: ├── LCD screens (backlit) ├── OLED common (self-emissive) ├── Controlled lighting ├── Outdoor, bright sun ├── Stable power ├── Battery matters ├── Personal preference ├── System-wide dark mode └── Static viewing └── Variable angles, motion ``` ### Mobile Color Priorities | Priority | Why | |----------|-----| | **1. Readability** | Outdoor, variable lighting | | **2. Battery efficiency** | OLED = dark mode saves power | | **3. System integration** | Dark/light mode support | | **4. Semantics** | Error, success, warning colors | | **5. Brand** | After functional requirements | --- ## 2. OLED Considerations ### How OLED Differs ``` LCD (Liquid Crystal Display): ├── Backlight always on ├── Black = backlight through dark filter ├── Energy use = constant └── Dark mode = no battery savings OLED (Organic LED): ├── Each pixel emits own light ├── Black = pixel OFF (zero power) ├── Energy use = brighter pixels use more └── Dark mode = significant battery savings ``` ### Battery Savings with OLED ``` Color energy consumption (relative): #000000 (True Black) ████░░░░░░ 0% #1A1A1A (Near Black) █████░░░░░ ~15% #333333 (Dark Gray) ██████░░░░ ~30% #666666 (Medium Gray) ███████░░░ ~50% #FFFFFF (White) ██████████ 100% Saturated colors also use significant power: ├── Blue pixels: Most efficient ├── Green pixels: Medium ├── Red pixels: Least efficient └── Desaturated colors save more ``` ### True Black vs Near Black ``` #000000 (True Black): ├── Maximum battery savings ├── Can cause "black smear" on scroll ├── Sharp contrast (may be harsh) └── Used by Apple in pure dark mode #121212 or #1A1A1A (Near Black): ├── Still good battery savings ├── Smoother scrolling (no smear) ├── Slightly softer on eyes └── Material Design recommendation RECOMMENDATION: #000000 for backgrounds, #0D0D0D-#1A1A1A for surfaces ``` --- ## 3. Dark Mode Design ### Dark Mode Benefits ``` Users enable dark mode for: ├── Battery savings (OLED) ├── Reduced eye strain (low light) ├── Personal preference ├── AMOLED aesthetic └── Accessibility (light sensitivity) ``` ### Dark Mode Color Strategy ``` LIGHT MODE DARK MODE ────────── ───────── Background: #FFFFFF → #000000 or #121212 Surface: #F5F5F5 → #1E1E1E Surface 2: #EEEEEE → #2C2C2C Primary: #1976D2 → #90CAF9 (lighter) Text: #212121 → #E0E0E0 (not pure white) Secondary: #757575 → #9E9E9E Elevation in dark mode: ├── Higher = slightly lighter surface ├── 0dp → 0% overlay ├── 4dp → 9% overlay ├── 8dp → 12% overlay └── Creates depth without shadows ``` ### Text Colors in Dark Mode | Role | Light Mode | Dark Mode | |------|------------|-----------| | Primary | #000000 (Black) | #E8E8E8 (Not pure white) | | Secondary | #666666 | #B0B0B0 | | Disabled | #9E9E9E | #6E6E6E | | Links | #1976D2 | #8AB4F8 | ### Color Inversion Rules ``` DON'T just invert colors: ├── Saturated colors become eye-burning ├── Semantic colors lose meaning ├── Brand colors may break └── Contrast ratios change unpredictably DO create intentional dark palette: ├── Desaturate primary colors ├── Use lighter tints for emphasis ├── Maintain semantic color meanings ├── Check contrast ratios independently ``` --- ## 4. Outdoor Visibility ### The Sunlight Problem ``` Screen visibility outdoors: ├── Bright sun washes out low contrast ├── Glare reduces readability ├── Polarized sunglasses affect └── Users shield screen with hand Affected elements: ├── Light gray text on white ├── Subtle color differences ├── Low opacity overlays └── Pastel colors ``` ### High Contrast Strategies ``` For outdoor visibility: MINIMUM CONTRAST RATIOS: ├── Normal text: 4.5:1 (WCAG AA) ├── Large text: 3:1 (WCAG AA) ├── Recommended: 7:1+ (AAA) AVOID: ├── #999 on #FFF (fails AA) ├── #BBB on #FFF (fails) ├── Pale colors on light backgrounds └── Subtle gradients for critical info DO: ├── Use system semantic colors ├── Test in bright environment ├── Provide high contrast mode └── Use solid colors for critical UI ``` --- ## 5. Semantic Colors ### Consistent Meaning | Semantic | Meaning | iOS Default | Android Default | |----------|---------|-------------|-----------------| | Error | Problems, destruction | #FF3B30 | #B3261E | | Success | Completion, positive | #34C759 | #4CAF50 | | Warning | Attention, caution | #FF9500 | #FFC107 | | Info | Information | #007AFF | #2196F3 | ### Semantic Color Rules ``` NEVER use semantic colors for: ├── Branding (confuses meaning) ├── Decoration (reduces impact) ├── Arbitrary styling └── Status indicators (use icons too) ALWAYS: ├── Pair with icons (colorblind users) ├── Maintain across light/dark modes ├── Keep consistent throughout app └── Follow platform conventions ``` ### Error State Colors ``` Error states need: ├── Red-ish color (semantic) ├── High contrast against background ├── Icon reinforcement ├── Clear text explanation iOS: ├── Light: #FF3B30 ├── Dark: #FF453A Android: ├── Light: #B3261E ├── Dark: #F2B8B5 (on error container) ``` --- ## 6. Dynamic Color (Android) ### Material You ``` Android 12+ Dynamic Color: User's wallpaper → Color extraction → App theme Your app automatically gets: ├── Primary (from wallpaper dominant) ├── Secondary (complementary) ├── Tertiary (accent) ├── Surface colors (neutral, derived) ├── On-colors (text on each) ``` ### Supporting Dynamic Color ```kotlin // Jetpack Compose MaterialTheme( colorScheme = dynamicColorScheme() ?: staticColorScheme() // Fallback for older Android ) // React Native // Limited support - consider react-native-material-you ``` ### Fallback Colors ``` When dynamic color unavailable: ├── Android **Remember:** Color on mobile must work in the worst conditions—bright sun, tired eyes, colorblindness, low battery. Pretty colors that fail these tests are useless colors.