View on GitHub

Color

Boosted is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

On this page

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted’s scss/_variables.scss file.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

All these colors are available as a Sass map, $theme-colors.

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

Check out our Sass maps and loops docs for how to modify these colors.

All colors

All Boosted 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.

$blue #527edb

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$purple #a885d8

$purple-100

$purple-200

$purple-300

$purple-400

$purple-500

$purple-600

$purple-700

$purple-800

$purple-900

$pink #ffb4e6

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red #cd3c14

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$orange #ff7900

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$yellow #fc0

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$green #32c832

$green-100

$green-200

$green-300

$green-400

$green-500

$green-600

$green-700

$green-800

$green-900

$teal #50be87

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan #4bb4e6

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$gray-500 #adb5bd

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-900

$accessible-orange #f16e00

$supporting-yellow #fc0

$black #000

$white #fff

Orange’s colors

Boosted sets an additional layer to use Orange Brand’s color tokens names—defined first and mapped to Bootstrap core variables. Boosted core uses Bootstrap’s naming for maintenance ease, but you’re encouraged to use Orange color tokens when it comes to custom code.

Orange color tokens

// Boosted mod
//// Core colors
$accessible-orange: #f16e00;
$brand-orange:      #ff7900;
//// Functional colors
$functional-green:  #32c832;
$functional-blue:   #527edb;
$functional-yellow: #fc0;
$functional-red:    #cd3c14;
//// Supporting colors
$supporting-blue:   #4bb4e6;
$supporting-yellow: #ffd200;
$supporting-green:  #50be87;
$supporting-purple: #a885d8;
$supporting-pink:   #ffb4e6;

Bootstrap core variables

$blue:    $functional-blue;
$indigo:  $supporting-purple;
$purple:  $supporting-purple;
$pink:    $supporting-pink;
$red:     $functional-red;
$orange:  $brand-orange;
$yellow:  $functional-yellow;
$green:   $functional-green;
$teal:    $supporting-green;
$cyan:    $supporting-blue;

Notes on Sass

Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., $blue-500) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s mix() color function.

Using mix() is not the same as lighten() and darken()—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as shown in this CodePen demo.

Our tint-color() and shade-color() functions use mix() alongside our $theme-color-interval variable, which specifies a stepped percentage value for each mixed color we produce. See the scss/_functions.scss and scss/_variables.scss files for the full source code.

Color Sass maps

Boosted’s source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.

$colors lists all our available base (500) colors
$theme-colors lists all semantically named theme colors (shown below)
$background-colors overrides $theme-colors specifically for usage in .bg-* utilities
$grays lists all tints and shades of gray

Within scss/_variables.scss, you’ll find Boosted’s color variables and Sass map. Here’s an example of the $colors Sass map:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Example

Here’s how you can use these in your Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Color and background utility classes are also available for setting color and background-color using the 500 color values.