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

Constructor

tinycolorpicker ( options )
  • options Object
    • colors = [] Array optional

      fallback colors for old browsers (ie8-).

    • backgroundUrl = '' String optional

      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.

Properties

_defaults Object private

Default: defaults

_name String private final

Default: 'tinycolorpicker'

colorHex String

The current active color in hex.

Default: ""

colorRGB String

The current active color in rgb.

Default: ""

options Object

The options of the colorpicker extended with the defaults.

Methods

_getColorCanvas ()
_initialize ()
_setEvents ()
_setImage ()
hexToRgb ()

Convert hex to rgb

rgbToHex ()

Convert rgb to hex

setColor ()

Set the color to a given hex or rgb color.

Events

change

The change event will trigger when a new color is set.

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