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.


  • 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


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.


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.


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

    var picker = $('#colorPicker3').data("plugin_tinycolorpicker");



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.


_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.


_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.



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


    // Initialize a colorpicker like this.
    var $box = $('#box');

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