--- layout: docs title: Color description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project. group: customize toc: true --- ## Colors {{< added-in "5.3.0" >}} Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged. Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`. {{< callout warning>}} **Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6. {{< /callout >}}
Description | Swatch | Variables |
---|---|---|
{{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} |
|
{{< markdown >}}`--bs-body-color` `--bs-body-color-rgb`{{< /markdown >}} |
|
{{< markdown >}}`--bs-body-bg` `--bs-body-bg-rgb`{{< /markdown >}} |
|
{{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} |
|
{{< markdown >}}`--bs-secondary-color` `--bs-secondary-color-rgb`{{< /markdown >}} |
|
{{< markdown >}}`--bs-secondary-bg` `--bs-secondary-bg-rgb`{{< /markdown >}} |
|
{{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} |
|
{{< markdown >}}`--bs-tertiary-color` `--bs-tertiary-color-rgb`{{< /markdown >}} |
|
{{< markdown >}}`--bs-tertiary-bg` `--bs-tertiary-bg-rgb`{{< /markdown >}} |
|
{{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} |
|
{{< markdown >}}`--bs-emphasis-color` `--bs-emphasis-color-rgb`{{< /markdown >}} |
{{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} |
|
{{< markdown >}}`--bs-border-color` `--bs-border-color-rgb`{{< /markdown >}} |
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} |
Primary
|
{{< markdown >}}`--bs-primary` `--bs-primary-rgb`{{< /markdown >}} |
Background subtle
|
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} | |
Border subtle
|
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} | |
Text
|
{{< markdown >}}`--bs-primary-text`{{< /markdown >}} | |
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} |
Success
|
{{< markdown >}}`--bs-success` `--bs-success-rgb`{{< /markdown >}} |
Background subtle
|
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} | |
Border subtle
|
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} | |
Text
|
{{< markdown >}}`--bs-success-text`{{< /markdown >}} | |
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} |
Danger
|
{{< markdown >}}`--bs-danger` `--bs-danger-rgb`{{< /markdown >}} |
Background subtle
|
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} | |
Border subtle
|
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} | |
Text
|
{{< markdown >}}`--bs-danger-text`{{< /markdown >}} | |
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} |
Warning
|
{{< markdown >}}`--bs-warning` `--bs-warning-rgb`{{< /markdown >}} |
Background subtle
|
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} | |
Border subtle
|
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} | |
Text
|
{{< markdown >}}`--bs-warning-text`{{< /markdown >}} | |
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} |
Info
|
{{< markdown >}}`--bs-info` `--bs-info-rgb`{{< /markdown >}} |
Background subtle
|
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} | |
Border subtle
|
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} | |
Text
|
{{< markdown >}}`--bs-info-text`{{< /markdown >}} | |
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} |
Light
|
{{< markdown >}}`--bs-light` `--bs-light-rgb`{{< /markdown >}} |
Background subtle
|
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} | |
Border subtle
|
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} | |
Text
|
{{< markdown >}}`--bs-light-text`{{< /markdown >}} | |
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} |
Dark
|
{{< markdown >}}`--bs-dark` `--bs-dark-rgb`{{< /markdown >}} |
Background subtle
|
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} | |
Border subtle
|
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} | |
Text
|
{{< markdown >}}`--bs-dark-text`{{< /markdown >}} |