Color picker on an input

      var picker = vanillaColorPicker(document.querySelector('input.just-picker'));

Color picker on any element

      var picker = vanillaColorPicker(document.querySelector('div.just-picker'));

      picker.on('colorChosen', function(color, targetElem) {
        targetElem.style.backgroundColor = color;
      });
Click me

Setting a custom color set

      var picker = vanillaColorPicker(document.querySelector('div.just-picker2'));
      picker.set('customColors', ['red', '#0f0', 'rgb(255,255,0)']);
Click me

Appearance customisation with CSS

      var picker = vanillaColorPicker(document.querySelector('div.just-picker3')
      picker.set('className', 'my-picker');

      CSS:
      .my-picker {
        background-color: #333;
      }
Click me

Events

      var picker = vanillaColorPicker(document.querySelector('input.just-picker4'));
      picker.on('pickerCreated', function(color) {
        picker.elem.value = 'Choose your color';
      });
      picker.on('lostFocus', function() {
        if (!picker.elem.dataset.vanillaPickerColor) {
          picker.elem.value = 'No color';
        }
      });

Default color

      var picker = vanillaColorPicker(document.querySelector('input.just-picker5'));
      picker.set('customColors', ['#f00','#f22','#f44','#f88','#faa','#fcc','#fee');
      picker.set('defaultColor', '#f44');