Lightweight & Touch-enabled jQuery Color Picker Plugin - Purty Picker

Purty Picker is a simple and lightweight jQuery plugin to create a responsive and touch friendly HSL, RGB and HEX color picker with color preview.

How to use it:

1. Include jQuery library or Zepto library in your Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the jQuery Purty Picker plugin in the Html page.

<link rel="stylesheet" href="color-picker.css">
<script src="color-picker.js"></script>

3. Create a select list which allows you to switch color formats.

<select class="format">
  <option>Hex</option>
  <option>RGB</option>
  <option selected>HSL</option>
</select>

4. Create a text field to accept the color input.

<input class="color" type="text" value="hsl(206, 59%, 42%)">

5. Create a color spectrum which allow you to pick a color.

<div class="spectrum">
  <div>
    <div class="pin"></div>
  </div>
</div>

6. Create a range slider for the brightness control.

<input class="luminosity" type="range" min="0" max="100" />

7. Wrap them into a container element with CSS class of 'color-picker'. The whole markup should be like this:

<fieldset class="color-picker">
  <select class="format">
    <option>Hex</option>
    <option>RGB</option>
    <option selected>HSL</option>
  </select>
  <input class="color" type="text" value="hsl(206, 59%, 42%)" />
  <div class="spectrum">
    <div>
      <div class="pin"></div>
    </div>
  </div>
  <input class="luminosity" type="range" min="0" max="100" />
</fieldset>

Change log:

2015-02-18

• Fixed a bug noticed by shaminders where scrolling the page would cause the pin to be placed incorrectly when interacting with the spectrum. Pin placement is now more efficient. Minor formatting tweaks.

---

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