Colors

Class	Styles
.fg-primary	--bs-fg: light-dark(var(--bs-blue-600), var(--bs-blue-400)); color: var(--bs-fg);
.fg-accent	--bs-fg: light-dark(var(--bs-indigo-600), color-mix(in oklch, var(--bs-indigo-400), var(--bs-indigo-300))); color: var(--bs-fg);
.fg-success	--bs-fg: light-dark(var(--bs-green-600), var(--bs-green-400)); color: var(--bs-fg);
.fg-danger	--bs-fg: light-dark(var(--bs-red-600), var(--bs-red-400)); color: var(--bs-fg);
.fg-warning	--bs-fg: light-dark(var(--bs-yellow-700), var(--bs-yellow-400)); color: var(--bs-fg);
.fg-info	--bs-fg: light-dark(var(--bs-cyan-600), var(--bs-cyan-400)); color: var(--bs-fg);
.fg-inverse	--bs-fg: light-dark(var(--bs-gray-900), var(--bs-gray-200)); color: var(--bs-fg);
.fg-secondary	--bs-fg: light-dark(var(--bs-gray-600), var(--bs-gray-400)); color: var(--bs-fg);
.fg-body	--bs-fg: light-dark(var(--bs-gray-900), var(--bs-gray-050)); color: var(--bs-fg);
.fg-1	--bs-fg: light-dark(var(--bs-gray-800), var(--bs-gray-200)); color: var(--bs-fg);
.fg-2	--bs-fg: light-dark(var(--bs-gray-700), var(--bs-gray-300)); color: var(--bs-fg);
.fg-3	--bs-fg: light-dark(var(--bs-gray-600), var(--bs-gray-500)); color: var(--bs-fg);
.fg-4	--bs-fg: light-dark(var(--bs-gray-500), var(--bs-gray-600)); color: var(--bs-fg);
.fg-white	--bs-fg: var(--bs-white); color: var(--bs-fg);
.fg-black	--bs-fg: var(--bs-black); color: var(--bs-fg);
.fg-inherit	--bs-fg: inherit; color: var(--bs-fg);
.fg-emphasis-primary	--bs-fg: light-dark(var(--bs-blue-800), var(--bs-blue-200)); color: var(--bs-fg);
.fg-emphasis-accent	--bs-fg: light-dark(var(--bs-indigo-800), var(--bs-indigo-300)); color: var(--bs-fg);
.fg-emphasis-success	--bs-fg: light-dark(var(--bs-green-800), var(--bs-green-300)); color: var(--bs-fg);
.fg-emphasis-danger	--bs-fg: light-dark(var(--bs-red-800), var(--bs-red-300)); color: var(--bs-fg);
.fg-emphasis-warning	--bs-fg: light-dark(var(--bs-yellow-800), var(--bs-yellow-300)); color: var(--bs-fg);
.fg-emphasis-info	--bs-fg: light-dark(var(--bs-cyan-800), var(--bs-cyan-300)); color: var(--bs-fg);
.fg-emphasis-inverse	--bs-fg: light-dark(var(--bs-gray-975), var(--bs-white)); color: var(--bs-fg);
.fg-emphasis-secondary	--bs-fg: light-dark(var(--bs-gray-800), var(--bs-gray-200)); color: var(--bs-fg);
.fg-10	color: color-mix(in oklch, var(--bs-fg) 10%, transparent);
.fg-20	color: color-mix(in oklch, var(--bs-fg) 20%, transparent);
.fg-30	color: color-mix(in oklch, var(--bs-fg) 30%, transparent);
.fg-40	color: color-mix(in oklch, var(--bs-fg) 40%, transparent);
.fg-50	color: color-mix(in oklch, var(--bs-fg) 50%, transparent);
.fg-60	color: color-mix(in oklch, var(--bs-fg) 60%, transparent);
.fg-70	color: color-mix(in oklch, var(--bs-fg) 70%, transparent);
.fg-80	color: color-mix(in oklch, var(--bs-fg) 80%, transparent);
.fg-90	color: color-mix(in oklch, var(--bs-fg) 90%, transparent);
.fg-100	color: var(--bs-fg);
.fg-contrast-primary	--bs-fg: var(--bs-white); color: var(--bs-fg);
.fg-contrast-accent	--bs-fg: var(--bs-white); color: var(--bs-fg);
.fg-contrast-success	--bs-fg: var(--bs-white); color: var(--bs-fg);
.fg-contrast-danger	--bs-fg: var(--bs-white); color: var(--bs-fg);
.fg-contrast-warning	--bs-fg: var(--bs-gray-900); color: var(--bs-fg);
.fg-contrast-info	--bs-fg: var(--bs-gray-900); color: var(--bs-fg);
.fg-contrast-inverse	--bs-fg: light-dark(var(--bs-white), var(--bs-gray-900)); color: var(--bs-fg);
.fg-contrast-secondary	--bs-fg: light-dark(var(--bs-gray-900), var(--bs-white)); color: var(--bs-fg);

Accessibility Tip: Using color to convey meaning

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

Change the color using utilities built on our theme colors using .fg-{color} and .fg-emphasis-{color}. All these color utilities set the color property to a local CSS variable, --bs-fg, which has the value of the theme color. Color values also use light-dark() to ensure sufficient contrast in both light and dark color modes.

For example, .fg-primary sets the --bs-fg variable to light-dark(var(--bs-blue-600), var(--bs-blue-400)):

CSS

.fg-primary {
  --bs-fg: light-dark(var(--bs-blue-600), var(--bs-blue-400));
  color: var(--bs-fg);
}

This approach allows us to also easily support translucency with our .fg-{opacity} utilities as we can use color-mix() with the CSS variable to generate the appropriate color. See the opacity section for more details.

If you want to colorize links, you can use the .link-{color} utilities which have :hover and :focus states.

.fg-primary

.fg-emphasis-primary

.fg-accent

.fg-emphasis-accent

.fg-success

.fg-emphasis-success

.fg-danger

.fg-emphasis-danger

.fg-warning

.fg-emphasis-warning

.fg-info

.fg-emphasis-info

.fg-inverse

.fg-emphasis-inverse

.fg-secondary

.fg-emphasis-secondary

.fg-body

.fg-1

.fg-2

.fg-3

.fg-4

.fg-black

.fg-white

HTML

<p class="fg-primary">.fg-primary</p>
<p class="fg-emphasis-primary">.fg-emphasis-primary</p>
<p class="fg-accent">.fg-accent</p>
<p class="fg-emphasis-accent">.fg-emphasis-accent</p>
<p class="fg-success">.fg-success</p>
<p class="fg-emphasis-success">.fg-emphasis-success</p>
<p class="fg-danger">.fg-danger</p>
<p class="fg-emphasis-danger">.fg-emphasis-danger</p>
<p class="fg-warning">.fg-warning</p>
<p class="fg-emphasis-warning">.fg-emphasis-warning</p>
<p class="fg-info">.fg-info</p>
<p class="fg-emphasis-info">.fg-emphasis-info</p>
<p class="fg-inverse">.fg-inverse</p>
<p class="fg-emphasis-inverse">.fg-emphasis-inverse</p>
<p class="fg-secondary">.fg-secondary</p>
<p class="fg-emphasis-secondary">.fg-emphasis-secondary</p>

<p class="fg-body">.fg-body</p>
<p class="fg-1">.fg-1</p>
<p class="fg-2">.fg-2</p>
<p class="fg-3">.fg-3</p>
<p class="fg-4">.fg-4</p>

<p class="fg-black bg-white">.fg-black</p>
<p class="fg-white bg-dark">.fg-white</p>

Opacity

Change the opacity of a text color by using any of the .fg-<percentage> utilities which use color-mix() to mix the text color with transparent thanks to the CSS variable approach mentioned above.

This is default primary text

This is 90% opacity primary text

This is 80% opacity primary text

This is 70% opacity primary text

This is 60% opacity primary text

This is 50% opacity primary text

This is 40% opacity primary text

This is 30% opacity primary text

This is 20% opacity primary text

This is 10% opacity primary text

HTML

<div class="fg-primary">This is default primary text</div>
<div class="fg-primary fg-90">This is 90% opacity primary text</div>
<div class="fg-primary fg-80">This is 80% opacity primary text</div>
<div class="fg-primary fg-70">This is 70% opacity primary text</div>
<div class="fg-primary fg-60">This is 60% opacity primary text</div>
<div class="fg-primary fg-50">This is 50% opacity primary text</div>
<div class="fg-primary fg-40">This is 40% opacity primary text</div>
<div class="fg-primary fg-30">This is 30% opacity primary text</div>
<div class="fg-primary fg-20">This is 20% opacity primary text</div>
<div class="fg-primary fg-10">This is 10% opacity primary text</div>

Contrast colors

Change the contrast color of a text or link with .fg-contrast-{color}. This will set the --bs-fg variable to the theme’s contrast key color.

CSS

.fg-contrast-primary {
  --bs-fg: var(--bs-white);
  color: var(--bs-fg);
}

.fg-contrast-primary

.fg-contrast-accent

.fg-contrast-success

.fg-contrast-danger

.fg-contrast-warning

.fg-contrast-info

.fg-contrast-inverse

.fg-contrast-secondary

HTML

<p class="bg-primary fg-contrast-primary">.fg-contrast-primary</p>
<p class="bg-accent fg-contrast-accent">.fg-contrast-accent</p>
<p class="bg-success fg-contrast-success">.fg-contrast-success</p>
<p class="bg-danger fg-contrast-danger">.fg-contrast-danger</p>
<p class="bg-warning fg-contrast-warning">.fg-contrast-warning</p>
<p class="bg-info fg-contrast-info">.fg-contrast-info</p>
<p class="bg-inverse fg-contrast-inverse">.fg-contrast-inverse</p>
<p class="bg-secondary fg-contrast-secondary">.fg-contrast-secondary</p>

These even mix with the opacity utilities.

.fg-contrast-primary fg-100

.fg-contrast-primary fg-90

.fg-contrast-primary fg-80

.fg-contrast-primary fg-70

.fg-contrast-primary fg-60

.fg-contrast-primary fg-50

.fg-contrast-primary fg-40

.fg-contrast-primary fg-30

.fg-contrast-primary fg-20

.fg-contrast-primary fg-10

HTML

<p class="bg-primary fg-contrast-primary fg-100">.fg-contrast-primary fg-100</p>
<p class="bg-primary fg-contrast-primary fg-90">.fg-contrast-primary fg-90</p>
<p class="bg-primary fg-contrast-primary fg-80">.fg-contrast-primary fg-80</p>
<p class="bg-primary fg-contrast-primary fg-70">.fg-contrast-primary fg-70</p>
<p class="bg-primary fg-contrast-primary fg-60">.fg-contrast-primary fg-60</p>
<p class="bg-primary fg-contrast-primary fg-50">.fg-contrast-primary fg-50</p>
<p class="bg-primary fg-contrast-primary fg-40">.fg-contrast-primary fg-40</p>
<p class="bg-primary fg-contrast-primary fg-30">.fg-contrast-primary fg-30</p>
<p class="bg-primary fg-contrast-primary fg-20">.fg-contrast-primary fg-20</p>
<p class="bg-primary fg-contrast-primary fg-10">.fg-contrast-primary fg-10</p>

Reset color

Reset a text or link's color with .text-reset, so that it inherits the color from its parent.

Lighter body text with a reset link.

HTML

<p class="fg-3">
  Lighter body text with a <a href="#" class="text-reset">reset link</a>.
</p>

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

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

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

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

// $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.

Sass utilities API

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

SCSS

// "color-attr": (
//   selector: "attr-includes",
//   class: "fg-",
//   property: color,
//   values: var(--fg),
// ),
"fg": (
  property: (
    "--fg": null,
    "color": var(--fg)
  ),
  class: fg,
  values: map.merge(theme-color-values("text"), $theme-fgs),
),
"fg-emphasis": (
  property: (
    "--fg": null,
    "color": var(--fg)
  ),
  class: fg-emphasis,
  values: theme-color-values("text-emphasis"),
),
"fg-contrast": (
  property: (
    "--fg": null,
    "color": var(--fg)
  ),
  class: fg-contrast,
  values: theme-color-values("contrast"),
),
"fg-opacity": (
  class: fg,
  property: color,
  values: theme-opacity-values(--fg)
),