Added in v5.3

Color palette

Boosted’s color palette is the summary of all the existing and useable colors.

On this page

Palette

This section exposes all the existing colors inside the Boosted palette. These variables aren’t meant to be used, it’s an exposure of the available variables. Be aware that none of the variables presented depend on the theme.

Please make sure that none of the color theme variables fit your needs before getting one here.

#ff7900

$ods-orange-100

#f16e00

$ods-orange-200

#fff

$ods-white-100

#eee

$ods-gray-200

#ddd

$ods-gray-300

#ccc

$ods-gray-400

#999

$ods-gray-500

#666

$ods-gray-600

#595959

$ods-gray-700

#333

$ods-gray-800

#141414

$ods-gray-900

#000

$ods-black-900

#6c6

$ods-forest-100

#228722

$ods-forest-200

#f66

$ods-fire-100

#cd3c14

$ods-fire-200

#69f

$ods-water-100

#4170d8

$ods-water-200

#fc0

$ods-sun-100

#8f7200

$ods-sun-200

#b5e8f7

$ods-blue-100

#80ceef

$ods-blue-200

#4bb4e6

$ods-blue-300

#3e9dd6

$ods-blue-400

#237eca

$ods-blue-500

#085ebd

$ods-blue-600

#b8ebd6

$ods-green-100

#84d5af

$ods-green-200

#50be87

$ods-green-300

#27a971

$ods-green-400

#198c51

$ods-green-500

#0a6e31

$ods-green-600

#ffe8f7

$ods-pink-100

#ffceef

$ods-pink-200

#ffb4e6

$ods-pink-300

#ff8ad4

$ods-pink-400

#d573bb

$ods-pink-500

#bc4d9a

$ods-pink-600

#d9c2f0

$ods-purple-100

#c1a4e4

$ods-purple-200

#a885d8

$ods-purple-300

#9373bd

$ods-purple-400

#6e4aa7

$ods-purple-500

#492191

$ods-purple-600

#fff6b6

$ods-yellow-100

#ffe45b

$ods-yellow-200

#ffd200

$ods-yellow-300

#ffb400

$ods-yellow-400

#b98f11

$ods-yellow-500

#9d6e06

$ods-yellow-600

Bootstrap’s palette

Bootstrap defines a color palette on its own. We worked on a mapping between Orange Design System’s colors and Bootstrap’s ones in cases where users will use Bootstrap-based plugins or libraries so that, when used with Boosted CSS, provides an acceptable automatic rendering.

See Bootstrap's palette

All colors

Incompatibility with Orange Design System. More information

Some of the colors below do not belong to the Orange Design System specifications.

Please refer to our Boosted color palette section and to the Color guidelines on the Orange Design System website.

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.

Please note that in the Boosted colors, the indigo colors are the same as the purple ones.

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 #4170d8

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$indigo #a885d8

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-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 #f16e00

$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 #228722

$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 #ccc

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-900

$gray-950

$black #000

$white #fff

Notes on Sass

Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves.

For $indigo, $purple, $pink, $teal, and $cyan, we specify first 6 colors (*-100 to *-600) from the Boosted palette (tokens) and build the last ones programmatically to darken our *-600.
For the grays, the first 2 ($gray-100 and $gray-200) are opinionated values and only the last 8 (*-300 to *-950) are extracted from the Boosted palette.
For the remaining, only the *-500 are correct since we specify the midpoint value and use custom color functions to tint (lighten) or shade (darken) our colors vis 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.

Example

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

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

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

CSS

Boosted sets an additional layer to use Orange Design System’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.

Sass variables

A first layer of Sass variables defines the Boosted’s color palette.

scss/_color-palette.scss

// Palette

// Colors palette

// Orange
$ods-orange-100:  #ff7900;
$ods-orange-200:  #f16e00;

// White, grays and black
$ods-white-100:   #fff;
$ods-gray-200:    #eee;
$ods-gray-300:    #ddd;
$ods-gray-400:    #ccc;
$ods-gray-500:    #999;
$ods-gray-600:    #666;
$ods-gray-700:    #595959;
$ods-gray-800:    #333;
$ods-gray-900:    #141414;
$ods-black-900:   #000;

// Forest
$ods-forest-100:  #6c6;
$ods-forest-200:  #228722;

// Fire
$ods-fire-100:    #f66;
$ods-fire-200:    #cd3c14;

// Water
$ods-water-100:   #69f;
$ods-water-200:   #4170d8;

// Sun
$ods-sun-100:     #fc0;
// fusv-disable
$ods-sun-200:     #8f7200;
// fusv-enable

// Blue
$ods-blue-100:    #b5e8f7;
$ods-blue-200:    #80ceef;
$ods-blue-300:    #4bb4e6;
$ods-blue-400:    #3e9dd6;
$ods-blue-500:    #237eca;
$ods-blue-600:    #085ebd;

// Green
$ods-green-100:   #b8ebd6;
$ods-green-200:   #84d5af;
$ods-green-300:   #50be87;
$ods-green-400:   #27a971;
$ods-green-500:   #198c51;
$ods-green-600:   #0a6e31;

// Pink
$ods-pink-100:    #ffe8f7;
$ods-pink-200:    #ffceef;
$ods-pink-300:    #ffb4e6;
$ods-pink-400:    #ff8ad4;
$ods-pink-500:    #d573bb;
$ods-pink-600:    #bc4d9a;

// Purple
$ods-purple-100:  #d9c2f0;
$ods-purple-200:  #c1a4e4;
$ods-purple-300:  #a885d8;
$ods-purple-400:  #9373bd;
$ods-purple-500:  #6e4aa7;
$ods-purple-600:  #492191;

// Yellow
$ods-yellow-100:  #fff6b6;
$ods-yellow-200:  #ffe45b;
$ods-yellow-300:  #ffd200;
$ods-yellow-400:  #ffb400;
$ods-yellow-500:  #b98f11;
$ods-yellow-600:  #9d6e06;

A second layer of Sass variables defines our functional and supporting colors using the Sass color palette.

scss/_variables.scss

//// 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;

Because Boosted relies on Bootstrap’s specific tokens system, we need to map the Boosted’s color tokens to the Bootstrap’s ones.

scss/_variables.scss

$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;

scss/_variables.scss

$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;

Sass maps

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

$colors lists all our available base colors
$theme-colors lists all semantically named light theme colors
$theme-colors-dark lists all semantically named dark theme colors
$utilities-text overrides $theme-colors specifically used to define .text-* utilities
$utilities-bg overrides $theme-colors specifically used to define .bg-* utilities
$utilities-border overrides $theme-colors specifically used to define .border-* utilities
$grays, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, and $cyans list all tints and shades of our colors

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

scss/_variables.scss

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "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.

Generating utilities

Added in v5.1.0

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

To start, make sure you’ve imported our functions, variables, mixins, and utilities.
Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.
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 "boosted/scss/functions";
@import "boosted/scss/variables";
@import "boosted/scss/variables-dark";
@import "boosted/scss/maps";
@import "boosted/scss/mixins";
@import "boosted/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 "boosted/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.