HEX/RGB Image Color Picker Plugin - tinycolorpicker.js

A tiny, customizable, and mobile-friendly color picker plugin that allows you to pick the pixel color values in the image you provide. 

This color picker currently supports two color models (RGB and HEX) and works perfectly with jQuery and Vanilla JavaScript. It is ideal when you want users to be able to choose color from images they have already added to the page.

See Also:

• 10 Best Color Picker Plugins In JavaScript

How to sue it:

1. Download the plugin and import the main JavaScript into the document.

<!-- jQuery Version -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tinycolorpicker.min.js"></script>

<!-- Vanilla JavaScript -->
<script src="/path/to/tinycolorpicker.min.js"></script>

2. Build the HTML for the image color picker.

<div id="colorPicker">
  <a class="color"><div class="colorInner"></div></a>
  <div class="track"></div>
  <ul class="dropdown"><li></li></ul>
  <input type="hidden" class="colorInput"/>
</div>

3. The example CSS to style the image color picker. Don't forget to replace the image in the .track class.

#colorPicker
{
  width:          30px;
  height:         30px;
  position: relative;
  clear: both;
  margin: 80px auto 20px;
}

#colorPicker .track {
  background:     #EFEFEF url(example.png) no-repeat 50% 50%;
  height:         150px;
  width:          150px;
  padding:        10px;
  position:       absolute;
  cursor:         crosshair;
  float:          left;
  left:           -71px;
  top:            -71px;
  display:        none;
  border:         1px solid #ccc;
  z-index:        10;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  border-radius: 150px;
}

#colorPicker .color {
  width:          25px;
  height:         25px;
  padding:        1px;
  border:         1px solid #ccc;
  display:        block;
  position:       relative;
  z-index:        11;
  background-color: #EFEFEF;
  -webkit-border-radius: 27px;
  -moz-border-radius: 27px;
  border-radius: 27px;
  cursor: pointer;
}

#colorPicker .colorInner {
  width:          25px;
  height:         25px;
  -webkit-border-radius: 27px;
  -moz-border-radius: 27px;
  border-radius: 27px;
}

#colorPicker .dropdown {
  list-style: none;
  display: none;
  width: 27px;
  position: absolute;
  top: 28px;
  border: 1px solid #ccc;
  left: 0;
  z-index: 1000;
}

#colorPicker .dropdown li{
  height: 25px;
  cursor: pointer;
}

4. Call the function tinycolorpicker on the top container and the plugin will do the rest.

// jQuery Version
$(document).ready(function(){
  var $box = $('#colorPicker');
  $box.tinycolorpicker();
});

// The plain javascript api is very similar to the jquery version with some exceptions.
// There is no chaining like in the jquery api. 
// So when you create a instance it will return all methods and properties.
var $picker = document.getElementById("colorPicker"),   
picker  = tinycolorpicker($picker);

5. You're also allowed to specify the path to the image using the backgroundUrl option.

var $box = $('#colorPicker',{
    backgroundUrl: '/path/to/image',
});

6. Define an array of fallback colors. Only required on legacy browsers.

var $box = $('#colorPicker',{
     colors : ["#ffffff", "#A7194B","#FE2712"],
});

7. API method.

// set color
picker.setColor("#FF0000");

// convert HEX to RGB
picker.hexToRgb();

// convert RGB to HEX
picker.rgbToHex();

// close the color picker
picker.close();

8. Trigger a function everytime a color is selected.

var box = $box.data("plugin_tinycolorpicker");
$box.on("change", function(){
  console.log(box.colorRGB);
  console.log(box.colorHEX);
});

---

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