Bootstrap 5 Colors

Bootstrap’s complete color system in one place — the 10 base colors its theme is built from, the 8 semantic roles your markup actually uses, and the 9-step gray scale underneath both. Every hex value here is read directly from Bootstrap’s own scss/_variables.scss, not retyped by hand.

Bootstrap’s color system has two layers that are easy to conflate. The base colors — $blue, $red, and eight more — are raw Sass variables with no built-in meaning. The theme colors — primary, danger, and the rest — are semantic roles that each point at one base color or gray shade, and are what utility classes like btn-primary and text-danger actually reference. Override the ten base variables and every themed component updates with them.

The 10 base colors

Click any swatch to copy its hex code.

$blue

$indigo

$purple

$pink

$red

$orange

$yellow

$green

$teal

$cyan

The 8 theme roles

What -primary, -success, and the rest of Bootstrap’s utility suffixes actually resolve to, plus how each one reads as text on white and on black.

Role	Hex	Resolves to	On white	On black
primary	#0d6efd	$blue	4.50:1 ✓ AA	4.67:1 ✓ AA
secondary	#6c757d	$gray-600	4.69:1 ✓ AA	4.48:1 △ Large only
success	#198754	$green	4.53:1 ✓ AA	4.63:1 ✓ AA
danger	#dc3545	$red	4.53:1 ✓ AA	4.64:1 ✓ AA
warning	#ffc107	$yellow	1.63:1 ✗ Fails	12.88:1 ✓ AA
info	#0dcaf0	$cyan	1.96:1 ✗ Fails	10.72:1 ✓ AA
light	#f8f9fa	$gray-100	1.05:1 ✗ Fails	19.92:1 ✓ AA
dark	#212529	$gray-900	15.43:1 ✓ AA	1.36:1 ✗ Fails

Notice that warning and light both fail as text on white at their raw hex value — which is exactly why Bootstrap’s own btn-warning and btn-light use dark text on those backgrounds instead of the white text every other button variant gets.

The gray scale

Nine steps from near-white to near-black. light and dark above are just aliases for gray-100 and gray-900.

Overriding the theme

Because theme roles are Sass variables that reference the base colors, rebranding a Bootstrap site without touching a single utility class is usually a matter of setting new values before Bootstrap’s own Sass loads:

SCSS

$primary: #7f5af0;
$danger:  #ff5470;

@import "bootstrap/scss/bootstrap";

Every component built on $primary — buttons, links, form focus rings, badges — updates automatically, because Bootstrap itself references the variable rather than a hardcoded value.

Frequently asked questions

#0d6efd in Bootstrap 5. Bootstrap 4 used a darker #007bff — a common source of confusion when copying snippets between versions.

Set $primary (and any other variables you want to change) to a new hex value before Bootstrap's own Sass is imported — see the override example above. Editing the compiled CSS directly works too, but breaks on the next Bootstrap update.

Contrast. Warning's yellow (#ffc107) fails WCAG AA with white text but passes comfortably with near-black text, so Bootstrap's own source hardcodes that one exception — the theme-role table above shows the exact ratios for every role.

No — Bootstrap 5 changed several base colors, most noticeably primary blue and the entire gray scale, as part of dropping jQuery and modernizing the design language. If you're maintaining a Bootstrap 4 site, don't assume these hex codes carry over.

Yes — every value on this page is a plain hex code, usable in any CSS regardless of framework.

Related tools

CSS

Color Chart

Browse the full Tailwind CSS color system and the 216 web-safe colors, with hex codes and copy-to-clipboard for every swatch.

Try it → CSS

Material Design Colors

Browse the full Material Design color palette — 19 families, 10 shades plus accents each — with hex codes, contrast ratings, and copy-to-clipboard for Flutter, Android, and CSS.

Try it → CSS

CSS Color Names

Browse and search all 148 standard CSS/HTML color names, grouped by family, with hex codes and links to full conversions.

Try it →