Bootstrap Colors: Hex Codes, Classes and Full Palette (5.3)

Bootstrap 5 has eight theme colors (primary, secondary, success, info, warning, danger, light, and dark), built from a palette of ten base colors and nine grays, each with nine shades. This page is the reference: every color with its hex code, the classes that apply them, the CSS variables behind them, the subtle and emphasis variants added in 5.3, and the values Bootstrap switches to in dark mode. All values are from Bootstrap 5.3.9. To change the colors rather than look them up, see how to customize Bootstrap 5 colors.

Bootstrap theme colors

The page itself uses #212529 for text and #fff for the background, and links use the primary blue, #0d6efd.

The full Bootstrap color palette

Each base color has nine shades. The 500 shade is the base color, lower numbers are tints mixed with white, and higher numbers are shades mixed with black.

In Sass these are $blue-100 to $blue-900, $gray-100 to $gray-900, and so on. Bootstrap doesn’t generate classes for the shades, so bg-blue-200 doesn’t exist. The last section shows how to add one.

Bootstrap color classes

Every theme color works with the same set of classes. Swap primary for any other name:

<p class="text-primary">Blue text</p>
<div class="bg-primary text-white p-3">Blue background</div>
<div class="text-bg-primary p-3">Blue background, readable text picked for you</div>
<div class="border border-primary p-3">Blue border</div>
<a class="link-primary" href="#">Blue link</a>
<button class="btn btn-primary">Button</button>
<div class="alert alert-primary">Alert</div>

Use text-bg-* when you set a background: it picks white or black text by contrast, so text-bg-warning gets dark text on yellow while bg-warning alone keeps the body text color.

The neutral classes follow the page colors and switch automatically in dark mode:

There are also text-white, text-black, bg-white, bg-black, and bg-transparent.

Subtle and emphasis colors

Bootstrap 5.3 added three variants of each theme color for softer UI such as callouts, tags, and status panels:

Combine them for a soft panel:

<div class="p-3 bg-success-subtle border border-success-subtle text-success-emphasis rounded">
  Your changes were saved.
</div>

Opacity

Background, text, and border colors accept an opacity class: 10, 25, 50, 75, or 100.

<div class="bg-primary bg-opacity-25 p-3">25% blue background</div>
<p class="text-danger text-opacity-75">75% red text</p>
<div class="border border-success border-opacity-50 p-3">Half-transparent border</div>

This works because the color classes use RGB variables, such as --bs-primary-rgb: 13, 110, 253, with an opacity variable you can change. The backgrounds guide covers background opacity, gradients, and images in more detail.

Bootstrap colors in dark mode

With data-bs-theme="dark", the theme colors stay the same, but the page and the subtle and emphasis colors change so they read well on a dark background:

That’s why the subtle classes are the safe choice for UI that has to work in both modes. The dark mode guide covers the toggle and how to set your own dark colors.

Bootstrap color CSS variables

Bootstrap writes every color to :root, so you can use them in your own CSS:

.callout {
  border-left: 4px solid var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
.price { color: var(--bs-success); }
.overlay { background: rgba(var(--bs-dark-rgb), 0.6); }

The palette colors are there too, as --bs-blue, --bs-indigo, --bs-gray-600, and so on, but only the base color of each, not the 100 to 900 shades.

Use a palette shade as a class

To get classes such as bg-blue-100, add the shades you need to the utilities with Sass:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "background-color": map-merge(
      map-get($utilities, "background-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "background-color"), "values"),
          ("blue-100": $blue-100, "blue-200": $blue-200, "teal-100": $teal-100)
        ),
      )
    ),
  )
);

@import "bootstrap/scss/utilities/api";

This gives bg-blue-100, bg-blue-200, and bg-teal-100. Without Sass, a one-line class does the same job: .bg-blue-100 { background-color: #cfe2ff; }.

To change the colors themselves, for example to use your brand blue as primary, open the builder, pick new theme colors with a live preview, and export the Sass or CSS, or follow the color customization guide.

FAQ

What are the Bootstrap 5 colors?

Bootstrap 5 has eight theme colors: primary #0d6efd (blue), secondary #6c757d (gray), success #198754 (green), info #0dcaf0 (cyan), warning #ffc107 (yellow), danger #dc3545 (red), light #f8f9fa, and dark #212529. They come from a palette of ten base colors (blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan) and nine grays.

What is the Bootstrap primary color hex code?

The default Bootstrap 5 primary color is #0d6efd, RGB 13, 110, 253. Bootstrap 4 used #007bff.

How do I use a Bootstrap color class?

Add text-{color} for text, bg-{color} for a background, or text-bg-{color} for a background with a readable text color, as in <div class="text-bg-success p-3">Saved</div>. Replace {color} with primary, secondary, success, info, warning, danger, light, or dark.

Does Bootstrap have classes for color shades like blue-100?

No. The shades exist as Sass variables, such as $blue-100, but Bootstrap generates no classes for them. Add them to the background-color or color utility with the utilities API, or write a small class of your own.

What replaced text-muted in Bootstrap 5.3?

Use text-body-secondary. text-muted still works but is deprecated, and text-body-secondary adapts to dark mode.

How do I change the Bootstrap primary color?

Set $primary in Sass before importing Bootstrap, or override --bs-primary and --bs-primary-rgb in CSS for the classes that read them. The color customization guide covers both ways, and the bootstrap.build builder does it visually.