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

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

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

Edit in sandbox 
        
            
          <div class="color-picker" data-mdb-picker="color-picker"></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-picker="color-picker" 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(swatchesHeightCPExample, {
            colorPickerSwatches: colors,
            colorPickerSwatchesHeight: 100,
          });

Default value

To set the default value use the data-mdb-color-picker-value option.

Edit in sandbox 
        
            
          <div class="color-picker" data-mdb-picker="color-picker" 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-picker="color-picker" 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. Other options can be found in the API tab.

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

Color picker - API

Usage

Via data attributes

Edit in sandbox 
        
            
        <div class="color-picker" data-mdb-picker="color-picker"></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, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-color-picker-dropdown="".

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 Number 0 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

Events

Name Description
onOpen.mdb.colorPicker Emitted when Color picker dropdown is open.
onClose.mdb.colorPicker Emitted when Color picker dropdown is close.
onChange.mdb.colorPicker Emitted when the color is changed.
Edit in sandbox 
        
            
          const picker = document.querySelector('.color-picker');
          picker.addEventListener('onChange.mdb.colorPicker', () => {
            // do something;
          });

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
        import ColorPicker from 'mdb-color-picker';