Every color in the Bootstrap 5 palette — 8 theme colors and 11 full color families with 100–900 shades. Click any swatch to copy the hex code instantly.
Bootstrap 5 ships with 8 semantic theme colors that map to CSS custom properties (e.g. --bs-primary). These are the colors most Bootstrap components use out of the box.
Primary
--bs-primary
Main call-to-action color. Used for buttons, links, and focus rings.
Secondary
--bs-secondary
Muted or supporting color. Used for secondary buttons and disabled states.
Success
--bs-success
Positive outcomes, confirmations, and success alerts.
Info
--bs-info
Informational notices and tooltips.
Warning
--bs-warning
Caution states, warnings, and alerts that need attention.
Danger
--bs-danger
Destructive actions, errors, and critical alerts.
Light
--bs-light
Subtle backgrounds, cards on white pages.
Dark
--bs-dark
Dark text, dark mode surfaces, high-contrast contexts.
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
| Shade | Hex | |
|---|---|---|
| 100 | ||
| 200 | ||
| 300 | ||
| 400 | ||
| 500 | ||
| 600 | ||
| 700 | ||
| 800 | ||
| 900 |
Bootstrap distinguishes between theme colors (semantic: primary, danger, warning…) and the underlying color palette (blue-500, red-300, etc.). Theme colors are meant for components; the palette is for custom styling.
Each color family runs from 100 (near-white tint) to 900 (near-black shade). The 500 value is usually the "pure" color. Tints (100–400) work well for backgrounds and alerts; shades (600–900) work for borders and text.
In Bootstrap's Sass source, these colors are variables like $blue-500 or $red-300. Override theme colors via $primary: #yourcolor before importing Bootstrap.
Bootstrap 5 exposes theme colors as CSS variables on :root (e.g. var(--bs-primary)). This lets you override them at runtime without recompiling Sass — useful for dynamic theming. Use our Contrast Checker to ensure your overrides meet WCAG AA.