Minimal Mobile-friendly Color Picker In jQuery - drawrPalette

drawrPalette is a simple-to-use jQuery plugin that turns a normal text input field into an unobtrusive, touch-enabled HEX color picker component for both desktop and mobile.

How to use it:

1. Load the minified version of the drawrPalette plugin after jQuery (slim build).

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.drawrpalette-min.js" defer></script>

2. Create an input field for the color picker. The plugin will store the selected color code (HEX) as the value of the text field.

<input type="text" id="picker" value="#222222"/>

3. Attach the function to the input field. That's it.

$(function(){
  $("#picker").drawrpalette();
});

4. Set the color manually.

$("#picker").drawrpalette("set","#FF0000");

5. Destroy the color picker.

$("#picker").drawrpalette("destroy");

6. Event handlers.

$("#picker").drawrpalette()
.on("preview.drawrpalette",function(event,hexcolor){
  // when picking a color
}).on("cancel.drawrpalette",function(event,hexcolor){
  // when you cancel the selection
}).on("choose.drawrpalette",function(event,hexcolor){
  // when a color is picked
}).on("open.drawrpalette",function(){
  // when the color picker is opened
}).on("close.drawrpalette",function(){
  // when the color picker is closed
});

---

This awesome jQuery plugin is developed by lieuweprins. For more Advanced Usages, please check the demo page or visit the official website.