Tiny Colorpicker

Download   Demo

Tiny Colorpicker is a crossbrowser jquery plugin that creates a color picker (form) input. Its a easy way to add color pickers to your forms or user interface.

Features

• IOS and Android support.


• AMD, Node, requirejs and commonjs support.


• Easy customizable


• Can be used inside forms or outside


• Lightweight

1. INCLUDE JS FILES

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/jquery.tinycolorpicker.js"></script>

2. HTML

<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. JAVASCRIPT

$(document).ready(function()

	var $box = $('#colorPicker');
	$box.tinycolorpicker();
	var box = $box.data("plugin_tinycolorpicker")

	box.setColor("#ff0000");
);

4. OPTIONS

A list of all the available options and there default value

• colors : [] – fallback colors for old browsers (ie8-).


• backgroundUrl : “” – It will look for a css image on the track div. If not found it will look if there’s a url in this property.

5. METHODS

• hexToRgb – Convert a hex color to rgb color


• rgbToHex – Convert a rgb color to hex


• setColor – Set the color of the picker it takes a rgb or hex color.

6. EVENTS

$(document).ready(function()

 var $box = $('#box');

 $box.tinycolorpicker();

 $box.bind("change", function()
 
 console.log("do something on every change of color");
 );
);

change – This event fires on every color change.

Tiny Colorpicker