The complete Bootstrap 5 colors reference
This page lists every value in the Bootstrap 5 colors system in one searchable, copyable grid — theme tokens, the gray scale, and the full 100–900 tint and shade range for blue, indigo, purple, pink, red, orange, yellow, green, teal, and cyan. Each swatch ships with its HEX code, SCSS variable, and CSS custom property so you can paste the right token into any stylesheet, component, or design file without hunting through the docs.
Theme colors and what they map to
Bootstrap exposes a small theme palette built on top of its generic color variables. The defaults are $primary mapped to $blue (#0d6efd), $secondary to $gray-600, $success to $green (#198754), $info to $cyan (#0dcaf0), $warning to $yellow (#ffc107), $danger to $red (#dc3545), $light to $gray-100, and $dark to $gray-900. All these colors are available as a Sass map, $theme-colors, which drives buttons, alerts, badges, and the rest of the framework's component modifiers.
Tints, shades, and the 100–900 scale
Sass cannot programmatically generate variables, so Bootstrap manually creates variables for every tint and shade — specifying the midpoint value (e.g., $blue-500) and using custom color functions to tint or shade via Sass's mix() function. The result is a predictable ramp from -100 (lightest) to -900 (darkest) for every base hue, ideal for hover states, subtle backgrounds, and dark-mode surfaces. If you need a custom hue with the same structure, build one with the Tailwind Scale Generator and drop it into your $theme-colors map.
v5.3 color modes and emphasis tokens
Bootstrap's color palette expanded in v5.3.0 with new variables for secondary and tertiary text and background colors, plus {color}-bg-subtle, {color}-border-subtle, and {color}-text-emphasis tokens — available through Sass and CSS variables to make it easier to customize across light and dark color modes. Color modes can be toggled globally on the html element, or on specific components and elements, thanks to the data-bs-theme attribute.
Use the right token in code
Whether you compile your own Sass or consume the precompiled CSS, copy what fits your build:
- SCSS variable — for source builds:
$primary,$blue-500,$gray-200. - CSS custom property — for runtime theming:
var(--bs-primary),var(--bs-success-bg-subtle). - HEX — for design tools, exports, or non-Bootstrap projects.
Before shipping a custom theme, run pairs through the Contrast Checker to confirm WCAG AA/AAA compliance, and use the Color Converter if you need RGB, HSL, or OKLCH equivalents. Comparing frameworks? Cross-reference the Tailwind CSS color palette side by side.
For deeper customization patterns, see the official Bootstrap color docs, the Sass customization guide, and the W3C WCAG 2.2 specification for contrast targets.