Color Design for E-Commerce Sites with Tailwind CSS

Color Psychology in E-Commerce

Colors influence purchase decisions. Orange and red drive urgency for sales badges. Green signals trust and completed actions. Blue builds credibility. Your Tailwind palette should encode these signals consistently.

CTA Button Colors

<button class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-lg shadow-lg shadow-orange-500/25 transition-colors">
  Add to Cart
</button>

<button class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-8 rounded-lg">
  Buy Now
</button>

<!-- Sale badge -->
<span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
  -30% OFF
</span>

Product Page Color Hierarchy

• Background: White or gray-50 to let product images stand out
• Primary CTA: A bold, warm color like orange-500 that contrasts with everything else
• Secondary actions: Muted tones like slate-200 for wishlists and sharing
• Price: slate-900 for current price, slate-400 with line-through for original
• Trust signals: emerald-600 for in-stock, amber-500 for limited stock, red-500 for sold out

Trust and Security Colors

<div class="flex items-center gap-2 text-emerald-600">
  <svg class="w-5 h-5"><!-- shield icon --></svg>
  <span class="text-sm font-medium">Secure Checkout</span>
</div>

<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
  <p class="text-blue-800 text-sm">Free returns within 30 days</p>
</div>