Colors

Vue Bootstrap 5 Colors

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

Theme

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 Bootstrap’s scss/free/_variables.scss file.

Primary (#1266F1)
Secondary (#B23CFD)
Success (#00B74A)
Danger (#F93154)
Warning (#FFA900)
Info (#39C0ED)
Light (#FBFBFB)
Dark (#262626)

All these colors are available as a Sass map, $theme-colors in scss/free/_variables.scss file. 

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

Note: Theme colors are also available as CSS classes. You can use them directly in your project without compiling scss code. Have a look at the examples below.

Background

Easily set the background by using .bg-* color classes

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
        
            
              <template>
                <div class="bg-primary"></div>
                <div class="bg-secondary"></div>
                <div class="bg-success"></div>
                <div class="bg-danger"></div>
                <div class="bg-warning"></div>
                <div class="bg-info"></div>
                <div class="bg-light"></div>
                <div class="bg-dark"></div>
              </template>

Background gradient

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Do you need a gradient in your custom CSS? Just add background-image: var(--mdb-gradient);.

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
        
            
        <template>
          <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
          <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
          <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
          <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
          <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
          <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
          <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
          <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
        </template>

Text

Colorize text with color utilities.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

        
            
              <template>
                <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 bg-dark">.text-info</p>
                <p class="text-light bg-dark">.text-light</p>
                <p class="text-dark">.text-dark</p>
                <p class="text-body">.text-body</p>
                <p class="text-muted">.text-muted</p>
                <p class="text-white bg-dark">.text-white</p>
                <p class="text-black-50">.text-black-50</p>
                <p class="text-white-50 bg-dark">.text-white-50</p>
              </template>

Depracation: With the addition of .text-opacity-* utilities and CSS variables for text utilities, .text-black-50 and .text-white-50 are deprecated as of Bootstrap v5.1.0. They’ll be removed in v6.0.0.

Components

We also use theme colors as predefined colors for some components, for example, buttons. 

        
            
              <template>
                <MDBBtn color="primary">Primary</MDBBtn>
                <MDBBtn color="secondary">Secondary</MDBBtn>
                <MDBBtn color="success">Success</MDBBtn>
                <MDBBtn color="danger">Danger</MDBBtn>
                <MDBBtn color="warning">Warning</MDBBtn>
                <MDBBtn color="info">Info</MDBBtn>
                <MDBBtn color="light">Light</MDBBtn>
                <MDBBtn color="dark">Dark</MDBBtn>
              </template>
            
        
    
        
            
              <script>
                import { MDBBtn } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBBtn,
                  },
                };
              </script>

Opacity

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 works

Consider our default .text-primary utility. 

        
            
        .text-primary {
          --mdb-text-opacity: 1;
          color: rgba(var(--mdb-primary-rgb), var(--mdb-text-opacity)) !important;
        }

We use an RGB version of our --mdb-primary (with the value of 13, 110, 253) CSS variable and attached a second CSS variable, --mdb-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(13, 110, 253, 1). 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.

Example

To change that opacity, override --mdb-text-opacity via custom styles or inline styles.

This is default primary text
This is 50% opacity primary text
        
            
            <div class="text-primary">This is default primary text</div>
            <div class="text-primary" style="--mdb-text-opacity: .5;">This is 50% opacity primary text</div>

Or, choose from any of the .text-opacity utilities:

This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
        
            
            <template>
              <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>
            </template>

Background

To change that opacity, override --mdb-bg-opacity via custom styles or inline styles.

This is default success background
This is 50% opacity success background
        
            
            <tempalte>
              <div class="text-primary">This is default primary text</div>
              <div class="bg-success p-2 text-white">This is default success background</div>
              <div class="bg-success p-2" style="--mdb-bg-opacity: 0.5;">This is 50% opacity success background</div>
            </tempalte>

Or, choose from any of the .bg-opacity utilities:

This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
        
            
          <template>
            <div class="bg-success p-2 text-white">This is default success background</div>
            <div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
            <div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
            <div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
            <div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
          </template>

Full palette

All MDB colors are available as Sass variables and a Sass map in scss/free/_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.

Red 50 #FFEBEE

100 #FFCDD2

200 #EF9A9A

300 #E57373

400 #EF5350

500 #F44336

600 #E53935

700 #D32F2F

800 #C62828

900 #B71C1C

A100 #FF8A80

A200 #FF5252

A400 #FF1744

A700 #D50000

Pink 50 #FCE4EC

100 #F8BBD0

200 #F48FB1

300 #F06292

400 #EC407A

500 #E91E63

600 #D81B60

700 #C2185B

800 #AD1457

900 #880E4F

A100 #FF80AB

A200 #FF4081

A400 #F50057

A700 #C51162

Purple 50 #F3E5F5

100 #E1BEE7

200 #CE93D8

300 #BA68C8

400 #AB47BC

500 #9C27B0

600 #8E24AA

700 #7B1FA2

800 #6A1B9A

900 #4A148C

A100 #EA80FC

A200 #E040FB

A400 #D500F9

A700 #AA00FF

Deep Purple 50 #EDE7F6

100 #D1C4E9

200 #B39DDB

300 #9575CD

400 #7E57C2

500 #673AB7

600 #5E35B1

700 #512DA8

800 #4527A0

900 #311B92

A100 #B388FF

A200 #7C4DFF

A400 #651FFF

A700 #6200EA

Indigo 50 #E8EAF6

100 #C5CAE9

200 #9FA8DA

300 #7986CB

400 #5C6BC0

500 #3F51B5

600 #3949AB

700 #303F9F

800 #283593

900 #1A237E

A100 #8C9EFF

A200 #536DFE

A400 #3D5AFE

A700 #304FFE

Blue 50 #E3F2FD

100 #BBDEFB

200 #90CAF9

300 #64B5F6

400 #42A5F5

500 #2196F3

600 #1E88E5

700 #1976D2

800 #1565C0

900 #0D47A1

A100 #82B1FF

A200 #448AFF

A400 #2979FF

A700 #2962FF

Light Blue 50 #E1F5FE

100 #B3E5FC

200 #81D4FA

300 #4FC3F7

400 #29B6F6

500 #03A9F4

600 #039BE5

700 #0288D1

800 #0277BD

900 #01579B

A100 #80D8FF

A200 #40C4FF

A400 #00B0FF

A700 #0091EA

Cyan 50 #E0F7FA

100 #B2EBF2

200 #80DEEA

300 #4DD0E1

400 #26C6DA

500 #00BCD4

600 #00ACC1

700 #0097A7

800 #00838F

900 #006064

A100 #84FFFF

A200 #18FFFF

A400 #00E5FF

A700 #00B8D4

Teal 50 #E0F2F1

100 #B2DFDB

200 #80CBC4

300 #4DB6AC

400 #26A69A

500 #26A69A

600 #00897B

700 #00796B

800 #00695C

900 #004D40

A100 #A7FFEB

A200 #64FFDA

A400 #1DE9B6

A700 #00BFA5

Green 50 #E8F5E9

100 #C8E6C9

200 #A5D6A7

300 #81C784

400 #66BB6A

500 #4CAF50

600 #43A047

700 #388E3C

800 #2E7D32

900 #1B5E20

A100 #B9F6CA

A200 #69F0AE

A400 #00E676

A700 #00C853

Light Green 50 #F1F8E9

100 #DCEDC8

200 #C5E1A5

300 #AED581

400 #9CCC65

500 #8BC34A

600 #7CB342

700 #689F38

800 #558B2F

900 #33691E

A100 #CCFF90

A200 #B2FF59

A400 #76FF03

A700 #64DD17

Lime 50 #F9FBE7

100 #F0F4C3

200 #E6EE9C

300 #DCE775

400 #D4E157

500 #CDDC39

600 #C0CA33

700 #AFB42B

800 #9E9D24

900 #827717

A100 #F4FF81

A200 #EEFF41

A400 #C6FF00

A700 #AEEA00

Yellow 50 #FFFDE7

100 #FFF9C4

200 #FFF59D

300 #FFF176

400 #FFEE58

500 #FFEB3B

600 #FDD835

700 #FBC02D

800 #F9A825

900 #F57F17

A100 #FFFF8D

A200 #FFFF00

A400 #FFEA00

A700 #FFD600

Amber 50 #FFF8E1

100 #FFECB3

200 #FFE082

300 #FFD54F

400 #FFCA28

500 #FFC107

600 #FFB300

700 #FFA000

800 #FF8F00

900 #FF6F00

A100 #FFE57F

A200 #FFD740

A400 #FFC400

A700 #FFAB00

Orange 50 #FFF3E0

100 #FFE0B2

200 #FFCC80

300 #FFB74D

400 #FFA726

500 #FF9800

600 #FB8C00

700 #F57C00

800 #EF6C00

900 #E65100

A100 #FFD180

A200 #FFAB40

A400 #FF9100

A700 #FF6D00

Deep Orange 50 #FBE9E7

100 #FFCCBC

200 #FFAB91

300 #FF8A65

400 #FF7043

500 #FF5722

600 #F4511E

700 #E64A19

800 #D84315

900 #BF360C

A100 #FF9E80

A200 #FF6E40

A400 #FF3D00

A700 #DD2C00

Brown 50 #EFEBE9

100 #D7CCC8

200 #BCAAA4

300 #A1887F

400 #8D6E63

500 #795548

600 #6D4C41

700 #5D4037

800 #4E342E

900 #3E2723

Gray 50 #FAFAFA

100 #F5F5F5

200 #EEEEEE

300 #E0E0E0

400 #BDBDBD

500 #9E9E9E

600 #757575

700 #616161

800 #424242

900 #212121

Blue Gray 50 #ECEFF1

100 #CFD8DC

200 #B0BEC5

300 #90A4AE

400 #78909C

500 #607D8B

600 #546E7A

700 #455A64

800 #37474F

900 #263238

Black #000000

White #FFFFFF

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.

  • 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 "bootstrap/scss/functions";
        @import "bootstrap/scss/variables";
        @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.