What is it?

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

It comes in 2 flavours as a vanilla Javascript microlib and as a jQuery plugin.

Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.

Features

  • IOS, Android and Windows Phone support.
  • Available as a jQuery plugin and as a vanilla Javascript microlib.
  • AMD, Node, requirejs and commonjs support.
  • Easy customizable
  • Can be used inside forms or outside
  • Lightweight
  • Source is on GitHub

Examples

The examples below are all for the jQuery Plugin. You can find some more (advanced and simple) examples here. You can also find a example for the plain javascript library there.

The example below is the most basic version. The colors are just a image that is taken from the css and drawn to a canvas. So you are completely free in how your picker looks and how its styled.

 

$(document).ready(function()
{
    $("#colorpicker1").tinycolorpicker();
});

The example below is to make clear that it can pick colors from any image in any shape or form you want. The image is taken from stylesheet.


$(document).ready(function()
{
    $("#colorpicker2").tinycolorpicker();
});

The example below is to show how to use the setColor method.

 

$(document).ready(function()
{
    $("#colorPicker3").tinycolorpicker();
    var picker = $('#colorPicker3').data("plugin_tinycolorpicker");

    picker.setColor("#FF45CC");
});

The generated API docs will be included here.

Usage


$(document).ready(function()
{
    // Initialize a colorpicker like this.
    //
    var $box = $('#box');
    $box.tinycolorpicker();

    // 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 when a new color is set");
    });
});