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-slate-500, bg-gray-500, bg-zinc-500, bg-neutral-500, bg-stone-500, bg-red-500, bg-orange-500, bg-amber-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