Color & tokens
The color system is Bootstrap 5.3’s: eight contextual colors, each with an RGB triplet and a set of derived subtle / emphasis tokens that components consume.
The eight colors
Every theme color is a single value in theme.colors and a --bs-<name> variable:
| Name | Variable | Default |
|---|---|---|
| primary | —bs-primary | #0d6efd |
| secondary | —bs-secondary | #6c757d |
| success | —bs-success | #198754 |
| danger | —bs-danger | #dc3545 |
| warning | —bs-warning | #ffc107 |
| info | —bs-info | #0dcaf0 |
| light | —bs-light | #f8f9fa |
| dark | —bs-dark | #212529 |
Anywhere a component takes a variant (Button, Alert, Badge, Spinner,
ProgressBar, …) it selects one of these eight names.
RGB triplets
Each color also exposes a comma-separated RGB triplet as --bs-<name>-rgb, e.g.
--bs-primary-rgb: 13, 110, 253. Opacity utilities and translucent surfaces build
rgba() from it, so keep it in sync when you override a color (see
Theming).
/* how a translucent background is built internally */
background: rgba(var(--bs-primary-rgb), 0.1);Subtle & emphasis tokens
For each color, Bootstrap precomputes a three-token set used by alerts, badges, and list groups instead of deriving tints at runtime:
| Token | Variable | Role |
|---|---|---|
| bgSubtle | —bs-{color}-bg-subtle | The soft background fill. |
| borderSubtle | —bs-{color}-border-subtle | The soft border. |
| emphasis | —bs-{color}-text-emphasis | Readable text on the subtle background. |
These are exactly the tokens the alerts below render — the subtle fill, the emphasis text, and the subtle border all come from this set:
Override any one of them — through theme.colorTokens or the matching
--bs-<color>-<slot> variable — and every component that reads it re-shades. That is
the runtime bind surface.
Body & surface colors
Beyond the contextual colors, the theme defines the neutral surface tokens — body
background and text, the secondary / tertiary surfaces, borders, and link colors.
These flip between light and dark; see Color modes for
the full token map.