Color

Colors

There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.

All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.

Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.

How it works

Bootstrap generates its colors from a series of Sass variables and a Sass map called $colors in scss/_colors.scss. These are our base colors—blue, indigo, violet, etc—and are used to generate the tints and shades of each color you see above. You can customize these colors by adding or removing colors from the $colors map.

Default colors

Below is our default list of colors. Colors are unique in Bootstrap in that they're still Sass variables by default. In addition, they're in oklch() format, which is a modern color space that is designed to be perceptually uniform.

$blue: oklch(60% 0.24 240);
$indigo: oklch(56% 0.26 288);
$violet: oklch(56% 0.24 300);
$purple: oklch(56% 0.24 320);
$pink: oklch(60% 0.22 4);
$red: oklch(60% 0.22 20);
$orange: oklch(70% 0.22 52);
$amber: oklch(79% 0.2 78);
$yellow: oklch(88% 0.24 88);
$lime: oklch(65% 0.24 135);
$green: oklch(64% 0.22 160);
$teal: oklch(68% 0.22 190);
$cyan: oklch(69% 0.22 220);
$brown: oklch(60% 0.12 54);
$gray: oklch(60% 0.02 245);
$pewter: oklch(65% 0.01 290);

The above colors are then turned into a Sass map called $colors.

$colors: ();

// stylelint-disable-next-line scss/dollar-variable-default
$colors: defaults(
  (
    "blue": $blue,
    "indigo": $indigo,
    "violet": $violet,
    "purple": $purple,
    "pink": $pink,
    "red": $red,
    "orange": $orange,
    "amber": $amber,
    "yellow": $yellow,
    "lime": $lime,
    "green": $green,
    "teal": $teal,
    "cyan": $cyan,
    "brown": $brown,
    "gray": $gray,
    "pewter": $pewter,
  ),
  $colors
);

Color mixing

As mentioned already, we generate lighter (tints) and darker (shades) versions of each color using the color-mix() function. This allows us to quickly and easily generate a full scale of colors.

The tint and shade stops, the color-mix() color space, and the mix colors are all customizable.

$color-mix-space: lab;
$tint-color: var(--white);
$shade-color: var(--black);

$color-tints: (
  "025": 94%,
  "050": 90%,
  "100": 80%,
  "200": 60%,
  "300": 40%,
  "400": 20%,
);

$color-shades: (
  "600": 16%,
  "700": 32%,
  "800": 48%,
  "900": 64%,
  "950": 76%,
  "975": 88%,
);

Those options and the $colors map are used to generate a $color-tokens map, which is output as CSS custom properties on :root.

$color-tokens: ();

$-color-defaults: ();
@each $color, $value in $colors {
  @each $stop, $percent in $color-tints {
    $-color-defaults: map.set($-color-defaults, --#{$color}-#{$stop}, color-mix(in #{$color-mix-space}, #{$tint-color} #{$percent}, #{$value}));
  }
  $-color-defaults: map.set($-color-defaults, --#{$color}-500, #{$value});
  @each $stop, $percent in $color-shades {
    $-color-defaults: map.set($-color-defaults, --#{$color}-#{$stop}, color-mix(in #{$color-mix-space}, #{$shade-color} #{$percent}, #{$value}));
  }
}

// stylelint-disable-next-line scss/dollar-variable-default
$color-tokens: defaults($-color-defaults, $color-tokens);

Customizing

You can customize the colors by adding or removing colors from the $colors map. You can also customize the tint and shade stops, the color-mix() color space, and the mix colors. Say you want to add another blue-gray color, like slate.

1. Create a new Sass variable for the new color, in oklch() format.
2. Add the new color to the $colors map.
3. Recompile source Sass to generate the new colors.

Here's how that would look:

$slate: oklch(55% 0.07 260);

@use "bootstrap" as * with (
  $colors: (
    "slate": $slate,
  ),
);

To remove a color, set the value to null.

@use "bootstrap" as * with (
  $colors: (
    "pewter": null,
  ),
);

Generating utilities

Bootstrap doesn’t include color and background-color utilities for every color variable, but you can generate these yourself with our utility API and our extended Sass maps added in v5.1.0.

1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
2. Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.
3. Merge this new combined map to extend any utility with a {color}-{level} class name.

Here’s an example that generates text color utilities (e.g., .text-purple-500) using the above steps.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

This will generate new .text-{color}-{level} utilities for every color and level. You can do the same for any other utility and property as well.