Color Picker

Bootstrap color picker plugin

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 huge 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.
upgrade with discount

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

To start working with Color Picker plugin see "Getting Started" tab on this page.

Basic Example

Click the dark square to activate the Color Picker. This is the basic variation of it.

Click the dark square to activate the Color Picker

Edit in sandbox 
        
            

        <div class="card">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <p>Click the dark square to activate the Color Picker</p>
            <div id="color-picker-1" class="mx-auto"></div>
          </div>
        </div>

      
        
    
        
            

        const pickr1 = new Pickr({
          el: '#color-picker-1',
          default: "303030",
          components: {
            preview: true,
            opacity: true,
            hue: true,

            interaction: {
              hex: true,
              rgba: true,
              hsla: true,
              hsva: true,
              cmyk: true,
              input: true,
              clear: true,
              save: true
            }
          }
        });

Using as button

Use Color Picker as a button.

Click the below button to activate the Color Picker

Edit in sandbox 
        
            

        <div class="card">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <p>Click the below button to activate the Color Picker</p>
            <button class="btn btn-primary btn-sm" id="color-picker-2">Open Picker</button>
          </div>
        </div>

      
        
    
        
            

        const pickr2 = new Pickr({
          el: '#color-picker-2',
          useAsButton: true,
          default: "123456",

          components: {
            preview: true,
            opacity: true,
            hue: true,

            interaction: {
              hex: true,
              rgba: true,
              hsla: true,
              hsva: true,
              cmyk: true,
              input: true,
              clear: true,
              save: true
            }
          }
        });

Change color of the other elements

With Color Picker, it's easy to manipulate colors of the certain elements.

My background color will be changed

My text color will be changed

Edit in sandbox 
        
            

        <div class="card bg-color">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <p>My background color will be changed</p>
            <button id="color-picker-3" class="btn btn-outline-primary btn-sm">Color Picker</button>
          </div>
        </div>

        <div class="card">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <p class="text-color">My text color will be changed</p>
            <button id="color-picker-4" class="btn btn-outline-primary btn-sm">Color Picker</button>
          </div>
        </div>

      
        
    
        
            

        const pickr3 = new Pickr({
          el: '#color-picker-3',
          useAsButton: true,
          default: "303030",
          components: {
            preview: true,
            opacity: true,
            hue: true,

            interaction: {
              hex: true,
              rgba: true,
              hsla: true,
              hsva: true,
              cmyk: true,
              input: true,
              clear: true,
              save: true
            }
          },

          onChange(hsva, instance) {
            $('.bg-color').css('background-color', hsva.toRGBA().toString());
          }
        });

        const pickr4 = new Pickr({
          el: '#color-picker-4',
          default: "303030",
          useAsButton: true,
          components: {
            preview: true,
            opacity: true,
            hue: true,

            interaction: {
              hex: true,
              rgba: true,
              hsla: true,
              hsva: true,
              cmyk: true,
              input: true,
              clear: true,
              save: true
            }
          },

          onChange(hsva, instance) {
            $('.text-color').css('color', hsva.toRGBA().toString());
          }
        });

Copy saved colors to clipboard

Copy the picked color to the clipboard and use it everywhere!

Click the "Save" button and check the results by pasting the clipboard in some place.

Edit in sandbox 
        
            

        <div class="card">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <p>Click the "Save" button and check the results by pasting the clipboard in some place.</p>
            <button id="color-picker-5" class="btn btn-primary btn-sm">Color Picker</button>
          </div>
        </div>

      
        
    
        
            

    let colorArray = [];
    const pickr5 = new Pickr({
      el: '#color-picker-5',
      default: "030303",
      useAsButton: true,
      components: {
        preview: true,
        opacity: true,
        hue: true,

        interaction: {
          hex: true,
          rgba: true,
          hsla: true,
          hsva: true,
          cmyk: true,
          input: true,
          clear: true,
          save: true
        }
      },

      onSave(hsva, instance) {
        colorArray.push({
          hex: hsva.toHEX().toString(),
          rgba: hsva.toRGBA().toString(),
          hsla: hsva.toHSLA().toString(),
          hsva: hsva.toHSVA().toString(),
          cmyk: hsva.toCMYK().toString()
        });
        copyToClipboard();
      }
    });

    function copyToClipboard() {

      const el = document.createElement('textarea');
      colorArray.forEach(function (elem) {
        el.value += '{';
        el.value += 'hex: ' + "'" + elem.hex + "'" + ', ';
        el.value += 'rgba: ' + "'" + elem.rgba + "'" + ', ';
        el.value += 'hsla: ' + "'" + elem.hsla + "'" + ', ';
        el.value += 'hsva: ' + "'" + elem.hsva + "'" + ', ';
        el.value += 'cmyk: ' + "'" + elem.cmyk + "'";
        el.value += '}, ';
      });
      $(el).attr('readonly', '');
      $(el).css('position', 'absolute');
      $(el).css('left', '-9999px');
      $(el).appendTo(document.body);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
    }

The color representation

Color Picker plugin has option to pick a color in five color representations: HEX, RGBA, HSLA, HSVA and CMYK.

Change actual color and check how every color representation is described in the list

Edit in sandbox 
        
            

        <div class="card">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <p>Change actual color and check how every color representation is described in the list</p>
            <button id="color-picker-6" class="btn btn-primary btn-sm">Color Picker</button>
          </div>
        </div>

        <div class="card">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <ul class="list-group list-group-flush w-100">
              <li class="list-group-item" id="hex"></li>
              <li class="list-group-item" id="rgba"></li>
              <li class="list-group-item" id="hsla"></li>
              <li class="list-group-item" id="hsva"></li>
              <li class="list-group-item" id="cmyk"></li>
            </ul>
          </div>
        </div>

      
        
    
        
            

        const pickr6 = new Pickr({
          el: '#color-picker-6',
          useAsButton: true,

          components: {
            preview: true,
            opacity: true,
            hue: true,

            interaction: {
              hex: true,
              rgba: true,
              hsla: true,
              hsva: true,
              cmyk: true,
              input: true,
              clear: true,
              save: true
            }
          },

          onChange(hsva) {
            let colorObject = {
              hex: hsva.toHEX().toString(),
              rgba: hsva.toRGBA().toString(),
              hsla: hsva.toHSLA().toString(),
              hsva: hsva.toHSVA().toString(),
              cmyk: hsva.toCMYK().toString()
            };
            for (let col in colorObject) {
              $('#' + col).text(col + ': ' + colorObject[col]);
            }
          }
        });

Change the site background color

Change the site's background color by choosing a color from Color Picker.

Change the background color if this site dynamically by changing the color in Color Picker

Edit in sandbox 
        
            

        <div class="card">
          <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
            <p>Change the background color if this site dynamically by changing the color in Color Picker</p>
            <button id="color-picker-7" class="btn btn-primary btn-sm">Color Picker</button>
          </div>
        </div>

      
        
    
        
            

        const pickr7 = new Pickr({
          el: '#color-picker-7',
          useAsButton: true,

          components: {
            preview: true,
            opacity: true,
            hue: true,

            interaction: {
              hex: true,
              rgba: true,
              hsla: true,
              hsva: true,
              cmyk: true,
              input: true,
              clear: true,
              save: true
            }
          },

          onChange(hsva) {
            $(document.body).css('background-color', hsva.toHEX().toString());
          }
        });

Color Picker options list

Below options are available to use in Color Picker instance.

Name Type Default Description Example
el string ' ' Selector or element which will be replaced with the actual color-picker. el: '#color-picker'
useAsButton boolean false Using the 'el' Element as button, won't replace it with the pickr-button. If true, appendToBody will also be automatically true. useAsButton: true
disabled boolean false Start state. If true 'disabled' will be added to the button's classlist. disabled: false
comparison boolean true If set to false it would directly apply the selected color on the button and preview. comparison: true
default string ' ' Default color. default: '#303030'
defaultRepresentation string ' ' Default color representation. Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`. defaultRepresentation: 'HEX'
parent any null Defines a parent for pickr, if useAsButton is true and a parent is NOT defined 'body' will be used as fallback. parent: null
closeWithKey string 'Escape' Close pickr with this specific key. Can be the event key or code. closeWithKey: 'Escape'
position string 'middle' Defines the position of the color-picker. Available options are top, left and middle relativ to the picker button. If clipping occurs, the color picker will automatically choose his position. position: 'middle'
adjustableNumbers boolean true Enables the ability to change numbers in an input field with the scroll-wheel. To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five position: 'middle'
components Object<boolean> - Show or hide specific components. By default only the palette (and the save button) is visible. Available options are `preview`, `opacity`, `hue`, `interaction: {`hex`, `rgba`, `hsla`, `hsva`, `cmyk`, `input`, `clear`, `save` }` components: {preview: true, interaction: {hex: true, rgba: true}}
strings Object<string> strings: {save: 'Save', clear: 'Clear'} Button strings, brings the possibility to use a language other than English. position: 'middle'

Below events are available to use in Color Picker instance.

Name Type Description Example
onChange any The event is fired when user has changed the color. onChange(hsva, instance) { }
onSave any The event is fired when user has saved the color. onSave(hsva, instance) { }

As default color representation is hsva (hue, saturation, value and alpha) used, but you can also convert it to other formats as listed below.

Name Description Example
toHSVA Converts the object to a hsva array. hsva.toHSVA()
toHSLA Converts the object to a hsla array. hsva.toHSLA()
toRGBA Converts the object to a rgba array. hsva.toRGBA()
toHEX Converts the object to a hex array. hsva.toHEX()
toCMYK Converts the object to a cmyk array. hsva.toCMYK()
clone Clones the color object. hsva.clone()

Below methods are available to use with Color Picker instance.

Name Description Example
setHSVA Set an color, returns true if the color has been accepted. pickr.setHSVA(h:Number, s:Number, v:Number, a:Float, silent:Boolean)
setColor Parses a string which represents a color (e.g. #fff, rgb(10, 156, 23)), returns true if the color has been accepted. null will clear the color. If silent is true (Default is false), the button won't change the current color. pickr.setColor(string: String, silent: Boolean)
show Shows the color-picker, returns instance. pickr.show()
hide Hides the color-picker, returns instance. pickr.hide()
disable Disables pickr and adds the disabled class to the button, returns instance. pickr.disable()
enable Enables pickr and removes the disabled class from the button, returns instance. pickr.enable()
isOpen Returns true if the color picker is currently open. pickr.isOpen()
getRoot Returns the root DOM-Element of the color-picker. pickr.getRoot()
getColor Returns the current HSVaColor object. pickr.getColor()
destroy Destroy's all functionality. pickr.destroy()
destroyAndRemove Destroy's all functionality, moreover it removes the pickr element including the button. pickr.destroyAndRemove()
setColorRepresentation Change the current color-representation. Valid options are HEX, RGBA, HSVA, HSLA and CMYK, returns false if type was invalid. pickr.setColorRepresentation(type: string)

Color Picker - getting started : download & setup

Download

This plugin requires a purchase.

Buy color picker plugin

Installation tutorial

Note: The video below shows a different plugin, but it does not matter. The installation process is the same for all plugins.

    <li class="nav-item"><a class="nav-link active" href="#a-introduction">Introduction</a></li> <li class="nav-item"><a class="nav-link" href="#a-download">Download</a></li> <li class="nav-item"><a class="nav-link" href="#a-mdb-pro">Tutorial</a></li>