Colors

Bootstrap supports an extensive color system that styles themes and components. This enables more comprehensive customization and extensions for any project.

Use the appropriate color when creating layouts or building new components

Use CSS variables¹ with the stacks Style settings e.g. background: var(--bs-body-color); or within style sheets of your own components
CSS variables ending in -rgb provide the raw red, green, blue values for use in rgb() and rgba() color modes. For example, rgba(var(--bs-secondary-bg-rgb), .5)
Use utility classes² with the stacks Classes settings or within your own html e.g. class="text-primary"
Not all colors change when switching themes. *[circle-half:sm]³ marks theme aware color classes or variables that adjust to light and dark theme settings

Description	Swatch	CSS Variables¹	Utility Classes²
Base Colors — The base colors of the theme used for all content as well as borders. *[circle-half:sm]³
Body — Default foreground `color` and background `bg`, including components.		`--bs-body-color --bs-body-color-rgb`	`text-body` *[circle-half:sm]
		`--bs-body-bg --bs-body-bg-rgb`	`bg-body` *[circle-half:sm]
Secondary — Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.		`--bs-secondary-color --bs-secondary-color-rgb`	`text-body-secondary` [circle-half:sm] `text-muted` [circle-half:sm]
		`--bs-secondary-bg --bs-secondary-bg-rgb`	`bg-body-secondary` *[circle-half:sm]
Tertiary — Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.		`--bs-tertiary-color --bs-tertiary-color-rgb`	`text-body-tertiary` *[circle-half:sm]
		`--bs-tertiary-bg --bs-tertiary-bg-rgb`	`bg-body-tertiary` *[circle-half:sm]
Emphasis — For higher contrast text. Not applicable for backgrounds.		`--bs-emphasis-color --bs-emphasis-color-rgb`	`text-body-emphasis` [circle-half:sm] `link-body-emphasis` [circle-half:sm]
Border — For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.		`--bs-border-color --bs-border-color-rgb`	`border` *[circle-half:sm]
Color Palette — The color palette can be used with all sorts components, utility classes, backgrounds and text. *[circle-half:sm] except the main color itself.
Primary — Main theme color, used for hyperlinks, focus styles, and component and form active states.		`--bs-primary --bs-primary-rgb`	`text-primary` `text-bg-primary` `bg-primary` `border-primary` `badge-primary` `link-primary`
		`--bs-primary-bg-subtle`	`bg-primary-subtle` [circle-half:sm] `alert-primary` [circle-half:sm] `table-primary`
		`--bs-primary-border-subtle`	`border-primary-subtle` *[circle-half:sm]
	Text	`--bs-primary-text-emphasis`	`text-primary-emphasis` *[circle-half:sm]
Secondary — Secondary theme color, used for secondary elements and highlights.		`--bs-secondary --bs-secondary-rgb`	`text-secondary` `text-bg-secondary` `bg-secondary` `border-secondary` `badge-secondary` `link-secondary`
		`--bs-secondary-bg-subtle`	`bg-secondary-subtle` [circle-half:sm] `alert-secondary` [circle-half:sm] `table-secondary`
		`--bs-secondary-border-subtle`	`border-secondary-subtle` *[circle-half:sm]
	Text	`--bs-secondary-text-emphasis`	`text-secondary-emphasis` *[circle-half:sm]
Success — Theme color used for positive or successful actions and information.		`--bs-success --bs-success-rgb`	`text-success` `text-bg-success` `bg-success` `border-success` `badge-success` `link-success`
		`--bs-success-bg-subtle`	`bg-success-subtle` [circle-half:sm] `alert-success` [circle-half:sm] `table-sucess`
		`--bs-success-border-subtle`	`border-success-subtle` *[circle-half:sm]
	Text	`--bs-success-text-emphasis`	`text-success-emphasis` *[circle-half:sm]
Danger — Theme color used for errors or dangerous actions and information.		`--bs-danger --bs-danger-rgb`	`text-danger` `text-bg-danger` `bg-danger` `border-danger` `badge-danger` `link-danger`
		`--bs-danger-bg-subtle`	`bg-danger-subtle` [circle-half:sm] `alert-danger` [circle-half:sm] `table-danger`
		`--bs-danger-border-subtle`	`border-danger-subtle` *[circle-half:sm]
	Text	`--bs-danger-text-emphasis`	`text-danger-emphasis` *[circle-half:sm]
Warning — Theme color used for non-destructive warning messages.		`--bs-warning --bs-warning-rgb`	`text-warning` `text-bg-warning` `bg-warning` `border-warning` `badge-warning` `link-warning`
		`--bs-warning-bg-subtle`	`bg-warning-subtle` [circle-half:sm] `alert-warning` [circle-half:sm] `table-warning`
		`--bs-warning-border-subtle`	`border-warning-subtle` *[circle-half:sm]
	Text	`--bs-warning-text-emphasis *[circle-half:sm]`	`text-warning-emphasis`
Info — Theme color used for neutral and informative content.		`--bs-info --bs-info-rgb`	`text-info` `text-bg-info` `bg-info` `border-info` `badge-info` `link-info`
		`--bs-info-bg-subtle`	`bg-info-subtle` [circle-half:sm] `alert-info` [circle-half:sm] `table-info`
		`--bs-info-border-subtle`	`border-info-subtle` *[circle-half:sm]
	Text	`--bs-info-text-emphasis`	`text-info-emphasis *[circle-half:sm]`
Light — Additional theme option for less contrasting colors.		`--bs-light --bs-light-rgb`	`text-light` `text-bg-light` `bg-light` `border-light` `badge-light` `link-light`
		`--bs-light-bg-subtle`	`bg-light-subtle` [circle-half:sm] `alert-light` [circle-half:sm] `table-light`
		`--bs-light-border-subtle`	`border-light-subtle` *[circle-half:sm]
	Text	`--bs-light-text-emphasis`	`text-light-emphasis` *[circle-half:sm]
Dark — Theme color used for higher contrasting colors.		`--bs-dark --bs-dark-rgb`	`text-dark` `text-bg-dark` `bg-dark` `border-dark` `badge-dark` `link-dark`
		`--bs-dark-bg-subtle`	`bg-dark-subtle` [circle-half:sm] `alert-dark` [circle-half:sm] `table-dark`
		`--bs-dark-border-subtle`	`border-dark-subtle` *[circle-half:sm]
	Text	`--bs-dark-text-emphasis`	`text-dark-emphasis` *[circle-half:sm]
White — Additional theme option for even less contrasting colors.		`--bs-white --bs-white-rgb`	`text-white` `bg-white` `border-white`
Black — Theme color used for even higher contrasting colors.		`--bs-black --bs-black-rgb`	`text-black` `bg-black` `border-black`
Transparent — Theme color used for transparent areas.		`--bs-transparent --bs-transparent-rgb`	`border-transparent` `bg-transparent`

All Colors

Beyond Bootstrap's base colors and color palette support, there is a color system that contains 10 base colors with more then 900 color variants. This enables more comprehensive customization and extensions for any project.

All colors are generated out of the Bootstrap base color blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray, black and white using color-mix() by adding white and black to lighten and darken the base colors.
You can use those colors via their respective CSS variable --bs-<color>-<level> where <color> is one of the base colors and <level> is the color level 100, 200, ... , 900 and style individual elements by adding a style definition e.g. background: var(--bs-indigo-300);
You can also use utility classes like text-<color>-<level>, bg-<color>-<level> and border-<color>-<level> e.g. bg-indigo-300

Example: defintion of blue color grades 100-900

Copy

:root {
    --bs-blue-100: color-mix(in srgb, white 80%, var(--bs-blue));
    --bs-blue-200: color-mix(in srgb, white 60%, var(--bs-blue));
    --bs-blue-300: color-mix(in srgb, white 40%, var(--bs-blue));
    --bs-blue-400: color-mix(in srgb, white 20%, var(--bs-blue));
    --bs-blue-500: var(--bs-blue);
    --bs-blue-600: color-mix(in srgb, black 20%, var(--bs-blue));
    --bs-blue-700: color-mix(in srgb, black 40%, var(--bs-blue));
    --bs-blue-800: color-mix(in srgb, black 60%, var(--bs-blue));
    --bs-blue-900: color-mix(in srgb, black 80%, var(--bs-blue));
}

--bs-blue #0d6efd	--bs-indigo #6610f2	--bs-purple #6f42c1
--bs-blue-100	--bs-indigo-100	--bs-purple-100
--bs-blue-200	--bs-indigo-200	--bs-purple-200
--bs-blue-300	--bs-indigo-300	--bs-purple-300
--bs-blue-400	--bs-indigo-400	--bs-purple-400
--bs-blue-500	--bs-indigo-500	--bs-purple-500
--bs-blue-600	--bs-indigo-600	--bs-purple-600
--bs-blue-700	--bs-indigo-700	--bs-purple-700
--bs-blue-800	--bs-indigo-800	--bs-purple-800
--bs-blue-900	--bs-indigo-900	--bs-purple-900

--bs-pink #d63384	--bs-red #dc3545	--bs-orange #fd7e14
--bs-pink-100	--bs-red-100	--bs-orange-100
--bs-pink-200	--bs-red-200	--bs-orange-200
--bs-pink-300	--bs-red-300	--bs-orange-300
--bs-pink-400	--bs-red-400	--bs-orange-400
--bs-pink-500	--bs-red-500	--bs-orange-500
--bs-pink-600	--bs-red-600	--bs-orange-600
--bs-pink-700	--bs-red-700	--bs-orange-700
--bs-pink-800	--bs-red-800	--bs-orange-800
--bs-pink-900	--bs-red-900	--bs-orange-900

--bs-yellow #ffc107	--bs-green #198754	--bs-teal #20c997
--bs-yellow-100	--bs-green-100	--bs-teal-100
--bs-yellow-200	--bs-green-200	--bs-teal-200
--bs-yellow-300	--bs-green-300	--bs-teal-300
--bs-yellow-400	--bs-green-400	--bs-teal-400
--bs-yellow-500	--bs-green-500	--bs-teal-500
--bs-yellow-600	--bs-green-600	--bs-teal-600
--bs-yellow-700	--bs-green-700	--bs-teal-700
--bs-yellow-800	--bs-green-800	--bs-teal-800
--bs-yellow-900	--bs-green-900	--bs-teal-900

--bs-cyan #0dcaf0	--bs-gray #adb5bd	--bs-black #000000
--bs-cyan-100	--bs-gray-100	--bs-white #ffffff
--bs-cyan-200	--bs-gray-200
--bs-cyan-300	--bs-gray-300
--bs-cyan-400	--bs-gray-400
--bs-cyan-500	--bs-gray-500
--bs-cyan-600	--bs-gray-600
--bs-cyan-700	--bs-gray-700
--bs-cyan-800	--bs-gray-800
--bs-cyan-900	--bs-gray-900

Colors

Text

Text

Text

Text

Text

Text

Text

Text

All Colors