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.


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.


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


    var $box = $('#box');


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