Materialize Colorpicker 1.0 for MaterializeCSS

Colorpicker plugin for MaterializeCSS toolkit. Originally written by @eyecon, forked from @mjolnic and maintened by felipegruoso.

It basically adds a color picker to a field or any other element.

Can be used as a component;
Has alpha picker;
Supports multiple formats: HEX, RGB, RGBA, HSL, HSLA.
Fork Original Source Fork me on Github Download

Examples

Attached to a field with hex format specified via options:

                    
<input type="text" id="demo1" value="#5367ce" />
                    
                  
                    
<script>
  $(function() {
    $('.demo1').colorpicker();
  });
</script>

As a component:

                    
<div id="demo-component" class="file-field">
  <div class="btn"></div>
  <div class="file-path-wrapper">
    <input type="text" />
  </div>
</div>
                    
                  
                    
<script>
  $(function() {
    $('#demo-component').colorpicker({
      component: '.btn'
    });
  });
</script>

Using events to work with the color: 

                    
<input type="text" class="demo1" value="#5367ce" />
                    
                  
                    
<script>
  $(function() {
    $('#demo2').colorpicker({
      // Alpha is not supported for some html elements.
      format: 'rgb'
      // Gets the actual background color
      color: $('#demo2').css('background-color')
    }).on('changeColor', function(ev) {
      // Sets the new color while it is changing.
      $(this).css('background-color',ev.color.toHex());
    });
  });
</script>

Transparent color support:

                    
<input type="text" id="demo3" />
                    
                  
                    
<script>
  $(function() {
    $('#demo3').colorpicker({
      format: 'hex',
      color: 'transparent'
    });
  });
</script>

Horizontal mode:

                    
<input type="text" id="demo4" value="#8fff00" />
                    
                  
                    
<script>
  $(function() {
    $('#demo4').colorpicker({
      horizontal: true
    });
  });
</script>

Inline mode:

                    
<!-- HTML parameters-->
<div id="demo5-1" class="inl-bl" data-container="#demo5-1" data-color="rgba(238,110,115,1)" data-inline="true"></div>
<div id="demo5-2" class="inl-bl" data-container="true" data-color="rgba(38,166,154,1)" data-inline="true"></div>

<!-- Javascript parameters -->
<div id="demo5-3" class="inl-bl"></div>
                    
                  
                    
<script>
  $(function() {
    $('#demo5-1').colorpicker();
    $('#demo5-2').colorpicker();
    $('#demo5-3').colorpicker({
      container: true,
      color: "rgba(100, 181, 246)",
      inline: true
    });
  });
</script>

Materialize colors:

                    
<input type="text" id="demo6" />
                    
                  
                    
<script>
  $(function() {
    $('#demo6').colorpicker({
      colorSelectors: {
        'red': '#f44336',
        'pink': '#e91e63',
        'purple': '#9c27b0',
        'deep-purple': '#673ab7',
        'indigo': '#3f51b5',
        'blue': '#2196f3',
        'light-blue': '#03a9f4',
        'cyan': '#00bcd4',
        'teal': '#009688',
        'green': '#4caf50',
        'light-green': '#8bc34a',
        'lime': '#cddc39',
        'yellow': '#ffeb3b',
        'amber': '#ffc107',
        'orange': '#ff9800',
        'deep-orange': '#ff5722',
        'brown': '#795548',
        'grey': '#9e9e9e',
        'blue-grey': '#607d8b',
        'black': '#000000',
        'white': '#ffffff'
      },
      format: 'hex',
      color:  'green'
    });
  });
</script>

Custom size:

                    
<input type="text" id="demo7" />
                    
                  
                    
<script>
  $(function() {
    $('#demo7').colorpicker({
      color: '#ffaa00',
      customClass: 'colorpicker-2x',
      sliders: {
        saturation: {
          maxLeft: 200,
          maxTop: 200
        },
        hue: {
          maxTop: 200
        },
        alpha: {
          maxTop: 200
        }
      }
    });
  });
</script>
                    
                  
                    
<style>
  .colorpicker-2x .colorpicker-saturation {
    width: 200px;
    height: 200px;
  }
  .colorpicker-2x .colorpicker-hue,
  .colorpicker-2x .colorpicker-alpha {
    width: 30px;
    height: 200px;
  }
  .colorpicker-2x .colorpicker-color,
  .colorpicker-2x .colorpicker-color div{
    height: 30px;
  }
</style>

Enabled / Disabled:

                    
<input type="text" id="demo8" />

<a id="demo-enable" class="waves-effect waves-light btn"><i class="material-icons left">done</i>enable</a>
<a id="demo-disable" class="waves-effect waves-light btn red"><i class="material-icons left">clear</i>disable</a>
                    
                  
                    
<script>
  $(function() {
    $('#demo8').colorpicker();

    // Handles the demo 8 disable button.
    $("#demo-disable").click(function(e) {
      e.preventDefault();
      $("#demo8").colorpicker('disable');
    });

    // Handles the demo 8 enable button.
    $("#demo-enable").click(function(e) {
      e.preventDefault();
      $("#demo8").colorpicker('enable');
    });
  });
</script>

Materialize modal:

open modal 
                    
<a href="#modal1" class="waves-effect waves-light btn modal-trigger">open modal</a>

<!-- Modal -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Colospicker inside modal</h4>
    <input type="text" id="demo9-1">
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>
                    
                  
                    
<script>
  $(function() {
    $('#demo9-1').colorpicker();
  });
</script>

Documentation

Call the colopicker via javascript:

                

<script>
  $(function(){
    $('.sample-selector').colorpicker({ /*options...*/ });
  });
</script>
Options

You can set colorpicker options either as a plugin parameter or data-* attributes

Name Type Default Description
format string false If not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected.
color string false If not false, sets the color to this value.
container string or jQuery Element false If not false, the picker will be contained inside this element, otherwise it will be appended to the document body.
component string or jQuery Element '.add-on, .input-group-addon' Children selector for the component or element that trigger the colorpicker and which background color will change (needs an inner <i> element).
input string or jQuery Element 'input' Children selector for the input that will store the picker selected value.
horizontal boolean false If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
inline boolean false If true, forces to show the colorpicker as an inline element.
sliders object [...] Vertical sliders configuration (read source code if you really need to tweak this).
slidersHorz object [...] Horizontal sliders configuration (read source code if you really need to tweak this).
template string [...] Customizes the default colorpicker HTML template.
align string 'right' By default, the colorpicker is aligned to the right of the input. If you need to switch it to the left, set align to 'left'.
customClass string null Adds this class to the colorpicker widget.
colorSelectors object null List of pre selected colors (hex format). If you choose one of these colors, the alias is returned instead of the hex code.
jQuery API Methods

General usage methods

Method Description
.colorpicker(options)

Initializes an colorpicker.
.colorpicker('getValue', defaultValue)

Gets the value from the input or the data attribute (if has no input), otherwise returns the default value, which defaults to #000000 if not specified.
.colorpicker('setValue', value)

Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.
.colorpicker('show')

Show the color picker.
.colorpicker('hide')

Hide the color picker.
.colorpicker('reposition')

Updates the color picker's position relative to the element.
.colorpicker('update')

Refreshes the widget colors (this is done automatically).
.colorpicker('enable')

Enable the color picker.
.colorpicker('disable')

Disable the color picker.
.colorpicker('destroy')

Destroys the colorpicker widget and unbind all .colorpicker events from the element and component.
.data('colorpicker')

Access to the colorpicker API directly.
.data('colorpicker').color

Access to the colorpicker Color object information.
Color object methods

Each triggered events have a color object (avaliable through event.color, see the example at the bottom) used internally by the picker. This object has several useful methods. These are the more commonly used:

Method Description
.setColor(value)

Set a new color. The value is parsed and tries to do a quess on the format.
.setHue(value)

Set the HUE with a value between 0 and 1.
.setSaturation(value)

Set the saturation with a value between 0 and 1.
.setBrightness(value)

Set the brightness with a value between 0 and 1.
.setAlpha(value)

Set the transparency with a value between 0 and 1.
.toRGB()

Returns a hash with red, green, blue and alpha.
.toHex()

Returns a string with HEX format for the current color.
.toHSL()

Returns a hash with HSLA values.
Events
Event Description
create This event fires immediately when the color picker is created.
showPicker This event fires immediately when the color picker is displayed.
hidePicker This event is fired immediately when the color picker is hidden.
changeColor This event is fired when the color is changed.
disable This event is fired immediately when the color picker is disabled, except if it was initialized as disabled.
enable This event is fired immediately when the color picker is enabled, except upon initialization.
destroy This event fires immediately when the color picker is destroyed. 
                

<script>
  $(function(){
    $('.my-colorpicker').colorpicker().on('changeColor.colorpicker', function(event){
      bodyStyle.backgroundColor = event.color.toHex();
    });
  });
</script>