Angular Bootstrap Color Picker

Angular Color Picker - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Angular Bootstrap Color Picker is a component which you can use when writing online shops, clothing creators or other functionalities that require the user to provide some color.

Basic example MDB Pro component Live Example

How it works: To function correctly, the Color Picker plugin requires you to use the template refference (#your-id="mdb-color-picker") on the mdb-color-picker element and then assign this identifier to the [mdbColorPickerToggle]="your-id" directive. If you want to use any of the methods built into the plugin (e.g. copying to the clipboard), use this method first by referring to the template ref name, which you set earlier - e.g.(click)="your-id.copyToClipboard('color')".

The basic version of the Color Picker plugin - adapted to use with the MDB Angular Free version. 

        
            
            <button [mdbColorPickerToggle]="picker" mdbBtn color="primary" size="sm" mdbWavesEffect>Show color picker
            </button>
            <mdb-color-picker class="col-xs-12" #picker="mdb-color-picker" [colorPalette]="colorPalette">
              <div class="color-picker-switch">
                <button mdbBtn color="primary" mdbWavesEffect size="sm" (click)="picker.changeColorType()">RGBA / HEX
                </button>
              </div>
              <div class="color-picker-buttons">
                <button mdbBtn color="primary" class="p-2" mdbWavesEffect (click)="picker.copyToClipboard('color')">Copy
                  color
                </button>
                <button mdbBtn color="primary" class="p-2" mdbWavesEffect (click)="picker.clearColor()">Clear</button>
                <button mdbBtn color="primary" class="p-2" mdbWavesEffect (click)="picker.addColorToPalette()">Add color
                </button>
                <button mdbBtn color="primary" class="p-2" mdbWavesEffect (click)="picker.copyToClipboard('palette')">Copy
                  palette
                </button>
              </div>
            </mdb-color-picker>
          
        
    
        
            
            import { Component, ViewChild } from '@angular/core';
            import { MdbColorPickerComponent } from 'mdb-color-picker';
  
            @Component({
              selector: 'app-basic-color-picker',
              templateUrl: './basic-color-picker.component.html',
              styleUrls: ['./basic-color-picker.component.scss']
            })
            export class BasicColorPickerComponent {
              @ViewChild(MdbColorPickerComponent, { static: true }) colorPicker!: MdbColorPickerComponent;
  
              colorPalette: Array<{ rgbaColor: string, hexColor: string }> = [
                {
                  rgbaColor: 'rgba(31,200,17,1)',
                  hexColor: '#1fc811'
                },
                {
                  rgbaColor: 'rgba(224,23,120,0.58)',
                  hexColor: '#e01778'
                },
              ];
            }
          
        
    
        
            
            mdb-color-picker {
              opacity: 0;
              visibility: hidden;
              position: absolute;
              left: 0;
              top: 50px;
              z-index: 1;
            }

Opacity slider from MDB Angular Pro MDB Pro component Live Example

The basic version of the Color Picker plugin - adapted to use with the MDB Angular Pro version. Use [defaultRangeSlider]="false" to change the slider appearance from MDB Free to MDB Pro. 

        
            
            <button [mdbColorPickerToggle]="picker" mdbBtn color="primary" size="sm" mdbWavesEffect>Show color picker
            </button>
            <mdb-color-picker [defaultRangeSlider]="false" class="col-xs-12" #picker="mdb-color-picker"
                              [colorPalette]="colorPalette">
              <div class="color-picker-switch">
                <button mdbBtn color="primary" mdbWavesEffect size="sm" (click)="picker.changeColorType()">RGBA / HEX
                </button>
              </div>
              <div class="color-picker-buttons">
                <button mdbBtn color="flat" class="p-2" mdbWavesEffect (click)="picker.copyToClipboard('color')">Copy
                  color
                </button>
                <button mdbBtn color="flat" class="p-2" mdbWavesEffect (click)="picker.clearColor()">Clear</button>
                <button mdbBtn color="flat" class="p-2" mdbWavesEffect (click)="picker.addColorToPalette()">Add color
                </button>
                <button mdbBtn color="flat" class="p-2" mdbWavesEffect (click)="picker.copyToClipboard('palette')">Copy
                  palette
                </button>
              </div>
            </mdb-color-picker>
          
        
    
        
            
            import { Component, ViewChild } from '@angular/core';
            import { MdbColorPickerComponent } from 'mdb-color-picker';
  
            @Component({
              selector: 'app-pro-color-picker',
              templateUrl: './pro-color-picker.component.html',
              styleUrls: ['./pro-color-picker.component.scss']
            })
            export class ProColorPickerComponent {
              @ViewChild(MdbColorPickerComponent, { static: true }) colorPicker: MdbColorPickerComponent;
  
              colorPalette: Array<{ rgbaColor: string, hexColor: string }> = [
                {
                  rgbaColor: 'rgba(31,200,17,1)',
                  hexColor: '#1fc811'
                },
                {
                  rgbaColor: 'rgba(224,23,120,0.58)',
                  hexColor: '#e01778'
                },
              ];
            }
          
        
    
        
            
            mdb-color-picker {
              opacity: 0;
              visibility: hidden;
              position: absolute;
              left: 0;
              top: 50px;
              z-index: 1;
            }

Installation guide

Step 1: Create new Angular application using Angular CLI command:

ng new application-name --style=scss --routing=false

Step 2: Download this plugin from your user dashboard

Step 3: Extract downloaded archive from Step 2 and copy mdb-color-picker-{version-number}.tgz file to your application root directory

Step 4: Install the mdb-color-picker-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-color-picker-{version-number.tgz} --save

For example, the installation command should look like following: npm install mdb-color-picker-8.0.0.tgz --save

Step 5: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 6: Import the MdbColorPicker in the app.module.ts file

Step 7: Copy the basic example from this site and enjoy your new plugin!

Step 1: Download this plugin from your user dashboard

Step 2: Extract downloaded archive from Step 1 and copy mdb-color-picker-{version-number}.tgz file to your application root directory

Step 3: Install the mdb-color-picker-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-color-picker-{version-number.tgz} --save

For example, the installation command should look like following: npm install mdb-color-picker-8.0.0.tgz --save

Step 4: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 5: Import the MdbColorPicker in the app.module.ts file

Step 6: Copy the basic example from this site and enjoy your new plugin!

Angular Color Picker - API

Download

This plugin requires a purchase.

Buy Color Picker plugin

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { MdbColorPickerModule } from 'mdb-color-picker';
Import example Modules list

Component

MdbColorPickerComponent

Selector: mdb-color-picker

Type: MdbColorPickerComponent

Inputs

Name Type Default Description Example
colorPalette Array<any> [ ] Allow to add default colors to color palette [colorPalette]="colorPalette"
options IColorPickerConfig Allow to override config options of Color Picker [options]="options"
defaultRangeSlider boolean true Determine if color picker should render default Bootstrap range slider or MDB range slider defaultRangeSlider="true"

Service

MdbColorService

Type: MdbColorService

Methods

Name Description Example
getColor The method uset to return color as an object containing two key:value pairs - rgbaColor and hexColor. getColor()
colorWasChanged A method that returns Observable with an object containing two key:value pairs - rgbaColor and hexColor. colorWasChanged().subscribe() => {}
setAlpha The method used to change the value of the alpha channel in rgba colour. As a parameter it takes the value of string type. setAlpha('0.0')
getAlpha The method used to retrieve the alpha channel value of the rgba color. Returns a string value. getAlpha()
alphaWasChanged A method that returns Observable with a alpha channel value which type is string. alphaWasChanged().subscribe() => {}
setCoords The method used to set the color coordinates. The parameter is an object with x and y values of the number type. Calling this method will update the color gradient and text of the color. setCoords({x: 1, y: 100})
getCoords The method used to return coordinates of the currently selected color. The returned value is an object containing two keys of the number type. getCoords()
coordsWasChanged A method that returns an Observable containing an object with two values of the x and y type number. coordsWasChanged().subscribe() => {}
getRgbaColor() A method that returns value of type string with a current color converted to rgba system. getRgbaColor()
getHexColor() A method that returns value of type string with a current color converted to hex system. getHexColor()
rgbaToHex() A method that convert rgba color to hex color and returns the hex value. rgbaToHex('rgba(255, 255, 255, 1.0)')
hexToRgba() A method that convert hex color to rgba color and returns the rgba value. If second parameter is not set, the returned color will be in rgb system. hexToRgba('#ffffff', '0.5')
setColorPalette() The method used to set the default color palette. Takes an array of objects as an argument. setColorPalette([{rgbaColor: '', hexColor: ''}])
addColorToPalette() The method used to add new color to the color palette. Takes an object as an argument. addColorToPalette({rgbaColor: '', hexColor: ''})
getColorPalette() The method used to return the whole color palette. getColorPalette()
removeColorFromPalette() The method used to remove certain color from the color palette. Takes an index number as an argument. removeColorFrom(1)
colorPaletteWasChanged() A method that returns an Observable containing an array of objects with two values of type string - rgbaColor and hexColor. colorPaletteWasChanged().subscribe() => {}

Interfaces

IColorPickerCoords

Used to set coordinates(X, Y) of some color.

Properties

Name Description Type Optional
x Used to set X value of coordinates number false
y Used to set Y value of coordinates number false
IColorPickerConfig

Used to change configuration of Color Picker.

Properties

Name Description Type Optional
showPalette Used to show / hide color palette boolean true
showOpacitySlider Used to show / hide the opacity slider boolean true
showRgbaHexColorText Used to show / hide the RGBA / Hex color text boolean true