Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

On this page

Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Colors

Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.

Brand

When using these colors, it is important to maintain sufficient color contrast between your text color and background color. You can utilize the WebAim Color Contrast Checker to verify your color contrast. Or, for your convenience, Arizona Bootstrap also provides a helpful tool to determine which brand text colors have sufficient color contrast on other brand background colors.

.text-red

.text-bloom

.text-chili

.text-blue

.text-sky

.text-oasis

.text-azurite

.text-midnight

.text-cool-gray

.text-warm-gray

.text-leaf

.text-river

.text-silver

.text-mesa

.text-ash

.text-sage

.text-white

.text-black

.text-dark-silver

html

<p class="text-red">.text-red</p>
<p class="text-bloom">.text-bloom</p>
<p class="text-chili">.text-chili</p>
<p class="text-blue">.text-blue</p>
<p class="text-sky">.text-sky</p>
<p class="text-oasis">.text-oasis</p>
<p class="text-azurite">.text-azurite</p>
<p class="text-midnight">.text-midnight</p>
<p class="text-cool-gray bg-dark">.text-cool-gray</p>
<p class="text-warm-gray bg-dark">.text-warm-gray</p>
<p class="text-leaf">.text-leaf</p>
<p class="text-river">.text-river</p>
<p class="text-silver bg-dark">.text-silver</p>
<p class="text-mesa">.text-mesa</p>
<p class="text-ash">.text-ash</p>
<p class="text-sage">.text-sage</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black">.text-black</p>
<p class="text-dark-silver">.text-dark-silver</p>

Further information from upstream Bootstrap

Opacity

Added in v5.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-midnight utility.

.text-midnight {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-midnight-rgb), var(--bs-text-opacity)) !important;
}

We use an RGB version of our --bs-midnight (with the value of 0, 28, 72) 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-midnight now, your computed color value is rgba(0, 28, 72, 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.

This is default midnight text

This is 50% opacity midnight text

html

<div class="text-midnight">This is default midnight text</div>
<div class="text-midnight" style="--bs-text-opacity: .5;">This is 50% opacity midnight text</div>

Or, choose from any of the .text-opacity utilities:

This is default midnight text

This is 75% opacity midnight text

This is 50% opacity midnight text

This is 25% opacity midnight text

html

<div class="text-midnight">This is default midnight text</div>
<div class="text-midnight text-opacity-75">This is 75% opacity midnight text</div>
<div class="text-midnight text-opacity-50">This is 50% opacity midnight text</div>
<div class="text-midnight text-opacity-25">This is 25% opacity midnight text</div>

Specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.

CSS

In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.

Sass variables

Most color utilities are generated by our theme colors, reassigned from our generic color palette variables.

scss/_variables.scss

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

scss/_variables.scss

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Grayscale colors are also available, but only a subset are used to generate any utilities.

scss/_variables.scss

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

scss/_maps.scss

$theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
);

Variables for setting colors in .text-*-emphasis utilities in light and dark mode:

scss/_variables.scss

$primary-text-emphasis:   shade-color($primary, 60%);
$secondary-text-emphasis: shade-color($secondary, 60%);
$success-text-emphasis:   shade-color($success, 60%);
$info-text-emphasis:      shade-color($info, 60%);
$warning-text-emphasis:   shade-color($warning, 60%);
$danger-text-emphasis:    shade-color($danger, 60%);
$light-text-emphasis:     $gray-700;
$dark-text-emphasis:      $gray-700;

scss/_variables-dark.scss

$primary-text-emphasis-dark:        tint-color($primary, 40%);
$secondary-text-emphasis-dark:      tint-color($secondary, 40%);
$success-text-emphasis-dark:        tint-color($success, 40%);
$info-text-emphasis-dark:           tint-color($info, 40%);
$warning-text-emphasis-dark:        tint-color($warning, 40%);
$danger-text-emphasis-dark:         tint-color($danger, 40%);
$light-text-emphasis-dark:          $gray-100;
$dark-text-emphasis-dark:           $gray-300;

Sass maps

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.

scss/_variables.scss

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.

scss/_variables.scss

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

RGB colors are generated from a separate Sass map:

scss/_maps.scss

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Color opacities build on that with their own map that’s consumed by the utilities API:

scss/_maps.scss

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

$utilities-text-emphasis-colors: (
  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
  "success-emphasis": var(--#{$prefix}success-text-emphasis),
  "info-emphasis": var(--#{$prefix}info-text-emphasis),
  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
  "light-emphasis": var(--#{$prefix}light-text-emphasis),
  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
);

Color mode adaptive text colors are also available as a Sass map:

scss/_maps.scss

$theme-colors-text: (
  "primary": $primary-text-emphasis,
  "secondary": $secondary-text-emphasis,
  "success": $success-text-emphasis,
  "info": $info-text-emphasis,
  "warning": $warning-text-emphasis,
  "danger": $danger-text-emphasis,
  "light": $light-text-emphasis,
  "dark": $dark-text-emphasis,
);

scss/_maps.scss

$theme-colors-text-dark: (
  "primary": $primary-text-emphasis-dark,
  "secondary": $secondary-text-emphasis-dark,
  "success": $success-text-emphasis-dark,
  "info": $info-text-emphasis-dark,
  "warning": $warning-text-emphasis-dark,
  "danger": $danger-text-emphasis-dark,
  "light": $light-text-emphasis-dark,
  "dark": $dark-text-emphasis-dark,
);

Sass utilities API

Color utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss

"color": (
  property: color,
  class: text,
  local-vars: (
    "text-opacity": 1
  ),
  values: map-merge(
    $utilities-text-colors,
    (
      "muted": var(--#{$prefix}secondary-color), // deprecated
      "black-50": rgba($black, .5), // deprecated
      "white-50": rgba($white, .5), // deprecated
      "body-secondary": var(--#{$prefix}secondary-color),
      "body-tertiary": var(--#{$prefix}tertiary-color),
      "body-emphasis": var(--#{$prefix}emphasis-color),
      "reset": inherit,
    )
  )
),
"text-opacity": (
  css-var: true,
  class: text-opacity,
  values: (
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"text-color": (
  property: color,
  class: text,
  values: $utilities-text-emphasis-colors
),