Tiny Colorpicker

What is it?

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
• Source is on GitHub

Examples

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("#FG45CC");
});
                    

The generated API docs will be included here.

Usage

$(document).ready(function()
{
    // Initialize a colorpicker like this.
    //
    $('#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 whhen a new color is set");
    });
});