Colors code

Bootstrap 5 Colors Code

Bootstrap colors code is a sensational palette of 300 delightful colors, which will aid you in creating inviting, consistent design.

Color themes

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

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,
            "black":      $black,
          );
        
        
    

Background colors

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

        
            

            <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-body-tertiary"></div>
            <div class="bg-dark"></div>
            <div class="bg-white"></div>
            <div class="bg-transparent"></div>

            
        
    

Color picker

The Advanced Color Picker can be placed anywhere on the page. You can initialize it using data-mdb-color-picker-init.

        
            
          <div class="color-picker" data-mdb-color-picker-init></div>
          
        
    

Colors palette

The most common way to specify colors in CSS is to use HEX values. HEX values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers prefixed with a # symbol.

HSL stands for hue, saturation, and lightness. It’s based on the RGB color wheel. Each color has an angle and a percentage value for the saturation and lightness values.

Related resources