Tiny jQuery colorPicker

Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...
This 4.4KB small HSB color picker is based on a subset of colors.js from it's big brother colorPicker, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in Demo).

Demo

On all inputs with calssName 'color':
$('input.color').colorPicker();

Switch between plugins: (see index.js for more details...)

Features

Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies and super fast rendering for best performance on desktop and mobile browsers.
This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...
As Tiny jQuery colorPicker uses colors.js from it's big brother colorPicker, it provides a clean and rich color model and API that enables flexible extending for programmers. (See colorPicker on GitHub for more details)

The following snipped shows how easy it is to make plugins: use for mobile

window.myColorPicker = $('input.color').colorPicker({
    buidCallback: function($elm) {
        $elm.prepend('<div class="cp-disp"></div>');
    },
    cssAddon:
        '.cp-disp{padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
        '.cp-xy-slider{width:200px; height:200px;}' +
        '.cp-xy-cursor{width:16px; height:16px; border-width:2px; margin:-8px}' +
        '.cp-z-slider{height:200px; width:40px;}' +
        '.cp-z-cursor{border-width:8px; margin-top:-8px;}' +
        '.cp-alpha{height:40px;}' +
        '.cp-alpha-cursor{border-width: 8px; margin-left:-8px;}',

    renderCallback: function($elm, toggled) {
        var colors = this.color.colors,
            rgb = colors.RND.rgb;

        $('.cp-disp').css({
            backgroundColor: '#' + colors.HEX,
            color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
        }).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
            ', ' + (Math.round(colors.alpha * 100) / 100) + ')');
    }
});

API and usage

Will follow... See tinyColorPicke on GitHub for now.

Fork me on GitHub