bg-<palette>-<shade> — surfaces, fills, sections.

Syntax#

html
<section class="bg-slate-900 text-white">Deep surface</section>

All palettes apply#

Every palette in the colors/index|color system generates a bg-* class: bg-neon-purple-500, bg-neon-pink-500, bg-neon-cyan-500, bg-neon-lime-500, bg-neon-orange-500, bg-pastel-rose-500, bg-pastel-lavender-500, bg-pastel-mint-500…

Patterns#

  • Page: bg-white dark:bg-slate-950
  • Sections alternate: bg-slate-50 dark:bg-slate-900
  • CTAs: dominant 500 → hover 600

colors/index|Color hub · concepts/dark-mode-strategies|Dark mode · accessibility/color-contrast|Contrast