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

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 ()
close ()

Close the picker
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.
    //
    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");
    });
});