Bootstrap 5 Colors Reference

Bootstrap 5 colors reference with HEX, SCSS and CSS variables

This page lists every color in the Bootstrap 5.3 system: the eight theme colors, the light and dark mode tokens and the 100 to 900 scales. Copy any of the Bootstrap 5 colors as HEX, RGB, an SCSS variable or a CSS custom property. It is free, runs in your browser and needs no signup.

How to copy Bootstrap 5 colors as HEX or SCSS

Pick a format, click a swatch and the value is copied. The same steps work for theme colors, tokens and scale colors.

1. Type a name in Search tokens or colors, such as primary, danger or blue-500, to filter the page.
2. Choose HEX, RGB, SCSS or CSS var above the theme colors.
3. Click any swatch to copy it in that format. Hold Shift and click to copy the alternate format (SCSS when HEX is selected, HEX otherwise).
4. Tick Show WCAG text contrast on swatches to see whether text on a swatch is readable.
5. Press Dark under Color mode tokens to switch the subtle and emphasis tokens to their dark mode values.

If a color has no CSS variable in Bootstrap, the CSS var format tells you so and copies the HEX instead. You can also focus a swatch and press i to open color details.

Bootstrap theme colors and their HEX values

Bootstrap defines eight theme colors, and each one maps to a base color or a gray from the scales. The table shows the default light mode values.

The values come from the official Bootstrap 5.3 color documentation. Each theme card on the page also shows its "Maps to" variable and a live preview of the matching alert, so you see the colors in context.

How are Bootstrap 100 to 900 color scales calculated?

Each family has a 500 base color. The 100 to 400 steps are tints (mixed with white) and the 600 to 900 steps are shades (mixed with black), using Bootstrap's own tint and shade mixing in 20 percent steps.

Take $blue-500, which is #0D6EFD. Mixing it with 80 percent white gives $blue-100, #CFE2FF. Mixing it with 20 percent black gives $blue-600, #0A58CA. The same method produces every family: blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan and gray.

Mixing is not the same as lightening in HSL, because it blends the actual RGB values. For the difference between the two ideas, read the tint vs shade guide.

Which Bootstrap colors have CSS variables?

Only the base colors (the 500 steps) and the grays have CSS variables in Bootstrap, such as --bs-blue and --bs-gray-300. Other tints and shades, like $blue-200, exist only as Sass variables. The tool marks this clearly, and its CSS export adds the missing steps as custom properties when you need them.

Bootstrap color mode tokens for light and dark themes

Since Bootstrap 5.3, every theme color has three tokens: text emphasis, bg subtle and border subtle. Each token has one value in light mode and another in dark mode, which is what makes the data-bs-theme switch work. The official Bootstrap color modes guide explains how to apply it.

For primary, the light tokens are #052C65 (text emphasis), #CFE2FF (bg subtle) and #9EC5FE (border subtle). In dark mode they become #6EA8FE, #031633 and #084298. The page shows all 24 tokens (3 for each of the 8 theme colors), and the Light and Dark buttons swap the displayed values and the preview alerts.

Bootstrap SCSS variables vs CSS custom properties

SCSS variables are resolved when you compile your stylesheet, while CSS custom properties are read by the browser at runtime. Pick SCSS when you build Bootstrap from source and override defaults before the import. Pick CSS variables when you want to change colors in the browser, for example with a theme switch.

The two names follow a pattern. $primary in Sass is var(--bs-primary) in CSS, and $blue-500 becomes var(--bs-blue). MDN explains how CSS custom properties cascade and inherit, which is why overriding them on a parent element changes every child.

Find the closest Bootstrap color to your own

The Closest Bootstrap Color Finder matches any color to the nearest Bootstrap value. Enter a HEX code, an rgb() or hsl() value or a CSS color name in Your color, or use the color picker. The tool then lists the three nearest theme colors or scale colors, ranked by CIEDE2000 ΔE, a perceptual difference measure.

This is useful when a brand color is close to Bootstrap blue and you want to know whether a default value is good enough. Smaller ΔE means a closer match. If you only have a name or need other formats first, use the color converter or the color name finder.

What can you export from the Bootstrap color palette?

The export box turns the colors on screen into code. It covers exactly what is visible, so searching for blue exports only blue.

• SCSS: variables for scales, theme colors and light and dark tokens (dark ones end in -dark).
• CSS variables: a light block and a [data-bs-theme=dark] block with the dark tokens.
• Tailwind config: a colors object with theme colors and bs- prefixed scales.
• JSON: theme colors, tokens and scales as plain data.

The quick actions below the export give you Copy palette, Copy SCSS, Copy CSS, Download CSS, Export JSON and Share link. Each family also has a Code button that shows code for that family only. Share link copies a link that restores your current view and selected color.

$blue-100: #CFE2FF;
$blue-500: #0D6EFD;
$blue-900: #031633;

Where Bootstrap 5 color values help in real projects

Developers use a Bootstrap color palette reference to keep custom components consistent with the framework. Designers use the same values to build mockups that match what developers will ship.

Matching mockups to Bootstrap components

Design files often use a brand blue that is close to, but not equal to, #0D6EFD. Copy the HEX values for buttons, alerts and badges from this page, and your mockup and the final build will agree. Use the HEX format for design tools and the SCSS or CSS var format for code.

Customizing a Bootstrap theme

To rebrand Bootstrap, override variables such as $primary before importing the framework. The SCSS export gives you a complete list of the default names, so you can see what you are replacing. Then copy the CSS export into a stylesheet to test dark mode tokens in the browser.

Choosing accents beyond the theme colors

Bootstrap also ships indigo, purple, pink, orange and teal families that are not theme colors. They are handy for charts, tags and illustrations. If you need a wider reference, the Material Design colors page offers another scale-based system.

Bootstrap color palette tips and common mistakes

• Do not assume white text works everywhere. Yellow #FFC107 is too light for white text, which is why Bootstrap pairs it with dark text. WCAG 2.2 asks for at least 4.5:1 for normal text, as described in the Contrast (Minimum) criterion. Use the contrast toggle, then confirm with the contrast checker.
• Do not use a Sass-only step as a CSS variable. var(--bs-blue-200) does not exist in stock Bootstrap. Use the HEX, or add it yourself from the CSS export.
• Do not mix light and dark token values. Check the mode before copying a subtle or emphasis token, since the copied value follows the selected mode.
• Do not hard-code a subtle color when you support dark mode. Use var(--bs-primary-bg-subtle) instead of a HEX value, so the color changes with data-bs-theme.

Extend your Bootstrap color palette further

To build a custom scale from your own brand color, try the tint and shade scale generator. To turn a finished palette into theme variables, use the CSS variable theme generator. If you are comparing systems, see the Tailwind CSS colors reference.