Footer Color Design Patterns in Tailwind CSS - Tailwind CSS Tutorial

beginner6 min readtutorial

Footer Color Strategies

Footers anchor the page. Dark footers create a clear ending, while light footers feel continuous. Either way, the footer needs clear link colors and readable but subdued text for legal content.

Dark Footer Pattern

<footer class="bg-slate-900 text-slate-300 py-12">
  <div class="max-w-6xl mx-auto px-6 grid grid-cols-4 gap-8">
    <div>
      <h4 class="text-white font-semibold mb-4">Product</h4>
      <a class="block text-slate-400 hover:text-white py-1">Features</a>
      <a class="block text-slate-400 hover:text-white py-1">Pricing</a>
      <a class="block text-slate-400 hover:text-white py-1">Docs</a>
    </div>
    <!-- More columns -->
  </div>
  <div class="max-w-6xl mx-auto px-6 mt-8 pt-8 border-t border-slate-800">
    <p class="text-slate-500 text-sm">© 2026 Company. All rights reserved.</p>
  </div>
</footer>

Light Footer Pattern

<footer class="bg-slate-50 border-t border-slate-200 py-12">
  <div class="max-w-6xl mx-auto px-6">
    <h4 class="text-slate-900 font-semibold mb-4">Resources</h4>
    <a class="text-slate-600 hover:text-blue-600 py-1">Blog</a>
    <p class="text-slate-400 text-sm mt-8">© 2026 Company</p>
  </div>
</footer>

Footer Color Hierarchy

Section headings: White (dark footer) or slate-900 (light footer)
Links: slate-400 with white hover (dark) or slate-600 with blue-600 hover (light)
Legal text: slate-500 (dark) or slate-400 (light) — lowest priority
Dividers: One shade lighter than background (slate-800 on slate-900)
Social icons: slate-400 with hover to white or brand color

Frequently Asked Questions

Should footers be dark or light?

Dark footers (slate-900) are the most common choice as they create a clear visual boundary. Light footers work when your overall design is minimal and you want seamless continuity.

What color should footer links be?

On dark backgrounds, use slate-400 text with hover:text-white. On light backgrounds, use slate-600 with hover:text-blue-600. Ensure all links meet WCAG contrast minimums against the footer background.