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
// 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 < 12
├── User disabled
├── Non-supporting launchers
Provide static color scheme:
├── Define your brand colors
├── Test in both modes
├── Match dynamic color roles
└── Support light + dark
7. Color Accessibility
Colorblind Considerations
~8% of men, ~0.5% of women are colorblind
Types:
├── Protanopia (red weakness)
├── Deuteranopia (green weakness)
├── Tritanopia (blue weakness)
├── Monochromacy (rare, no color)
Design rules:
├── Never rely on color alone
├── Use patterns, icons, text
├── Test with simulation tools
├── Avoid red/green distinctions only
Contrast Testing Tools
Use these to verify:
├── Built-in accessibility inspector (Xcode)
├── Accessibility Scanner (Android)
├── Contrast ratio calculators
├── Colorblind simulation
└── Test on actual devices in sunlight
Sufficient Contrast
WCAG Guidelines:
AA (Minimum)
├── Normal text: 4.5:1
├── Large text (18pt+): 3:1
├── UI components: 3:1
AAA (Enhanced)
├── Normal text: 7:1
├── Large text: 4.5:1
Mobile recommendation: Meet AA, aim for AAA
8. Color Anti-Patterns
❌ Common Mistakes
| Mistake |
Problem |
Fix |
| Light gray on white |
Invisible outdoors |
Min 4.5:1 contrast |
| Pure white in dark mode |
Eye strain |
Use #E0E0E0-#F0F0F0 |
| Same saturation dark mode |
Garish, glowing |
Desaturate colors |
| Red/green only indicator |
Colorblind users can't see |
Add icons |
| Semantic colors for brand |
Confusing meaning |
Use neutral for brand |
| Ignoring system dark mode |
Jarring experience |
Support both modes |
❌ AI Color Mistakes
AI tends to:
├── Use same colors for light/dark
├── Ignore OLED battery implications
├── Skip contrast calculations
├── Default to purple/violet (BANNED)
├── Use low contrast "aesthetic" grays
├── Not test in outdoor conditions
└── Forget colorblind users
RULE: Design for the worst case.
Test in bright sunlight, with colorblindness simulation.
9. Color System Checklist
Before Choosing Colors
Before Release
10. Quick Reference
Dark Mode Backgrounds
True black (OLED max savings): #000000
Near black (Material): #121212
Surface 1: #1E1E1E
Surface 2: #2C2C2C
Surface 3: #3C3C3C
Text on Dark
Primary: #E0E0E0 to #ECECEC
Secondary: #A0A0A0 to #B0B0B0
Disabled: #606060 to #707070
Contrast Ratios
Small text: 4.5:1 (minimum)
Large text: 3:1 (minimum)
UI elements: 3:1 (minimum)
Ideal: 7:1 (AAA)
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.
