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.

        
            
        <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".

        
            
          <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".

        
            
          <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.

        
            
          <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.

        
            
          <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.

        
            
          <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"

        
            
          <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.

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

Color picker - API


Usage

Via data attributes

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

Via JavaScript

        
            
        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.

        
            
        $('.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.
        
            
          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:

        
            
        import ColorPicker from 'mdb-color-picker';