Tiny jQuery colorPicker

Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...
This 4.7KB 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 elements with className 'color':

$('.color').colorPicker();

Switch between plugins: Desktop (no plugin) Mobile Input fields Color memory spaces Skinned (white) Skinned, selective alpha Skinned dev-tools like Skinned dev-tools 3:2 Default without alpha Default but smaller Better IE8- support (see index.html for more details...)

Usage

There is only one file you need to load... No images and no CSS required.

<script type="text/javascript" src="jqColorPicker.min.js">
<script type="text/javascript">
    $('.color').colorPicker(); // that's it
</script>

Features

Tiny jQuery colorPicker only loads into memory if triggered to show and auto repositiones inside view-port if it doesn't fit. It uses battery saving technologies, super fast rendering for best performance on desktop and mobile browsers and renders perfectly smooth on retina and high resolution displays.
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({
    buildCallback: 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 tinyColorPicker on GitHub for now.