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

Initialize options

A list of all the available options and there default value

  • colors : [] -- fallback colors for old browsers (ie8-).
  • backgroundUrl : "" -- 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.

Methods

  • hexToRgb -- Convert a hex color to rgb color
  • rgbToHex -- Convert a rgb color to hex
  • setColor -- Set the color of the picker it takes a rgb or hex color.

Events


$(document).ready(function()
{
    var $box = $('#box');

    $box.tinycolorpicker();

    $box.bind("change", function()
    {
        console.log("do something on every change of color");
    });
});
                
  • change -- This event fires on every color change.