jquery "eye dropper" color picker plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


dropper: a jQuery plugin

This jQuery plugin uses the HTML5 canvas element to create an "eyedropper"-style color picker for any image.


Internet Explorer Not Supported

Internet Explorer does not support the HTML5 canvas element natively. The popular VML hack for simulating canvas in IE will not work. VML does not give pixel-level access to images. See this thread

Images must be in same domain as the web page

In order to get pixel-level access to the image, the image must be hosted on the same domain as the web page. See the canvas security section of the HTML5 spec

TODO: Test redirect proxy as a possible workaround


Load jquery & the plug-in: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="jquery.dropper.js" type="text/javascript"></script>

Select the image or set of images you'd like to be enabled with a dropper: <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function() { jQuery('img.dropper').dropper(); }); </script>

This will replace all img elements with a 'class' of 'dropper' with a canvas element and dropper-style color picker.


The plugin offers three callback methods that can be passed to the .dropper() method:

  • clickCallback
  • mouseMoveCallback
  • mouseOutCallback

Each callback is called with a single argument, a color object. The color object has has 5 attributes: r, g, b and alpha which are 0-255 integers for the "red", "green", "blue" and "alpha transparency" channel of the image. And "rgbhex" which is the 6 character hexadecimal representation of the color.


<script type="text/javascript" charset="utf-8">
	jQuery(document).ready(function() {
			clickCallback: function(color) {
				alert("You clicked on color: #"+ color.rgbhex);

See the included "demo" folder for a simple, more practical example.

TODO: pass more args back to callbacks; investigate callback naming conventions, event propagation


Scott Trudeau (@sstrudeau) for Apartment Therapy

See Also

Favonius' fork: dropperredux

Demo Image Credits

The demo uses three image from Flickr. Each is licensed as Creative Commons, Attribution-Share Alike 2.0


Dual licensed under the MIT License and the GPL license

Copyright (c) 2010, Scott Trudeau (scott.trudeau@gmail.com)