Color picker

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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Native color picker

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

Edit in sandbox 
        
            
        <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

Using our color picker allows you to achieve a consistent design, with the picker appearing the same in every browser. You can initialize it using data-mdb-color-picker-init.

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

Disable state example

To add a Color picker as read-only use data-mdb-color-picker-disabled="true".

Edit in sandbox 
        
            
          <div class="color-picker" data-mdb-color-picker-init data-mdb-color-picker-disabled="true"></div>

Swatches

You can add ready-made samples for the user. Use the colorPickerSwatches option and pass an array of colors as a parameter. If you want to add colors in several columns, add them in separate tables.

Edit in sandbox 
        
            
          <div class="color-picker"></div>
        
        
    
        
            
          const picker = document.querySelector('.color-picker');
          const colors = [
            ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
            ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
          ];

          const pickerInstance = new ColorPicker(picker, { colorPickerSwatches: colors });

Swatches Height

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

Edit in sandbox 
        
            
          <div class="color-picker"></div>
        
        
    
        
            
          const picker = document.querySelector('.color-picker');
          const colors = [
            ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
            ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
          ];
          const PickerInstance = new ColorPicker(picker, {
            colorPickerSwatches: colors,
            colorPickerSwatchesHeight: 100,
          });

Default value

To set the default value use the colorPickerValue option.

Edit in sandbox 
        
            
          <div class="color-picker" data-mdb-color-picker-init data-mdb-color-picker-value="rgba(15,219,104,1)"></div>

Dropdown

You can use color picker as dropdown, just add data-mdb-color-picker-dropdown="true"

Edit in sandbox 
        
            
          <div class="color-picker" data-mdb-color-picker-init data-mdb-color-picker-dropdown="true"></div>

Disable section

If you want to use only some picker elements you can disable unnecessary elements. The following example shows the use of the colorPickerColorPalette option to remove the color palette section of the picker. Other options can be found in the API tab.

Edit in sandbox 
        
            
          <div class="color-picker" data-mdb-color-picker-init data-mdb-color-picker-color-palette="false"></div>

Color picker - API

Import

Edit in sandbox 
        
            
          import ColorPicker from 'mdb-color-picker';
        
        
    
        
            
          @import '~mdb-color-picker/css/color-picker.min.css';

Usage

Via data attributes

Using the Color Picker plugin doesn't require any additional JavaScript code - simply add data-mdb-color-picker-init attribute to .color-picker and use other data attributes to set all options.

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

Via JavaScript

Edit in sandbox 
        
            
        const picker = document.querySelector('.color-picker');
        const pickerInstance = new ColorPicker(picker);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
        $(document).ready(() => { 
          $('.color-picker').colorPicker();
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-color-picker-type="".

Name Type Default Description
colorPickerColorInputs Boolean true Set false to hide the input sections
colorPickerChangeFormatBtn Boolean true Set false to hide the change color type icons
colorPickerCopyIcon Boolean true Set false to hide copy code icon
colorPickerColorPalette Boolean true Set false to hide color palette
colorPickerSwatches Array [] Allows you to define the colors of the swatches
colorPickerSwatchesHeight Number 0 Allow you to define swatches max height
colorPickerValue String '' Set default color value
colorPickerDisabled Boolean false Set true to use read-only Color picker
colorPickerDropdown Boolean false Set true to use color picker as dropdown
colorPickerDisabledHue Boolean false Set true to disable the hue range input
colorPickerDisabledAlpha Boolean false Set true to disable the alpha range input
colorPickerType String "hsla" Set default color format. Available options: rgba, hsla, hsva, hex, cmyk.

Events

Name Description
open.mdb.colorPicker This event is emitted when color picker dropdown is open.
close.mdb.colorPicker This event is emitted when color picker dropdown is closed.
colorChanged.mdb.colorPicker This event is emitted after the color is changed. You can access the updated color inside a listener's handler under color property.
Edit in sandbox 
        
            
          const picker = document.querySelector('.color-picker');
          picker.addEventListener('colorChanged.mdb.colorPicker', () => {
            // do something;
          });