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.


  • IOS and Android support.
  • AMD, Node, requirejs and commonjs support.
  • Easy customizable
  • Can be used inside forms or outside
  • Lightweight
  • Source is on GitHub


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 ()
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 whhen a new color is set");