Best jQuery Color Picker Plugins & Tutorials with Demo

    jQuery Simple Color Picker

    jQuery Simple Color Picker

    Yet another jQuery color picker. This plugin is unobtrusive and integrates well with Twitter Bootstrap (it works just fine without). The source code only requires jQuery and is about 200 lines of JavaScript and 100 lines of CSS.

    Spectrum : The No Hassle jQuery Colorpicker Plugin

    Spectrum : The No Hassle jQuery Colorpicker Plugin

    I wanted a colorpicker that didn’t require images, and that had an API that made sense to me as a developer who has worked with color in a number of applications. I had tried a number of existing plugins, but decided to try and make a smaller, simpler one.

    Fancy Product Designer : jQuery plugin

    Fancy Product Designer : jQuery plugin

    Let me introduce the first Product Designer here on jQueryRain. You can use this plugin for any type of product. Use it as T-Shirt Designer, Business Card Designer, Device Designer….no limits!
    You do not need any vectors files for the plugin, you just set png images for your elements and you tell the plugin which element can be colorized by the user. If its can be colorized, the image will be converted in a HTML5 canvas element.

    Features:

    • Converts png files in HTML5 canvas for colorization
    • Let the user add custom texts to the product
    • Add unlimited motives
    • Colorizable elements by static colors or colorpicker
    • Let the user drag, move, remove or rotate the element
    • Great API to integrate it in any Shop System
    • Add unlimited custom fonts to the font dropdown, you only need the woff file of your font

    mColorPicker : A simple lite jQuery color picker plugin with Html5

    mColorPicker : A simple lite jQuery color picker plugin with Html5

    A simple lite jQuery color picker plugin with a swatch to remember the last 10 colors chosen, that uses html5 markup.

    Colorjoe : jQuery Scaleable color picker

    Colorjoe : jQuery Scaleable color picker

    Unlike many other colorpickers out there, colorjoe is truly scaleable. It is based on CSS and does not depend on external images. As a result, you can tweak its size to fit your purposes. Supports touch and AMD module definition as well.

    colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you’ll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts.

    In addition it’s relatively easy to implement missing functionality (RGB fields, whatnot) thanks to the simple API it provides.

    Websanova : wPaint jQuery Plugin

    Websanova : wPaint jQuery Plugin

    A little jQuery plugin paint app that allows you to draw an image using some basic tools providing ability to load and save the images drawn. This is based on HTML5 canvas and will require a browser with support for canvas to run.

    This is a fantastic jQuery paint plugin from websanova that allows for some basic drawing functionality. It comes with the ability to load and save images and features the websanvoa color picker plugin as well. A great one of a kind plugin.

    jQuery MiniColors : a Color selector for input controls with Demo

    jQuery MiniColors : a Color selector for input controls with Demo

    jQuery MiniColors is a simple, compact color picker that complements a text or a hidden input control.The plugin adds a trigger next to the input which is customizable via CSS.  The included icon is a modified version of the UI color picker icon included in the Fugue icon set.

    When the trigger is clicked or when the input gains focus, the color picker appears.  Users can either type in a hex-color or select one using the control.  The control disappears when the user clicks anywhere outside of the selector or tabs out of the input.  If specified, a callback is fired whenever the color value changes.

    Colorwheel : jQuery Color picker with Demo

    Colorwheel : jQuery Color picker with Demo

    A color picker coded using Raphael and jQuery. The wheel is drawn using the Raphael js library. jQuery is used to assist with events.

    The wheel size is set on creation. It supports a small set of callbacks.

    Farbtastic: jQuery color picker plug-in

    Farbtastic: jQuery color picker plug-in

    This one is a jQuery color picker plugin that can be used to add a color picker into any webpage. The color picker is related to an existing element, for instance a text field, and updates the value of the element when a color is chosen.

    ExColor a jQuery color Picker Plugin

    jQuery color Picker Plugin

    ExColor is a jQuery plugin for enabling users to select colors from a Photoshop-like color picker. It is attached to input fields and can be activated by simply calling a single-line function.