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.
ColorsLink to this section: 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.
To colorize icons, please refer to our icon color documentation.
Bootstrap provides many .text-* and .bg-* utilities, but they should be used with care to meet our design specifications and WCAG 2.2 accessibility standards for color contrast.
To be sure to respect the specifications, it is necessary to define color, background-color and font-size altogether.
Thus, the .text-primary color on white background (#f16e00) can only be used in a font size greater than 24px (using for example .fs-3 utility), or 19px bold (using for example .fs-4 and .fw-bold utilities).
The .text-primary color on dark background (#ff7900) can be used in any size, and it shouldn't be used on light grey backgrounds at all.
Here are some compliant combinations examples for texts:
regular text
regular primary text with minimum font-size for contrast with .fs-3 (restrictive because of the light mode)
regular secondary text
bold text
bold primary text with minimum font-size for contrast with .fs-4 (restrictive because of the light mode)
bold secondary text
regular white text
regular primary text
regular secondary text
bold white text
bold primary text
bold secondary text
<div class="p-1" data-bs-theme="light">
<p>regular text</p>
<p class="text-primary fs-3">regular primary text with minimum font-size for contrast with .fs-3 (restrictive because of the light mode)</p>
<p class="text-body-secondary">regular secondary text</p>
<p class="fw-bold">bold text</p>
<p class="text-primary fs-4 fw-bold">bold primary text with minimum font-size for contrast with .fs-4 (restrictive because of the light mode)</p>
<p class="text-body-secondary fw-bold">bold secondary text</p>
</div>
<div class="p-1" data-bs-theme="dark">
<p class="text-white">regular white text</p>
<p class="text-primary">regular primary text</p>
<p class="text-body-secondary">regular secondary text</p>
<p class="text-white fw-bold">bold white text</p>
<p class="text-primary fw-bold">bold primary text</p>
<p class="text-body-secondary fw-bold">bold secondary text</p>
</div>When the interface allows to switch between light and dark backgrounds, the light mode stricter restrictions must be applied!
The following colors are meant to be used with icons.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-body-emphasis
.text-body-secondary
.text-black
.text-white
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-black">.text-white</p>See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Some of the colors combinations below do not belong to the Orange Design System specifications, and do not meet accessibility standards.
Please refer to our Orange's colors section above and to the Color guidelines on the Orange Design System website.
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis bg-dark">.text-warning-emphasis</p>
<p class="text-info">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis bg-dark">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis bg-white">.text-dark-emphasis</p>
<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>
<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-black">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-black">.text-white-50</p>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.
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.
OpacityLink to this section: 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 worksLink to this section: How it works
Consider our default .text-primary utility.
.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 241, 110, 0 in light mode) 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(241, 110, 0, 1) in light mode. 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.
When used in dark mode, --bs-primary-rgb will use the value of (with the value of 255, 121, 0).
ExampleLink to this section: Example
To change that opacity, override --bs-text-opacity via custom styles or inline styles.
See Bootstrap examples that are incompatible with Orange Design System.
Incompatibility with Orange Design System. More information
Some of the colors combinations below do not belong to the Orange Design System specifications, and do not meet accessibility standards.
Please refer to our Orange's colors section above.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>Or, choose from any of the .text-opacity utilities:
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>SpecificityLink to this section: 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.
CSSLink to this section: CSS
In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.
Sass variablesLink to this section: Sass variables
Most color utilities are generated by our theme colors, reassigned from our generic color palette variables.
Boosted supersedes Bootstrap color variables with Orange brand color.
//// Functional colors
$functional-green: $ods-forest-200;
$functional-blue: $ods-water-200;
$functional-yellow: $ods-sun-100;
$functional-red: $ods-fire-200;
//// Supporting colors
$supporting-blue: $ods-blue-300;
$supporting-yellow: $ods-yellow-300;
$supporting-green: $ods-green-300;
$supporting-purple: $ods-purple-300;
$supporting-pink: $ods-pink-300;
$supporting-orange: $ods-orange-100;
$functional-green-dark: $ods-forest-100;
$functional-blue-dark: $ods-water-100;
$functional-yellow-dark: $functional-yellow;
$functional-red-dark: $ods-fire-100;
$blue: $functional-blue;
$indigo: $supporting-purple;
$purple: $supporting-purple;
$pink: $supporting-pink;
$red: $functional-red;
$orange: $ods-orange-200;
$yellow: $functional-yellow;
$green: $functional-green;
$teal: $supporting-green;
$cyan: $supporting-blue;
$primary: $orange;
$secondary: $black;
$success: $green;
$info: $blue;
$warning: $yellow;
$danger: $red;
$light: $gray-500;
$dark: $black;
$primary-dark: $supporting-orange;
$secondary-dark: $white;
$success-dark: $functional-green-dark;
$info-dark: $functional-blue-dark;
$warning-dark: $functional-yellow-dark;
$danger-dark: $functional-red-dark;
$light-dark: $gray-500;
$dark-dark: $black;
Grayscale colors are also available, but only a subset are used to generate any utilities.
$white: $ods-white-100;
$gray-100: #fafafa;
$gray-200: #f6f6f6;
$gray-300: $ods-gray-200;
$gray-400: $ods-gray-300;
$gray-500: $ods-gray-400;
$gray-600: $ods-gray-500;
$gray-700: $ods-gray-600;
$gray-800: $ods-gray-700;
$gray-900: $ods-gray-800;
$gray-950: $ods-gray-900;
$black: $ods-black-900;
$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:
$primary-text-emphasis: $primary; // Boosted mod: instead of `shade-color($primary, 60%)`
$secondary-text-emphasis: $secondary; // Boosted mod: instead of `shade-color($secondary, 60%)`
$success-text-emphasis: $success; // Boosted mod: instead of `shade-color($success, 60%)`
$info-text-emphasis: $info; // Boosted mod: instead of `shade-color($info, 60%)`
$warning-text-emphasis: $warning; // Boosted mod: instead of `shade-color($warning, 60%)`
$danger-text-emphasis: $danger; // Boosted mod: instead of `shade-color($danger, 60%)`
$light-text-emphasis: $light; // Boosted mod: instead of `$gray-700`
$dark-text-emphasis: $dark; // Boosted mod: instead of `$gray-700`
$primary-text-emphasis-dark: $primary-dark; // Boosted mod: instead of `tint-color($primary, 40%)`
$secondary-text-emphasis-dark: $secondary-dark; // Boosted mod: instead of `tint-color($secondary, 40%)`
$success-text-emphasis-dark: $success-dark; // Boosted mod: instead of `tint-color($success, 40%)`
$info-text-emphasis-dark: $info-dark; // Boosted mod: instead of `tint-color($info, 40%)`
$warning-text-emphasis-dark: $warning-dark; // Boosted mod: instead of `tint-color($warning, 40%)`
$danger-text-emphasis-dark: $danger-dark; // Boosted mod: instead of `tint-color($danger, 40%)`
$light-text-emphasis-dark: $light-dark; // Boosted mod: instead of `$gray-100`
$dark-text-emphasis-dark: $dark-dark; // Boosted mod: instead of `$gray-300`
Sass mapsLink to this section: 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.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
$theme-colors-dark: (
"primary": $primary-dark,
"secondary": $secondary-dark,
"success": $success-dark,
"info": $info-dark,
"warning": $warning-dark,
"danger": $danger-dark,
"light": $light-dark,
"dark": $dark-dark,
);
Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.
$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,
"950": $gray-950,
);
RGB colors are generated from a separate Sass map:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-text-map
$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-docs-end theme-text-map
// scss-docs-start theme-bg-subtle-map
$theme-colors-bg-subtle: (
"primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle,
"success": $success-bg-subtle,
"info": $info-bg-subtle,
"warning": $warning-bg-subtle,
"danger": $danger-bg-subtle,
"light": $light-bg-subtle,
"dark": $dark-bg-subtle,
);
// scss-docs-end theme-bg-subtle-map
// scss-docs-start theme-border-subtle-map
$theme-colors-border-subtle: (
"primary": $primary-border-subtle,
"secondary": $secondary-border-subtle,
"success": $success-border-subtle,
"info": $info-border-subtle,
"warning": $warning-border-subtle,
"danger": $danger-border-subtle,
"light": $light-border-subtle,
"dark": $dark-border-subtle,
);
// scss-docs-end theme-border-subtle-map
$theme-colors-rgb-dark: null;
$theme-colors-text-dark: null;
$theme-colors-bg-subtle-dark: null;
$theme-colors-border-subtle-dark: null;
@if $enable-dark-mode {
// Boosted mod
// scss-docs-start theme-colors-rgb-dark
$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value");
$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value");
Color opacities build on that with their own map that's consumed by the utilities API:
$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:
$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,
);
$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 APILink to this section: Sass utilities API
Color utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"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
),