Color Design for SaaS Dashboards with Tailwind CSS

Dashboard Color Principles

Dashboards display dense information. Your color palette must create clear visual hierarchy: muted backgrounds, distinct data categories, and obvious status indicators without overwhelming the user.

Recommended Palette Structure

• Background: slate-50 for page, white for cards
• Navigation: slate-900 or brand-900 for sidebar
• Data colors: A set of 5-6 distinct hues for charts (blue, emerald, amber, violet, rose, cyan)
• Status: emerald-500 for success, amber-500 for warning, red-500 for error, slate-400 for neutral
• Interactive: blue-600 for links, blue-500 for primary buttons

Stat Card Pattern

<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
  <div class="flex items-center justify-between">
    <div>
      <p class="text-sm text-slate-500">Monthly Revenue</p>
      <p class="text-2xl font-bold text-slate-900">$48,200</p>
    </div>
    <div class="bg-emerald-100 text-emerald-700 rounded-full p-3">
      <svg class="w-6 h-6"><!-- trend-up icon --></svg>
    </div>
  </div>
  <p class="text-sm text-emerald-600 mt-2">+12.5% from last month</p>
</div>

Status Indicator Pattern

<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">
  <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
  Active
</span>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-50 text-amber-700">
  <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
  Pending
</span>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-red-50 text-red-700">
  <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>
  Failed
</span>