Color picker

Angular Bootstrap 5 Color picker plugin

Color Picker plugin allows you to select different colors. You can successfully use it in various product wizards, clothing sales, or other situations where you need to be able to choose a color.

Note: Read the API tab to find all available options and advanced customization

Native color picker

If you need the simplest form - use a native color picker.

        
            
        <label for="exampleColorInput" class="form-label">Color picker</label>
        <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Advanced color picker - basic example

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

        
            
          <mdb-color-picker></mdb-color-picker>

Disable state example

To add a Color picker as read-only use [disabled]="true" input. 

        
            
          <mdb-color-picker [disabled]="true"></mdb-color-picker>

Swatches

You can add ready-made samples for the user. Use the colorSwatches input and pass an array of colors as a parameter. 

        
            
          <mdb-color-picker [colorSwatches]="colorSwatches"></mdb-color-picker>
        
        
    
        
            
        import { Component } from '@angular/core';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          colorSwatches = [
            '#0d6efd',
            '#6610f2',
            '#6f42c1 ',
            '#b23cfd',
            '#d63384',
            '#dc3545',
            '#fd7e14',
            '#ffc107',
            '#198754',
            '#20c997',
            '#0dcaf0',
            '#39c0ed',
            '#757575',
            '#4f4f4f',
            '#262626',
            '#000',
          ];
        };

Swatches Height

If the defined samples take up a lot of space, you can set their maximum height using the colorSwatchesHeight input. 

        
            
          <mdb-color-picker [colorSwatches]="colorSwatches" [colorSwatchesHeight]="100"></mdb-color-picker>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            colorSwatches = [
              '#0d6efd',
              '#6610f2',
              '#6f42c1 ',
              '#b23cfd',
              '#d63384',
              '#dc3545',
              '#fd7e14',
              '#ffc107',
              '#198754',
              '#20c997',
              '#0dcaf0',
              '#39c0ed',
              '#757575',
              '#4f4f4f',
              '#262626',
              '#000',
            ];
          };

Default value

To set the default value use the defaultColor input. 

        
            
          <mdb-color-picker [defaultColor]="'rgba(15,219,104,1)'"></mdb-color-picker>

Dropdown

You can use color picker as dropdown, just add the component inside a dropdown menu. 

        
            
          <div mdbDropdown class="dropdown">
            <button
              class="btn btn-light dropdown-toggle"
              type="button"
              id="dropdownMenuButton"
              aria-expanded="false"
              mdbDropdownToggle
            >
              Open
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" mdbDropdownMenu>
              <li>
                <mdb-color-picker></mdb-color-picker>
              </li>
            </ul>
          </div>

Disable section

Use [colorPalette]="false" input to disable color palette section. 

        
            
          <mdb-color-picker [colorPalette]="false"></mdb-color-picker>

Color picker - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/color-picker

Import

        
            
          import { MdbColorPickerModule } from 'mdb-angular-color-picker';
          …
          @NgModule ({
            ...
            imports: [MdbColorPickerModule],
            ...
          })
        
        
    
        
            
        @import 'mdb-angular-color-picker/scss/color-picker.scss';

Inputs

Name Type Default Description
colorInputs boolean true Set to false to hide inputs section.
changeFormatBtn boolean true Set to false to hide change format button.
copyIcon boolean true Set to false to hide copy icon.
colorPalette boolean true Set to false to hide color palette section
colorSwatches string[] [] Allows to define colors of the swatches.
colorSwatchesHeight null | number null Changes height of color swatches.
defaultColor string - Allows to set default color displayed on component initialization.
disabled boolean false Disables component
disabledHue boolean false Set to true to disable hue range input
disabledAlpha boolean false Set to true to disable alpha range input

Outputs

Name Type Description
colorChange EventEmitter<string> Emitted on color change. 
        
            
              <mdb-color-picker (colorChange)="onColorChange($event)"></mdb-color-picker>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                onColorChange(color: string): void {
                  console.log(color);
                }
              }