Skip to content

Bootstrap 5 colors

Default semantic theme colors (primary, danger, success, …) plus the built-in gray ramp used by Bootstrap utilities and components. Matches stock Bootstrap 5 Sass defaults — if your theme redefines $theme-colors, diff against your compiled CSS instead of this table.

What this page is

A quick lookup for the colors Bootstrap ships out of the box — the same strings you will see in .text-primary, .bg-danger, and gray utilities before customization.

How to use it

  1. Filter rows, copy HEX into prototypes, Storybook themes, or markdown docs.
  2. When you extend Bootstrap in Sass, keep this page open to show stakeholders the delta from stock.
  3. Pair semantic fills with the contrast checker for alert text and badge labels.

Custom compiled themes

If your _variables.scss remaps the entire palette, this reference no longer matches production CSS — inspect generated output instead.

Related on ChromaXP

Other system mirrors.

Material Design Numeric hue ramps when Bootstrap semantics are too coarse. Tint & shade Quickly explore lighter/darker steps around a Bootstrap primary. All palettes Tailwind, Ant Design, Flat UI, and HTML names in one index.

FAQ

Do these match my npm Bootstrap build?

Yes for unmodified Bootstrap 5. Custom Sass maps, RTL builds, or CSS variable layers can diverge — verify against your bundle.

Where did gray-500 go in my app?

Utilities reference the same ramp; if tokens were renamed in your design system, search your SCSS for $gray- overrides.

Bootstrap 4 vs 5?

This table targets v5 defaults. Older v4 purples and greens differ numerically — do not mix versions in the same codebase without a migration audit.