Minimal Mobile-friendly Color Picker In jQuery - drawrPalette

File Size: 38.7 KB
Views Total: 4302
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


4. Set the color manually.


5. Destroy the color picker.


6. Event handlers.

  // when picking a color
  // when you cancel the selection
  // when a color is picked
  // when the color picker is opened
  // 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.