Get new jQuery plugins just once a week


Tiny Colorpicker

FavoriteLoadingAdd to favorites

June 24, 2015

Tiny Colorpicker | A lightweight cross browser color picker.

Tiny Colorpicker is a jQuery plugin to implement a lightweight cross browser color picker.

It has got the following features:-

Example Code:-

// Initialize a colorpicker like this.

// Try this to get access to the actual colorpicker instance.
var box = $('#box').data("plugin_tinycolorpicker");

// Now you have access to all the methods and properties.
// box.setColor("#cccccc");
// console.log(box.colorRGB);
// etc..

// You can bind to the change event like this.
$box.bind("change", function()
console.log("do something whhen a new color is set");

Created by Maarten Baijs


Tiny Colorpicker plugin


tinycolorpicker Build Status Coverage Status NPM version



What you need to build your own version of tinycolorpicker

In order to build tinycolorpicker, you need to have Node.js/npm, and git 1.7 or later installed.

How to build your own tinycolorpicker

First, clone a copy of the main tinycolorpicker git repo by running:

git clone git://

Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install:

npm install -g grunt-cli

Enter the tinycolorpicker directory and install the Node dependencies, this time without specifying a global install:

cd tinycolorpicker && npm install

Make sure you have grunt installed by testing:

grunt -version

Then, to get a complete, minified (w/ Uglify.js), linted (w/ JSHint) version of tinycolorpicker, type the following:


The built version of tinycolorpicker will be put in the dist/ subdirectory, along with the minified copy and associated map file.


If you have any questions, please feel free to email me.

Tiny Colorpicker

Related posts:


To install using Bower
bower install tinycolorpicker

Tiny Colorpicker plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever