Color Design for Mobile Apps with Tailwind CSS

Mobile Color Considerations

Mobile screens are viewed in direct sunlight, at arm's length, and with finger-based interaction. Colors need higher contrast, larger touch targets with clear color boundaries, and reduced visual complexity.

High-Contrast Mobile Patterns

<!-- Mobile navigation with clear active state -->
<nav class="fixed bottom-0 w-full bg-white border-t border-slate-200 flex">
  <a class="flex-1 flex flex-col items-center py-3 text-blue-600">
    <svg class="w-6 h-6"><!-- home icon --></svg>
    <span class="text-xs font-medium mt-1">Home</span>
  </a>
  <a class="flex-1 flex flex-col items-center py-3 text-slate-400">
    <svg class="w-6 h-6"><!-- search icon --></svg>
    <span class="text-xs mt-1">Search</span>
  </a>
</nav>

<!-- Large touch-friendly button -->
<button class="w-full bg-blue-600 active:bg-blue-700 text-white font-semibold py-4 rounded-xl text-lg">
  Continue
</button>

Mobile-Specific Tips

• Use active: instead of hover: for touch feedback (active:bg-blue-700)
• Increase contrast for outdoor readability; prefer 600+ shades on white
• Tab bar active states should be your brand color; inactive states use slate-400
• Swipe-action colors: green for confirm/archive, red for delete
• Status bar: match bg to your header color using meta theme-color

System Dark Mode Integration

<!-- Respect system preference on mobile -->
<meta name="theme-color" content="#ffffff"
  media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a"
  media="(prefers-color-scheme: dark)">

<div class="bg-white dark:bg-slate-900 min-h-screen">
  <!-- Content automatically adapts to system setting -->
</div>