Bootstrap 5 ships with a rich color palette built around eight semantic theme colors: primary, secondary, success, danger, warning, info, light, and dark. Each color generates a full set of utility classes.
Bootstrap 5 also provides a 100–900 shade palette for each base color (similar to Tailwind). Access them via Sass variables like $blue-500 or use CSS custom properties like var(--bs-blue) in your custom CSS.
<!-- Semantic theme colors -->
<div class="p-2 bg-primary text-white mb-1">Primary</div>
<div class="p-2 bg-secondary text-white mb-1">Secondary</div>
<div class="p-2 bg-success text-white mb-1">Success</div>
<div class="p-2 bg-danger text-white mb-1">Danger</div>
<div class="p-2 bg-warning mb-1">Warning</div>
<div class="p-2 bg-info text-white mb-1">Info</div>
<div class="p-2 bg-light mb-1">Light</div>
<div class="p-2 bg-dark text-white mb-1">Dark</div>Use semantic color names (primary, danger) rather than literal colors (blue, red) — swapping your brand color later only requires changing one Sass variable.