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

Basic example

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

Disable state example

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

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.

Swatches Height

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

Default value

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

Dropdown

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

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.

Color picker - API

Usage

Via data attributes

HTML


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

Via JavaScript

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.

jQuery


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

JavaScript


          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:

JavaScript


        import ColorPicker from 'mdb-color-picker';