--- layout: docs title: Colors description: Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too. group: utilities toc: true --- {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ## Colors Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states. {{< callout info >}} Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6. {{< /callout >}} {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}
.text-{{ .name }}
.text-{{ .name }}-emphasis
{{- end -}} {{< /colors.inline >}}.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
{{< /example >}} {{< callout warning >}} **Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0. {{< /callout >}} {{< callout warning >}} **Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. {{< /callout >}} ## Opacity {{< added-in "5.1.0" >}} As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes. ### How it works Consider our default `.text-primary` utility. ```css .text-primary { --bs-text-opacity: 1; color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; } ``` We use an RGB version of our `--bs-primary` (with the value of `13, 110, 253`) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(13, 110, 253, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency. ### Example To change that opacity, override `--bs-text-opacity` via custom styles or inline styles. {{< example >}}