commit 2cf7ba8f3d08ed582c3ad1e905b80aa3bcc98f47
Author: peterd <peter@dematte.at>
Date:   Mon Feb 2 14:48:14 2015 +0100

    Initial commit

diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..b58bdfc
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,28 @@
+module.exports = function(grunt) {
+
+	// Project configuration.
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+		uglify: {
+			options: {
+				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
+				sourceMap: true,
+				// sourceMapIncludeSources: true,
+				sourceMapName: 'jqColorPicker.js.map',
+				report: 'gzip'
+			},
+			my_target: {
+				files: [{
+					'jqColorPicker.min.js': ['colors.js', 'jqColorPicker.js']
+				}]
+			}
+		}
+	});
+
+	// Load the plugin that provides the "uglify" task.
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+
+	// Default task(s).
+	grunt.registerTask('default', ['uglify']);
+
+};
\ No newline at end of file
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..41a5104
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Peter Dematté
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..13b947a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,183 @@
+
+# tinyColorPicker and colors
+
+Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
+This 4.4KB small HSB color picker is based on a subset of [https://github.com/PitPik/colorPicker/blob/master/colors.js](colors.js) from it's big brother [https://github.com/PitPik/colorPicker/](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 
+
+##Demo
+See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)
+
+<img src="development/screen-shot-all.jpg" />
+
+All the WCAG 2.0 calculations for readability are also based on opacity levels of all layers<br>
+Supported color spaces are: (* also displayed as colors in realtime)<br>
+rgb, hsv(b), hsl, HEX
+
+##colors.js
+
+```javascript
+Colors({ // all options have a default value...
+    color: 'rgba(204, 82, 37, 0.8)', // initial color (#RGB, RGB, #RRGGBB, RRGGBB, rgb(r, g, b), ...)
+    grey: {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
+    luminance: {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
+    valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required
+    customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)
+    convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...
+});
+```
+##jqColorPicker.js
+
+colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
+
+```javascript
+var myColorPicker = new ColorPicker({
+    color: ..., // see Colors...
+    customBG: '#FFF' // see Colors...
+    animationSpeed: 150, // toggle animation speed
+    GPU: true, // use transform: translate3d
+    doRender: true, // manipulate color ans bgColor of input field
+    opacity: true, // enable / disable alpha slider
+    renderCallback: function($elm, toggled) {}, // this === instance
+    buidCallback: function($elm, toggled) {}, // this === instance
+    css: '', // replaces existing css
+    cssAddon: '', // adds cdd to existing
+    margin: '', // positioning margin
+    preventFocus: false // prevent default on focus of input fields
+});
+```
+
+##The color model, the methods and more
+
+After initializing Color or ColorPicker you'll get a clean but rhich model of the instance:
+
+```javascript
+myColors: {
+    colors: { all kinds of color values...  see later},
+    options: { all the options you set or that are set as default... },
+    __proto__: { // all methods Color uses
+        setColor: function(newCol, type, alpha) {},
+        setCustomBackground: function(col) {},
+        saveAsBackground: function() {},
+    }
+}
+```
+
+```javascript
+myColorPicker: {
+    color: { // instance of Color inside colorPicker
+        colors: { all kinds of color values... see later},
+        options: { all the options you set or that are set as default... },
+        __proto__: { all methods Color uses ... see above}
+    },
+    __proto__: { // all methods ColorPicker uses
+        render: function() {},
+    }
+}
+```
+
+
+The color model
+
+```javascript
+HEX: // current color as HEX (upper case, 6 digits)
+rgb: // current RGB color as normalized values (0 - 1)
+    r: // red
+    g: // green
+    b: // blue
+hsv: // current color values in normalized HSV (HSB) model
+    h: // hue
+    s: // saturation
+    v: // value (brightness)
+hsl: // current color values in normalized HSL model
+    h: // hue
+    s: // saturation
+    l: // lightness
+RND: // all above colors in their defined ranges
+    rgb: // current RGB color, rounded between 0 and 255
+        r: // red (0 - 255)
+        g: // green (0 - 255)
+        b: // blue (0 - 255)
+    hsv: // see above
+        h: // hue (0 - 360 degrees)
+        s: // saturation (0 - 100 %)
+        v: // value (brightness) (0 - 100 %)
+    hsl: // see above
+        h: // hue (0 - 360 degrees)
+        s: // saturation (0 - 100 %)
+        l: // lightness (0 - 100 %)
+background: // saved (background) color (saveAsBackground(){})
+    rgb: // color in RGB model
+        r: // red
+        g: // green
+        b: // blue
+    RGB: // RGB color, rounded between 0 and 255
+        r: // red (0 - 255)
+        g: // green (0 - 255)
+        b: // blue (0 - 255)
+    alpha: // alpha or opacity value (0 - 1)
+    equivalentGrey: // r = g = b = (0 - 255)
+    rgbaMixBlack: // saved (background) color mixed with solid black color
+        r: // red
+        g: // green
+        b: // blue
+        a: // resulting alpha or opacity value (0 - 1)
+        luminance: // luminance of resulting mix (0 - 1)
+    rgbaMixCustom: // saved (background) color mixed with custom (solid) color
+        r: // red
+        g: // green
+        b: // blue
+        a: // resulting alpha or opacity value (0 - 1)
+        luminance: // luminance of resulting mix (0 - 1)
+    rgbaMixWhite: // saved (background) color mixed with solid white color
+        r: // red
+        g: // green
+        b: // blue
+        a: // resulting alpha or opacity value (0 - 1)
+        luminance: // luminance of resulting mix (0 - 1)
+alpha: // alpha or opacity value (0 - 1) of current color
+equivalentGrey: // r = g = b = (0 - 1)
+HUELuminance: // luminance of hue (in full brightnes and saturation) (0 - 1)
+RGBLuminance: // luminance of the current color
+hueRGB: // rounded integer value of current color in rgb model with full saturation and brightness
+    r: // red (0 - 255)
+    g: // green (0 - 255)
+    b: // blue (0 - 255)
+saveColor: // '' or 'web smart' or 'web save', if so.
+webSave: // closest web-save color
+    r: // red (0 - 255)
+    g: // green (0 - 255)
+    b: // blue (0 - 255)
+webSmart: // closest web-smart color
+    r: // red (0 - 255)
+    g: // green (0 - 255)
+    b: // blue (0 - 255)
+rgbaMixBG: // color mix result: current color above saved (background) color
+    r: // red (0 - 1)
+    g: // green (0 - 1)
+    b: // blue (0 - 1)
+    a: // resulting alpha or opacity value (0 - 1)
+    luminance: // luminance of resulting mix (0 - 1)
+rgbaMixBGMixCustom: // color mix result: current color above saved (background) color above solid custom color
+    r: // red (0 - 1)
+    g: // green (0 - 1)
+    b: // blue (0 - 1)
+    a: // resulting alpha or opacity value (0 - 1)
+    luminance: // luminance of resulting mix (0 - 1)
+    luminanceDelta: // luminance difference between current color and resulting saved-custom mix (0 - 1)
+    hueDelta: // hue difference between current color and resulting saved-custom mix (0 - 1)
+    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
+rgbaMixBlack: // color mix result: current color above solid black
+    r: // red (0 - 1)
+    g: // green (0 - 1)
+    b: // blue (0 - 1)
+    a: // resulting alpha or opacity value (0 - 1)
+    luminance: // luminance of resulting mix (0 - 1)
+    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
+rgbaMixWhite: // color mix result: current color above solid white
+    r: // red (0 - 1)
+    g: // green (0 - 1)
+    b: // blue (0 - 1)
+    a: // resulting alpha or opacity value (0 - 1)
+    luminance: // luminance of resulting mix (0 - 1)
+    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
+```
diff --git a/colors.js b/colors.js
new file mode 100644
index 0000000..5df3eb6
--- /dev/null
+++ b/colors.js
@@ -0,0 +1,418 @@
+;(function(window, undefined){
+	"use strict"
+
+	var _valueRanges = {
+			rgb:   {r: [0, 255], g: [0, 255], b: [0, 255]},
+			hsv:   {h: [0, 360], s: [0, 100], v: [0, 100]},
+			hsl:   {h: [0, 360], s: [0, 100], l: [0, 100]},
+			alpha: {alpha: [0, 1]},
+			HEX:   {HEX: [0, 16777215]} // maybe we don't need this
+		},
+
+		_instance = {},
+		_colors = {},
+
+		grey = {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
+		luminance = {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
+
+		Colors = window.Colors = function(options) {
+			this.colors = {RND: {}};
+			this.options = {
+				color: 'rgba(204, 82, 37, 0.8)', // init value(s)...
+				grey: grey,
+				luminance: luminance,
+				valueRanges: _valueRanges
+				// customBG: '#808080'
+				// convertCallback: undefined,
+				// allMixDetails: false
+			};
+			initInstance(this, options || {});
+		},
+		initInstance = function(THIS, options) {
+			var importColor,
+				_options = THIS.options,
+				customBG;
+
+			focusInstance(THIS);
+			for (var option in options) {
+				if (options[option] !== undefined) _options[option] = options[option];
+			}
+			customBG = _options.customBG;
+			_options.customBG = (typeof customBG === 'string') ? ColorConverter.txt2color(customBG).rgb : customBG;
+			_colors = setColor(THIS.colors, _options.color, undefined, true); // THIS.colors = _colors = 
+		},
+		focusInstance = function(THIS) {
+			if (_instance !== THIS) {
+				_instance = THIS;
+				_colors = THIS.colors;
+			}
+		};
+
+	Colors.prototype.setColor = function(newCol, type, alpha) {
+		focusInstance(this);
+		if (newCol) {
+			return setColor(this.colors, newCol, type, undefined, alpha);
+		} else {
+			if (alpha !== undefined) {
+				this.colors.alpha = alpha;
+			}
+			return convertColors(type);
+		}
+	};
+
+	Colors.prototype.setCustomBackground = function(col) { // wild gues,... check again...
+		focusInstance(this); // needed???
+		this.options.customBG = (typeof col === 'string') ? ColorConverter.txt2color(col).rgb : col;
+		// return setColor(this.colors, this.options.customBG, 'rgb', true); // !!!!RGB
+		return setColor(this.colors, undefined, 'rgb'); // just recalculate existing
+	};
+
+	Colors.prototype.saveAsBackground = function() { // alpha
+		focusInstance(this); // needed???
+		// return setColor(this.colors, this.colors.RND.rgb, 'rgb', true);
+		return setColor(this.colors, undefined, 'rgb', true);
+	};
+
+	// ------------------------------------------------------ //
+	// ---------- Color calculation related stuff  ---------- //
+	// -------------------------------------------------------//
+
+	function setColor(colors, color, type, save, alpha) { // color only full range
+		if (typeof color === 'string') {
+			var color = ColorConverter.txt2color(color); // new object
+			type = color.type;
+			_colors[type] = color[type];
+			alpha = alpha !== undefined ? alpha : color.alpha;
+		} else if (color) {
+			for (var n in color) {
+				colors[type][n] = limitValue(color[n] / _valueRanges[type][n][1], 0 , 1);
+			}
+		}
+		if (alpha !== undefined) {
+			colors.alpha = +alpha;
+		}
+		return convertColors(type, save ? colors : undefined);
+	}
+
+	function saveAsBackground(RGB, rgb, alpha) {
+		var grey = _instance.options.grey,
+			color = {};
+
+		color.RGB = {r: RGB.r, g: RGB.g, b: RGB.b};
+		color.rgb = {r: rgb.r, g: rgb.g, b: rgb.b};
+		color.alpha = alpha;
+		// color.RGBLuminance = getLuminance(RGB);
+		color.equivalentGrey = Math.round(grey.r * RGB.r + grey.g * RGB.g + grey.b * RGB.b);
+
+		color.rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
+		color.rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
+		color.rgbaMixBlack.luminance = getLuminance(color.rgbaMixBlack, true);
+		color.rgbaMixWhite.luminance = getLuminance(color.rgbaMixWhite, true);
+
+		if (_instance.options.customBG) {
+			color.rgbaMixCustom = mixColors(rgb, _instance.options.customBG, alpha, 1);
+			color.rgbaMixCustom.luminance = getLuminance(color.rgbaMixCustom, true);
+			_instance.options.customBG.luminance = getLuminance(_instance.options.customBG, true);
+		}
+
+		return color;
+	}
+
+	function convertColors(type, colorObj) {
+		// console.time('convertColors');
+		var colors = colorObj || _colors,
+			convert = ColorConverter,
+			options = _instance.options,
+			ranges = _valueRanges,
+			RND = colors.RND,
+			// type = colorType, // || _mode.type,
+			modes, mode = '', from = '', // value = '',
+			exceptions = {hsl: 'hsv', rgb: type},
+			RGB = RND.rgb, SAVE, SMART;
+
+		if (type !== 'alpha') {
+			for (var typ in ranges) {
+				if (!ranges[typ][typ]) { // no alpha|HEX
+					if (type !== typ) {
+						from = exceptions[typ] || 'rgb';
+						colors[typ] = convert[from + '2' + typ](colors[from]);
+					}
+
+					if (!RND[typ]) RND[typ] = {};
+					modes = colors[typ];
+					for(mode in modes) {
+						RND[typ][mode] = Math.round(modes[mode] * ranges[typ][mode][1]);
+					}
+				}
+			}
+
+			RGB = RND.rgb;
+			colors.HEX = convert.RGB2HEX(RGB);
+			colors.equivalentGrey =
+				options.grey.r * colors.rgb.r +
+				options.grey.g * colors.rgb.g +
+				options.grey.b * colors.rgb.b;
+			colors.webSave = SAVE = getClosestWebColor(RGB, 51);
+			// colors.webSave.HEX = convert.RGB2HEX(colors.webSave);
+			colors.webSmart = SMART = getClosestWebColor(RGB, 17);
+			// colors.webSmart.HEX = convert.RGB2HEX(colors.webSmart);
+			colors.saveColor =
+				RGB.r === SAVE.r && RGB.g === SAVE.g && RGB.b === SAVE.b  ? 'web save' :
+				RGB.r === SMART.r && RGB.g === SMART.g && RGB.b === SMART.b  ? 'web smart' : '';
+			colors.hueRGB = ColorConverter.hue2RGB(colors.hsv.h);
+
+			if (colorObj) {
+				colors.background = saveAsBackground(RGB, colors.rgb, colors.alpha);
+			}
+		} // else RGB = RND.rgb;
+
+		var rgb = colors.rgb, // for better minification...
+			alpha = colors.alpha,
+			luminance = 'luminance',
+			background = colors.background,
+			rgbaMixBlack, rgbaMixWhite, rgbaMixCustom, 
+			rgbaMixBG, rgbaMixBGMixBlack, rgbaMixBGMixWhite, rgbaMixBGMixCustom;
+
+		rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
+		rgbaMixBlack[luminance] = getLuminance(rgbaMixBlack, true);
+		colors.rgbaMixBlack = rgbaMixBlack;
+
+		rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
+		rgbaMixWhite[luminance] = getLuminance(rgbaMixWhite, true);
+		colors.rgbaMixWhite = rgbaMixWhite;
+
+		if (options.customBG) {
+			rgbaMixBGMixCustom = mixColors(rgb, background.rgbaMixCustom, alpha, 1);
+			rgbaMixBGMixCustom[luminance] = getLuminance(rgbaMixBGMixCustom, true);
+			rgbaMixBGMixCustom.WCAG2Ratio = getWCAG2Ratio(rgbaMixBGMixCustom[luminance],
+				background.rgbaMixCustom[luminance]);
+			colors.rgbaMixBGMixCustom = rgbaMixBGMixCustom;
+			/* ------ */
+			rgbaMixBGMixCustom.luminanceDelta = Math.abs(
+				rgbaMixBGMixCustom[luminance] - background.rgbaMixCustom[luminance]);
+			rgbaMixBGMixCustom.hueDelta = getHueDelta(background.rgbaMixCustom, rgbaMixBGMixCustom, true);
+			/* ------ */
+		}
+
+		colors.RGBLuminance = getLuminance(RGB);
+		colors.HUELuminance = getLuminance(colors.hueRGB);
+
+		// renderVars.readyToRender = true;
+		if (options.convertCallback) {
+			options.convertCallback(colors, type); //, convert); //, _mode);
+		}
+
+		// console.timeEnd('convertColors')
+		// if (colorObj)
+		return colors;
+	}
+
+
+	// ------------------------------------------------------ //
+	// ------------------ color conversion ------------------ //
+	// -------------------------------------------------------//
+
+	var ColorConverter = {
+		txt2color: function(txt) {
+			var color = {},
+				parts = txt.replace(/(?:#|\)|%)/g, '').split('('),
+				values = (parts[1] || '').split(/,\s*/),
+				type = parts[1] ? parts[0].substr(0, 3) : 'rgb',
+				m = '';
+
+			color.type = type;
+			color[type] = {};
+			if (parts[1]) {
+				for (var n = 3; n--; ) {
+					m = type[n] || type.charAt(n); // IE7
+					color[type][m] = +values[n] / _valueRanges[type][m][1];
+				}
+			} else {
+				color.rgb = ColorConverter.HEX2rgb(parts[0]);
+			}
+			// color.color = color[type];
+			color.alpha = values[3] ? +values[3] : 1;
+
+			return color;
+		},
+
+		RGB2HEX: function(RGB) {
+			return (
+				(RGB.r < 16 ? '0' : '') + RGB.r.toString(16) +
+				(RGB.g < 16 ? '0' : '') + RGB.g.toString(16) +
+				(RGB.b < 16 ? '0' : '') + RGB.b.toString(16)
+			).toUpperCase();
+		},
+
+		HEX2rgb: function(HEX) {
+			HEX = HEX.split(''); // IE7
+			return {
+				r: parseInt(HEX[0] + HEX[HEX[3] ? 1 : 0], 16) / 255,
+				g: parseInt(HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1]), 16) / 255,
+				b: parseInt((HEX[4] || HEX[2]) + (HEX[5] || HEX[2]), 16) / 255
+			};
+		},
+
+		hue2RGB: function(hue) {
+			var h = hue * 6,
+				mod = ~~h % 6, // Math.floor(h) -> faster in most browsers
+				i = h === 6 ? 0 : (h - mod);
+
+			return {
+				r: Math.round([1, 1 - i, 0, 0, i, 1][mod] * 255),
+				g: Math.round([i, 1, 1, 1 - i, 0, 0][mod] * 255),
+				b: Math.round([0, 0, i, 1, 1, 1 - i][mod] * 255)
+			};
+		},
+
+		// ------------------------ HSV ------------------------ //
+
+		rgb2hsv: function(rgb) { // faster
+			var r = rgb.r,
+				g = rgb.g,
+				b = rgb.b,
+				k = 0, chroma, min, s;
+
+			if (g < b) {
+				g = b + (b = g, 0);
+				k = -1;
+			}
+			min = b;
+			if (r < g) {
+				r = g + (g = r, 0);
+				k = -2 / 6 - k;
+				min = Math.min(g, b); // g < b ? g : b; ???
+			}
+			chroma = r - min;
+			s = r ? (chroma / r) : 0;
+			return {
+				h: s < 1e-15 ? ((_colors && _colors.hsl && _colors.hsl.h) || 0) :
+					chroma ? Math.abs(k + (g - b) / (6 * chroma)) : 0,
+				s: r ? (chroma / r) : ((_colors && _colors.hsv && _colors.hsv.s) || 0), // ??_colors.hsv.s || 0
+				v: r
+			};
+		},
+
+		hsv2rgb: function(hsv) {
+			var h = hsv.h * 6,
+				s = hsv.s,
+				v = hsv.v,
+				i = ~~h, // Math.floor(h) -> faster in most browsers
+				f = h - i,
+				p = v * (1 - s),
+				q = v * (1 - f * s),
+				t = v * (1 - (1 - f) * s),
+				mod = i % 6;
+
+			return {
+				r: [v, q, p, p, t, v][mod],
+				g: [t, v, v, q, p, p][mod],
+				b: [p, p, t, v, v, q][mod]
+			};
+		},
+
+		// ------------------------ HSL ------------------------ //
+
+		hsv2hsl: function(hsv) {
+			var l = (2 - hsv.s) * hsv.v,
+				s = hsv.s * hsv.v;
+
+			s = !hsv.s ? 0 : l < 1 ? (l ? s / l : 0) : s / (2 - l);
+
+			return {
+				h: hsv.h,
+				s: !hsv.v && !s ? ((_colors && _colors.hsl && _colors.hsl.s) || 0) : s, // ???
+				l: l / 2
+			};
+		},
+
+		rgb2hsl: function(rgb, dependent) { // not used in Color
+			var hsv = ColorConverter.rgb2hsv(rgb);
+
+			return ColorConverter.hsv2hsl(dependent ? hsv : (_colors.hsv = hsv));
+		},
+
+		hsl2rgb: function(hsl) {
+			var h = hsl.h * 6,
+				s = hsl.s,
+				l = hsl.l,
+				v = l < 0.5 ? l * (1 + s) : (l + s) - (s * l),
+				m = l + l - v,
+				sv = v ? ((v - m) / v) : 0,
+				sextant = ~~h, // Math.floor(h) -> faster in most browsers
+				fract = h - sextant,
+				vsf = v * sv * fract,
+				t = m + vsf,
+				q = v - vsf,
+				mod = sextant % 6;
+
+			return {
+				r: [v, q, m, m, t, v][mod],
+				g: [t, v, v, q, m, m][mod],
+				b: [m, m, t, v, v, q][mod]
+			};
+		}
+	};
+
+	// ------------------------------------------------------ //
+	// ------------------ helper functions ------------------ //
+	// -------------------------------------------------------//
+
+	function getClosestWebColor(RGB, val) {
+		var out = {},
+			tmp = 0,
+			half = val / 2;
+
+		for (var n in RGB) {
+			tmp = RGB[n] % val; // 51 = 'web save', 17 = 'web smart'
+			out[n] = RGB[n] + (tmp > half ? val - tmp : -tmp);
+		}
+		return out;
+	}
+
+	function getHueDelta(rgb1, rgb2, nominal) {
+		return (Math.max(rgb1.r - rgb2.r, rgb2.r - rgb1.r) +
+				Math.max(rgb1.g - rgb2.g, rgb2.g - rgb1.g) +
+				Math.max(rgb1.b - rgb2.b, rgb2.b - rgb1.b)) * (nominal ? 255 : 1) / 765;
+	}
+
+	function getLuminance(rgb, normalized) {
+		var div = normalized ? 1 : 255,
+			RGB = [rgb.r / div, rgb.g / div, rgb.b / div],
+			luminance = _instance.options.luminance;
+
+		for (var i = RGB.length; i--; ) {
+			RGB[i] = RGB[i] <= 0.03928 ? RGB[i] / 12.92 : Math.pow(((RGB[i] + 0.055) / 1.055), 2.4);
+		}
+		return ((luminance.r * RGB[0]) + (luminance.g * RGB[1]) + (luminance.b * RGB[2]));
+	}
+
+	function mixColors(topColor, bottomColor, topAlpha, bottomAlpha) {
+		var newColor = {},
+			alphaTop = (topAlpha !== undefined ? topAlpha : 1),
+			alphaBottom = (bottomAlpha !== undefined ? bottomAlpha : 1),
+			alpha = alphaTop + alphaBottom * (1 - alphaTop); // 1 - (1 - alphaTop) * (1 - alphaBottom);
+
+		for(var n in topColor) {
+			newColor[n] = (topColor[n] * alphaTop + bottomColor[n] * alphaBottom * (1 - alphaTop)) / alpha;
+		}
+		newColor.a = alpha;
+		return newColor;
+	}
+
+	function getWCAG2Ratio(lum1, lum2) {
+		var ratio = 1;
+
+		if (lum1 >= lum2) {
+			ratio = (lum1 + 0.05) / (lum2 + 0.05);
+		} else {
+			ratio = (lum2 + 0.05) / (lum1 + 0.05);
+		}
+		return Math.round(ratio * 100) / 100;
+	}
+
+	function limitValue(value, min, max) {
+		// return Math.max(min, Math.min(max, value)); // faster??
+		return (value > max ? max : value < min ? min : value);
+	}
+})(window);
\ No newline at end of file
diff --git a/development/colorPicker.css b/development/colorPicker.css
new file mode 100644
index 0000000..cfca6c5
--- /dev/null
+++ b/development/colorPicker.css
@@ -0,0 +1,67 @@
+.cp-color-picker {
+	position: absolute;
+	overflow: hidden;
+	padding: 6px 6px 0;
+	background-color: #444;
+	color: #bbb;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-weight: normal;
+	cursor: default;
+	border-radius: 5px;
+}
+.cp-color-picker > div {
+	position: relative;
+	overflow: hidden;
+}
+.cp-xy-slider {
+	float: left;
+	height: 128px;
+	width: 128px;
+	margin-bottom: 6px;
+	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+}
+.cp-white {
+	height: 100%;
+	width: 100%;
+	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
+}
+.cp-xy-cursor {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	margin: -5px;
+	border: 1px solid white;
+	border-radius: 100%;
+	box-sizing: border-box;
+}
+.cp-z-slider {
+	float: right;
+	margin-left: 6px;
+	height: 128px;
+	width: 20px;
+	background: linear-gradient(to bottom, #ff0000 0%,#ff00ff 17%,#0000ff 33%,#00ffff 50%,#00ff00 67%,#ffff00 83%,#ff0000 100%);
+}
+.cp-z-cursor {
+	position: absolute;
+	margin-top: -4px;
+	width: 100%;
+	border: 4px solid white;
+	border-color: transparent white;
+	box-sizing: border-box;
+}
+.cp-alpha {
+	clear: left;
+	width: 100%;
+	height: 16px;
+	margin: 6px 0;
+	background: linear-gradient(to right, rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%);
+}
+.cp-alpha-cursor {
+	position: absolute;
+	margin-left: -4px;
+	height: 100%;
+	border: 4px solid white;
+	border-color: white transparent;
+	box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/development/compatibility.css b/development/compatibility.css
new file mode 100644
index 0000000..a10424b
--- /dev/null
+++ b/development/compatibility.css
@@ -0,0 +1,45 @@
+.cp-xy-slider {
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
+	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
+}
+
+.cp-white {
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
+}
+.cp-z-slider {
+	background: url(rainbow.png); /* Old browsers */
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+	background: -moz-linear-gradient(top,  rgba(255,0,0,1) 0%, rgba(255,0,255,1) 17%, rgba(0,0,255,1) 33%, rgba(0,255,255,1) 50%, rgba(0,255,0,1) 67%, rgba(255,255,0,1) 83%, rgba(255,0,0,1) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(17%,rgba(255,0,255,1)), color-stop(33%,rgba(0,0,255,1)), color-stop(50%,rgba(0,255,255,1)), color-stop(67%,rgba(0,255,0,1)), color-stop(83%,rgba(255,255,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* W3C */
+}
+.cp-alpha {
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+	background: -moz-linear-gradient(left,  rgba(68,68,68,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(68,68,68,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
+	background: linear-gradient(to right,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#00000000',GradientType=1 ); /* IE6-8 */
+}
diff --git a/development/fmog.png b/development/fmog.png
new file mode 100644
index 0000000..2916184
Binary files /dev/null and b/development/fmog.png differ
diff --git a/development/screen-shot-all.jpg b/development/screen-shot-all.jpg
new file mode 100644
index 0000000..1847126
Binary files /dev/null and b/development/screen-shot-all.jpg differ
diff --git a/development/ui.html b/development/ui.html
new file mode 100644
index 0000000..a2417e8
--- /dev/null
+++ b/development/ui.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<link rel="stylesheet" type="text/css" href="../index.css">
+	<link rel="stylesheet" type="text/css" href="colorPicker.css">
+	<link rel="stylesheet" type="text/css" href="compatibility.css">
+	<title>UI dev</title>
+</head>
+<body>
+<h1>Tiny jQuery colorPicker UI</h1>
+<div class="cp-color-picker">
+	<div class="cp-z-slider">
+		<div class="cp-z-cursor"></div>	
+	</div>
+	<div class="cp-xy-slider">
+		<div class="cp-white"></div>
+		<div class="cp-xy-cursor"></div>
+	</div>
+	<div class="cp-alpha">
+		<div class="cp-alpha-cursor"></div>	
+	</div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..bfce9d1
--- /dev/null
+++ b/index.css
@@ -0,0 +1,29 @@
+body {
+	color: #ccc;
+	padding: .5em 2em;
+	font: normal normal normal 1em/1.35em Georgia, "Times New Roman", Times, serif;
+	background: url(data:image/jpg;base64,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);
+	margin: auto;
+	max-width: 600px;
+}
+input:focus {
+	outline: none;
+}
+h1, h2 {
+	line-height: 1em;
+}
+a {
+	color: #fff;
+}
+pre {
+	display: inline;
+	background-color: rgba(255, 255, 255, .2);
+	padding: .5em;
+}
+.color {
+	padding: .5em;
+	margin-right: .4em;
+	border: 1px solid #aaa;
+	border-radius: 3px;
+	width: 140px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0e48df9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<link rel="stylesheet" type="text/css" href="index.css">
+	<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
+	<link rel="stylesheet" type="text/css" href="development/compatibility.css">
+	<title>tiny jQuery colorPicker</title>
+</head>
+<body>
+<h1>Tiny jQuery colorPicker</h1>
+<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
+This <strong>4.4KB</strong> small HSB color picker is based on a subset of <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, 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 <a href="#demo">Demo</a>).</p>
+<a name="demo" id="demo"></a>
+<h2>Demo</h2>
+On all inputs with calssName 'color': <pre>$('input.color').colorPicker();</pre>
+<p>Switch between plugins:
+	<select id="pluginSelect">
+		<option value="desktop">Desktop (no plugin)</option>
+		<option value="mobile">Mobile</option>
+		<option value="input">Input fields</option>
+		<option value="noalpha">Default without alpha</option>
+	</select>
+	(see index.js for more details...)
+</p>
+<p>
+	<input class="color" value="#B6BD79" />
+	<input class="color" value="rgb(162, 63, 3)" />
+	<input class="color" value="hsl(32, 95%, 23%)" />
+</p>
+<h2>Features</h2>
+<p>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.<br>
+This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...<br>
+As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <a href="https://github.com/PitPik/colorPicker">colorPicker on GitHub</a> for more details)</p>
+<p>The following snipped shows how easy it is to make plugins: use for mobile</p>
+<pre style="display: block; overflow: auto;">
+window.myColorPicker = $('input.color').colorPicker({
+    buidCallback: function($elm) {
+        $elm.prepend('&lt;div class="cp-disp">&lt;/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) + ')');
+    }
+});
+</pre>
+<h2>API and usage</h2>
+<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
+<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
+<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
+<!-- <script type="text/javascript" src="colors.js"></script> -->
+<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
+<script type="text/javascript" src="jqColorPicker.min.js"></script>
+<script type="text/javascript">
+	(function(window, undefined){
+		'use strict';
+
+		var plugin = {},
+			pluginSelect = document.getElementById('pluginSelect'),
+			getQueryVariable = function(variable) {
+				var query = window.location.search.substring(1),
+					vars = query.split('&'),
+					pair, i;
+
+				for (i = vars.length; i--; ) {
+					pair = vars[i].split('=');
+					if(pair[0] === variable){
+						return pair[1].replace(/^\s*|\s*$/, '');
+					}
+				}
+				return(false);
+			},
+			type = getQueryVariable('type'),
+			selector = document.getElementById('pluginSelect');
+
+		// plugin for mobile use (bigger and value/color display on top)
+		plugin.mobile = {
+			customBG: '#222',
+			margin: '4px -2px',
+
+			// demo on how to make plugins... mobile support plugin
+			buidCallback: function($elm) {
+				$elm.prepend('<div class="cp-disp"></div>');
+			},
+			cssAddon: // could also be in a css file instead
+				'.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) + ')');
+			}
+		};
+
+		// shows input fields for rgb and hsv; changeable
+		plugin.input = {
+			customBG: '#222',
+			margin: '4px -2px',
+
+			buidCallback: function($elm) {
+				var colorInstance = this.color,
+					colorPicker = this;
+
+				$elm.prepend('<div class="cp-panel">' +
+					'R <input type="text" class="cp-r" /><br>' +
+					'G <input type="text" class="cp-g" /><br>' +
+					'B <input type="text" class="cp-b" /><hr>' +
+					'H <input type="text" class="cp-h" /><br>' +
+					'S <input type="text" class="cp-s" /><br>' +
+					'B <input type="text" class="cp-v" />' +
+				'</div>').on('change', 'input', function(e) {
+					var value = this.value,
+						className = this.className,
+						type = className.split('-')[1],
+						color = {};
+
+					color[type] = value;
+					colorInstance.setColor(color, /(?:r|g|b)/.test(type) ? 'rgb' : 'hsv');
+					colorPicker.render();
+					this.blur();
+				});
+			},
+
+			cssAddon: // could also be in a css file instead
+				'.cp-panel {float:right; padding:0 1px 0 8px; margin-top:-1px;}' +
+				'.cp-panel, .cp-panel input {color:#bbb; font-family:monospace,' +
+					'"Courier New",Courier,mono; font-size:12px; font-weight:bold;}' +
+				'.cp-panel input {width:25px; height:12px; padding:2px 3px 1px;' +
+					'text-align:right; line-height:12px; background:transparent;' +
+					'border:1px solid; border-color:#222 #666 #666 #222;}' +
+				'.cp-panel hr {margin:0 -2px 2px; height:1px; border:0;' +
+					'background:#666; border-top:1px solid #222;}',
+
+			renderCallback: function($elm, toggled) {
+				var $panel = $('.cp-panel'),
+					colors = this.color.colors,
+					rgb = colors.RND.rgb,
+					hsv = colors.RND.hsv;
+
+				$('.cp-r', $panel).val(rgb.r);
+				$('.cp-g', $panel).val(rgb.g);
+				$('.cp-b', $panel).val(rgb.b);
+				$('.cp-h', $panel).val(hsv.h);
+				$('.cp-s', $panel).val(hsv.s);
+				$('.cp-v', $panel).val(hsv.v);
+			}
+		};
+
+		// the default; no extra stuff
+		plugin.desktop = {
+			customBG: '#222',
+			margin: '4px -2px'
+		};
+
+		// the default without alpha chanel though
+		plugin.noalpha = {
+			customBG: '#222',
+			margin: '4px -2px',
+			opacity: false
+		};
+
+
+
+		pluginSelect.value = type;
+		pluginSelect.onchange = function(e) {
+			location = window.location;
+
+			window.location = location.origin + location.pathname +
+				'?type=' + this.value + '#demo';
+		}
+
+		window.myColorPicker = $('input.color').colorPicker(
+			plugin[type] || plugin.desktop
+		);
+	})(window);
+</script>
+<a href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
+</body>
+</html>
\ No newline at end of file
diff --git a/jqColorPicker.js b/jqColorPicker.js
new file mode 100644
index 0000000..36785ce
--- /dev/null
+++ b/jqColorPicker.js
@@ -0,0 +1,244 @@
+;(function($, Colors, undefined){
+	'use strict';
+
+	var $document = $(document),
+		_colorPicker,
+		_color,
+		_options,
+		_cache = {},
+		_$UI,
+		_pointermove = 'touchmove mousemove pointermove',
+		_pointerup = 'touchend mouseup pointerup',
+		_GPU = false,
+		_animate = window.requestAnimationFrame ||
+			window.webkitRequestAnimationFrame || function(cb){cb()},
+		_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
+			'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
+			'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
+			'class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',
+			// 'grunt-contrib-uglify' puts all this back to one single string...
+		_css = '.cp-color-picker{position:absolute;overflow:hidden;padding:6p' +
+			'x 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helve' +
+			'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
+			'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
+			'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
+			'bottom:6px;background:linear-gradient(to right,rgba(255,255,255,' +
+			'1)0,rgba(255,255,255,0)100%)}.cp-white{height:100%;width:100%;ba' +
+			'ckground:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)1' +
+			'00%)}.cp-xy-cursor{position:absolute;top:0;width:10px;height:10p' +
+			'x;margin:-5px;border:1px solid #fff;border-radius:100%;box-sizin' +
+			'g:border-box}.cp-z-slider{float:right;margin-left:6px;height:128' +
+			'px;width:20px;background:linear-gradient(to bottom,red 0,#f0f 17' +
+			'%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-cursor{pos' +
+			'ition:absolute;margin-top:-4px;width:100%;border:4px solid #fff;' +
+			'border-color:transparent #fff;box-sizing:border-box}.cp-alpha{cl' +
+			'ear:left;width:100%;height:16px;margin:6px 0;background:linear-g' +
+			'radient(to right,rgba(68,68,68,1)0,rgba(0,0,0,0)100%)}.cp-alpha-' +
+			'cursor{position:absolute;margin-left:-4px;height:100%;border:4px' +
+			' solid #fff;border-color:#fff transparent;box-sizing:border-box}',
+
+		ColorPicker = function(options) {
+			_color = this.color = new Colors(options);
+			_options = _color.options;
+		};
+
+	ColorPicker.prototype.render = render;
+
+	function extractValue(elm) {
+		return elm.value || $(elm).css('background-color') || '#fff';
+	}
+
+	function resolveEventType(event) {
+		return event.originalEvent.touches ?
+			event.originalEvent.touches[0] : event;
+	}
+
+	function toggle(event) {
+		var $this = $(this),
+			position;
+
+		if (event) {
+			position = $this.offset();
+			_cache.$element = $this;
+			_options.preventFocus && event.preventDefault();
+
+			(_$UI || build()).css({
+				'left': position.left, // check for space...
+				'top': position.top + $this.outerHeight(true)
+			}).show(_options.animationSpeed, function() {
+				_cache.alphaWidth = $('.cp-alpha', _$UI).width();
+				_cache.sliderWidth = $('.cp-xy-slider', _$UI).width();
+				_color.setColor(extractValue($this[0]));
+				_animate(function(){render(true)});
+			});
+		} else {
+			$(_$UI).hide(_options.animationSpeed, function() {
+				_cache.$element.blur();
+			});
+		}
+	};
+
+	function build() {
+		// CSS
+		$('head').append('<style type="text/css">' +
+			(_options.css || _css) + (_options.cssAddon || '') + '</style>');
+		// HTML
+		return _$UI = $(_html).css({'margin': _options.margin}).
+			find('.cp-alpha').toggle(!!_options.opacity).
+			parent(). // back to $(_html)
+			show(0, function() {
+				_GPU = _options.GPU && $(this).css('transform') === '';
+				_options.buidCallback.call(_colorPicker, $(this));
+			}).hide().
+			on('touchstart mousedown pointerdown',
+				'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown).
+			appendTo(document.body);
+	}
+
+	function pointerdown(e) {
+		var action = this.className.replace('cp-', '').replace('-', '_');
+
+		e.preventDefault();
+
+		_cache.elementOrigin = $(this).offset();
+		(action = action === 'xy_slider' ? xy_slider :
+			action === 'z_slider' ? z_slider : alpha)(e);
+
+		$document.on(_pointerup, pointerup).on(_pointermove, action);
+	}
+
+	function pointerup(e) {
+		$document.off(_pointermove).off(_pointerup);
+	}
+
+	function xy_slider(event) {
+		var e = resolveEventType(event),
+			x = e.pageX - _cache.elementOrigin.left,
+			y = e.pageY - _cache.elementOrigin.top;
+
+		_color.setColor({
+			s: x / _cache.sliderWidth * 100,
+			v: 100 - (y / _cache.sliderWidth * 100)
+		}, 'hsv');
+		_animate(render);
+	}
+
+	function z_slider(event) {
+		var z = resolveEventType(event).pageY - _cache.elementOrigin.top,
+			hsv = _color.colors.hsv;
+
+		_color.setColor({h: 360 - (z / _cache.sliderWidth * 360)}, 'hsv');
+		_animate(render);
+	}
+
+	function alpha(event) {
+		var x = resolveEventType(event).pageX - _cache.elementOrigin.left,
+			alpha = x / _cache.alphaWidth;
+
+		_color.setColor({}, 'rgb', alpha > 1 ? 1 : alpha < 0 ? 0 : alpha);
+		_animate(render);
+	}
+
+	function render(toggled) {
+		var colors = _color.colors,
+			hueRGB = colors.hueRGB,
+			RGB = colors.RND.rgb,
+			HSL = colors.RND.hsl,
+			dark = '#222',
+			light = '#ddd',
+			colorMode = _cache.$element.data('colorMode'),
+			isAlpha = colors.alpha !== 1,
+			alpha = Math.round(colors.alpha * 100) / 100,
+			RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
+			RGBAText = 'rgba(' + RGBInnerText + ', ' + alpha + ')',
+			text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
+				colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
+				(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
+				('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
+					HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
+			HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
+			alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
+			h = (1 - colors.hsv.h) * _cache.sliderWidth,
+			s = colors.hsv.s * _cache.sliderWidth,
+			v = (1 - colors.hsv.v) * _cache.sliderWidth,
+			a = alpha * _cache.alphaWidth,
+			t3d = _GPU ? 'translate3d' : '';
+
+		$('.cp-xy-slider').css({
+			backgroundColor: 'rgb(' +
+				hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
+		$('.cp-xy-cursor').css({
+			transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
+			left: !_GPU ? s : '',
+			top: !_GPU ? v : '',
+			borderColor : colors.RGBLuminance > 0.22 ? dark : light
+		});
+		$('.cp-z-cursor').css({
+			transform: t3d + '(0, ' + h + 'px, 0)',
+			top: !_GPU ? h : '',
+			borderLeftColor : HUEContrast,
+			borderRightColor : HUEContrast
+		});
+		$('.cp-alpha').css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
+		$('.cp-alpha-cursor').css({
+			transform: t3d + '(' + a + 'px, 0, 0)',
+			left: !_GPU ? a : '',
+			borderTopColor : alphaContrast,
+			borderBottomColor : alphaContrast
+		});
+		_options.doRender && _cache.$element.css({
+			backgroundColor : RGBAText,
+			color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
+		});
+		_cache.$element.val(text);
+
+		_options.renderCallback.call(
+			_colorPicker, _cache.$element, toggled === true);
+	}
+
+	// export as plugin to jQuery
+	$.fn.colorPicker = function(options) {
+		var $that = this,
+			noop = function(){};
+
+ 		options = $.extend({
+			animationSpeed: 150,
+			GPU: true,
+			doRender: true,
+			customBG: '#FFF',
+			opacity: true,
+			renderCallback: noop,
+			buidCallback: noop
+			// css: '',
+			// cssAddon: '',
+			// margin: '',
+			// preventFocus: false
+		}, options);
+ 
+		if (!_colorPicker) { // we only want one single instance...
+			_colorPicker = new ColorPicker(options);
+
+			$document.on('touchstart mousedown pointerdown', function(e) {
+				if ($.inArray(e.target, $that) === -1 &&
+				!$(e.target).closest(_$UI).length) {
+					toggle();
+				}
+			}).on('focus', this.selector, toggle);
+		}
+
+		this.colorPicker = _colorPicker;
+
+		return this.each(function() {
+			var value = extractValue(this),
+				mode = value.split('(');
+			// save initial color mode and set color and bgColor
+			$(this).data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX');
+			options.doRender && $(this).css({'background-color': value,
+				'color': function() {
+					return _color.setColor(value).
+						rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
+				}
+			});
+		});
+	};
+})(window.jQuery, Colors);
\ No newline at end of file
diff --git a/jqColorPicker.js.map b/jqColorPicker.js.map
new file mode 100644
index 0000000..4fd645e
--- /dev/null
+++ b/jqColorPicker.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"jqColorPicker.min.js","sources":["colors.js","jqColorPicker.js"],"names":["window","undefined","setColor","colors","color","type","save","alpha","ColorConverter","txt2color","_colors","n","limitValue","_valueRanges","convertColors","saveAsBackground","RGB","rgb","grey","_instance","options","r","g","b","equivalentGrey","Math","round","rgbaMixBlack","mixColors","rgbaMixWhite","luminance","getLuminance","customBG","rgbaMixCustom","colorObj","modes","SAVE","SMART","convert","ranges","RND","mode","from","exceptions","hsl","typ","HEX","RGB2HEX","webSave","getClosestWebColor","webSmart","saveColor","hueRGB","hue2RGB","hsv","h","background","rgbaMixBGMixCustom","WCAG2Ratio","getWCAG2Ratio","luminanceDelta","abs","hueDelta","getHueDelta","RGBLuminance","HUELuminance","convertCallback","val","out","tmp","half","rgb1","rgb2","nominal","max","normalized","div","i","length","pow","topColor","bottomColor","topAlpha","bottomAlpha","newColor","alphaTop","alphaBottom","a","lum1","lum2","ratio","value","min","s","v","l","Colors","this","valueRanges","initInstance","THIS","_options","focusInstance","option","prototype","newCol","setCustomBackground","col","txt","parts","replace","split","values","substr","m","charAt","HEX2rgb","toString","toUpperCase","parseInt","hue","mod","rgb2hsv","chroma","k","hsv2rgb","f","p","q","t","hsv2hsl","rgb2hsl","dependent","hsl2rgb","sv","sextant","fract","vsf","$","extractValue","elm","css","resolveEventType","event","originalEvent","touches","toggle","position","$this","offset","_cache","$element","preventFocus","preventDefault","_$UI","build","left","top","outerHeight","show","animationSpeed","alphaWidth","width","sliderWidth","_color","_animate","render","hide","blur","append","_css","cssAddon","_html","margin","find","opacity","parent","_GPU","GPU","buidCallback","call","_colorPicker","on","pointerdown","appendTo","document","body","e","action","className","elementOrigin","xy_slider","z_slider","$document","_pointerup","pointerup","_pointermove","off","x","pageX","y","pageY","z","toggled","HSL","dark","light","colorMode","data","isAlpha","RGBInnerText","RGBAText","text","HUEContrast","alphaContrast","t3d","backgroundColor","transform","borderColor","borderLeftColor","borderRightColor","borderTopColor","borderBottomColor","doRender","renderCallback","requestAnimationFrame","webkitRequestAnimationFrame","cb","ColorPicker","fn","colorPicker","$that","noop","extend","inArray","target","closest","selector","each","background-color","jQuery"],"mappings":"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"}
\ No newline at end of file
diff --git a/jqColorPicker.min.js b/jqColorPicker.min.js
new file mode 100644
index 0000000..b818c97
--- /dev/null
+++ b/jqColorPicker.min.js
@@ -0,0 +1,4 @@
+/*! tiny colorPicker - v1.0.0 2015-02-02 */
+!function(a,b){"use strict";function c(a,c,d,f,g){if("string"==typeof c){var c=t.txt2color(c);d=c.type,n[d]=c[d],g=g!==b?g:c.alpha}else if(c)for(var h in c)a[d][h]=k(c[h]/l[d][h][1],0,1);return g!==b&&(a.alpha=+g),e(d,f?a:b)}function d(a,b,c){var d=m.options.grey,e={};return e.RGB={r:a.r,g:a.g,b:a.b},e.rgb={r:b.r,g:b.g,b:b.b},e.alpha=c,e.equivalentGrey=Math.round(d.r*a.r+d.g*a.g+d.b*a.b),e.rgbaMixBlack=i(b,{r:0,g:0,b:0},c,1),e.rgbaMixWhite=i(b,{r:1,g:1,b:1},c,1),e.rgbaMixBlack.luminance=h(e.rgbaMixBlack,!0),e.rgbaMixWhite.luminance=h(e.rgbaMixWhite,!0),m.options.customBG&&(e.rgbaMixCustom=i(b,m.options.customBG,c,1),e.rgbaMixCustom.luminance=h(e.rgbaMixCustom,!0),m.options.customBG.luminance=h(m.options.customBG,!0)),e}function e(a,b){var c,e,k,o=b||n,p=t,q=m.options,r=l,s=o.RND,u="",v="",w={hsl:"hsv",rgb:a},x=s.rgb;if("alpha"!==a){for(var y in r)if(!r[y][y]){a!==y&&(v=w[y]||"rgb",o[y]=p[v+"2"+y](o[v])),s[y]||(s[y]={}),c=o[y];for(u in c)s[y][u]=Math.round(c[u]*r[y][u][1])}x=s.rgb,o.HEX=p.RGB2HEX(x),o.equivalentGrey=q.grey.r*o.rgb.r+q.grey.g*o.rgb.g+q.grey.b*o.rgb.b,o.webSave=e=f(x,51),o.webSmart=k=f(x,17),o.saveColor=x.r===e.r&&x.g===e.g&&x.b===e.b?"web save":x.r===k.r&&x.g===k.g&&x.b===k.b?"web smart":"",o.hueRGB=t.hue2RGB(o.hsv.h),b&&(o.background=d(x,o.rgb,o.alpha))}var z,A,B,C=o.rgb,D=o.alpha,E="luminance",F=o.background;return z=i(C,{r:0,g:0,b:0},D,1),z[E]=h(z,!0),o.rgbaMixBlack=z,A=i(C,{r:1,g:1,b:1},D,1),A[E]=h(A,!0),o.rgbaMixWhite=A,q.customBG&&(B=i(C,F.rgbaMixCustom,D,1),B[E]=h(B,!0),B.WCAG2Ratio=j(B[E],F.rgbaMixCustom[E]),o.rgbaMixBGMixCustom=B,B.luminanceDelta=Math.abs(B[E]-F.rgbaMixCustom[E]),B.hueDelta=g(F.rgbaMixCustom,B,!0)),o.RGBLuminance=h(x),o.HUELuminance=h(o.hueRGB),q.convertCallback&&q.convertCallback(o,a),o}function f(a,b){var c={},d=0,e=b/2;for(var f in a)d=a[f]%b,c[f]=a[f]+(d>e?b-d:-d);return c}function g(a,b,c){return(Math.max(a.r-b.r,b.r-a.r)+Math.max(a.g-b.g,b.g-a.g)+Math.max(a.b-b.b,b.b-a.b))*(c?255:1)/765}function h(a,b){for(var c=b?1:255,d=[a.r/c,a.g/c,a.b/c],e=m.options.luminance,f=d.length;f--;)d[f]=d[f]<=.03928?d[f]/12.92:Math.pow((d[f]+.055)/1.055,2.4);return e.r*d[0]+e.g*d[1]+e.b*d[2]}function i(a,c,d,e){var f={},g=d!==b?d:1,h=e!==b?e:1,i=g+h*(1-g);for(var j in a)f[j]=(a[j]*g+c[j]*h*(1-g))/i;return f.a=i,f}function j(a,b){var c=1;return c=a>=b?(a+.05)/(b+.05):(b+.05)/(a+.05),Math.round(100*c)/100}function k(a,b,c){return a>c?c:b>a?b:a}var l={rgb:{r:[0,255],g:[0,255],b:[0,255]},hsv:{h:[0,360],s:[0,100],v:[0,100]},hsl:{h:[0,360],s:[0,100],l:[0,100]},alpha:{alpha:[0,1]},HEX:{HEX:[0,16777215]}},m={},n={},o={r:.298954,g:.586434,b:.114612},p={r:.2126,g:.7152,b:.0722},q=a.Colors=function(a){this.colors={RND:{}},this.options={color:"rgba(204, 82, 37, 0.8)",grey:o,luminance:p,valueRanges:l},r(this,a||{})},r=function(a,d){var e,f=a.options;s(a);for(var g in d)d[g]!==b&&(f[g]=d[g]);e=f.customBG,f.customBG="string"==typeof e?t.txt2color(e).rgb:e,n=c(a.colors,f.color,b,!0)},s=function(a){m!==a&&(m=a,n=a.colors)};q.prototype.setColor=function(a,d,f){return s(this),a?c(this.colors,a,d,b,f):(f!==b&&(this.colors.alpha=f),e(d))},q.prototype.setCustomBackground=function(a){return s(this),this.options.customBG="string"==typeof a?t.txt2color(a).rgb:a,c(this.colors,b,"rgb")},q.prototype.saveAsBackground=function(){return s(this),c(this.colors,b,"rgb",!0)};var t={txt2color:function(a){var b={},c=a.replace(/(?:#|\)|%)/g,"").split("("),d=(c[1]||"").split(/,\s*/),e=c[1]?c[0].substr(0,3):"rgb",f="";if(b.type=e,b[e]={},c[1])for(var g=3;g--;)f=e[g]||e.charAt(g),b[e][f]=+d[g]/l[e][f][1];else b.rgb=t.HEX2rgb(c[0]);return b.alpha=d[3]?+d[3]:1,b},RGB2HEX:function(a){return((a.r<16?"0":"")+a.r.toString(16)+(a.g<16?"0":"")+a.g.toString(16)+(a.b<16?"0":"")+a.b.toString(16)).toUpperCase()},HEX2rgb:function(a){return a=a.split(""),{r:parseInt(a[0]+a[a[3]?1:0],16)/255,g:parseInt(a[a[3]?2:1]+(a[3]||a[1]),16)/255,b:parseInt((a[4]||a[2])+(a[5]||a[2]),16)/255}},hue2RGB:function(a){var b=6*a,c=~~b%6,d=6===b?0:b-c;return{r:Math.round(255*[1,1-d,0,0,d,1][c]),g:Math.round(255*[d,1,1,1-d,0,0][c]),b:Math.round(255*[0,0,d,1,1,1-d][c])}},rgb2hsv:function(a){var b,c,d,e=a.r,f=a.g,g=a.b,h=0;return g>f&&(f=g+(g=f,0),h=-1),c=g,f>e&&(e=f+(f=e,0),h=-2/6-h,c=Math.min(f,g)),b=e-c,d=e?b/e:0,{h:1e-15>d?n&&n.hsl&&n.hsl.h||0:b?Math.abs(h+(f-g)/(6*b)):0,s:e?b/e:n&&n.hsv&&n.hsv.s||0,v:e}},hsv2rgb:function(a){var b=6*a.h,c=a.s,d=a.v,e=~~b,f=b-e,g=d*(1-c),h=d*(1-f*c),i=d*(1-(1-f)*c),j=e%6;return{r:[d,h,g,g,i,d][j],g:[i,d,d,h,g,g][j],b:[g,g,i,d,d,h][j]}},hsv2hsl:function(a){var b=(2-a.s)*a.v,c=a.s*a.v;return c=a.s?1>b?b?c/b:0:c/(2-b):0,{h:a.h,s:a.v||c?c:n&&n.hsl&&n.hsl.s||0,l:b/2}},rgb2hsl:function(a,b){var c=t.rgb2hsv(a);return t.hsv2hsl(b?c:n.hsv=c)},hsl2rgb:function(a){var b=6*a.h,c=a.s,d=a.l,e=.5>d?d*(1+c):d+c-c*d,f=d+d-e,g=e?(e-f)/e:0,h=~~b,i=b-h,j=e*g*i,k=f+j,l=e-j,m=h%6;return{r:[e,l,f,f,k,e][m],g:[k,e,e,l,f,f][m],b:[f,f,k,e,e,l][m]}}}}(window);
+!function(a,b){"use strict";function c(b){return b.value||a(b).css("background-color")||"#fff"}function d(a){return a.originalEvent.touches?a.originalEvent.touches[0]:a}function e(b){var d,e=a(this);b?(d=e.offset(),r.$element=e,o.preventFocus&&b.preventDefault(),(p||f()).css({left:d.left,top:d.top+e.outerHeight(!0)}).show(o.animationSpeed,function(){r.alphaWidth=a(".cp-alpha",p).width(),r.sliderWidth=a(".cp-xy-slider",p).width(),n.setColor(c(e[0])),v(function(){l(!0)})})):a(p).hide(o.animationSpeed,function(){r.$element.blur()})}function f(){return a("head").append('<style type="text/css">'+(o.css||x)+(o.cssAddon||"")+"</style>"),p=a(w).css({margin:o.margin}).find(".cp-alpha").toggle(!!o.opacity).parent().show(0,function(){u=o.GPU&&""===a(this).css("transform"),o.buidCallback.call(m,a(this))}).hide().on("touchstart mousedown pointerdown",".cp-xy-slider,.cp-z-slider,.cp-alpha",g).appendTo(document.body)}function g(b){var c=this.className.replace("cp-","").replace("-","_");b.preventDefault(),r.elementOrigin=a(this).offset(),(c="xy_slider"===c?i:"z_slider"===c?j:k)(b),q.on(t,h).on(s,c)}function h(){q.off(s).off(t)}function i(a){var b=d(a),c=b.pageX-r.elementOrigin.left,e=b.pageY-r.elementOrigin.top;n.setColor({s:c/r.sliderWidth*100,v:100-e/r.sliderWidth*100},"hsv"),v(l)}function j(a){{var b=d(a).pageY-r.elementOrigin.top;n.colors.hsv}n.setColor({h:360-b/r.sliderWidth*360},"hsv"),v(l)}function k(a){var b=d(a).pageX-r.elementOrigin.left,c=b/r.alphaWidth;n.setColor({},"rgb",c>1?1:0>c?0:c),v(l)}function l(b){var c=n.colors,d=c.hueRGB,e=c.RND.rgb,f=c.RND.hsl,g="#222",h="#ddd",i=r.$element.data("colorMode"),j=1!==c.alpha,k=Math.round(100*c.alpha)/100,l=e.r+", "+e.g+", "+e.b,p="rgba("+l+", "+k+")",q="HEX"!==i||j?"rgb"===i||"HEX"===i&&j?j?p:"rgb("+l+")":"hsl"+(j?"a(":"(")+f.h+", "+f.s+"%, "+f.l+"%"+(j?", "+k:"")+")":"#"+c.HEX,s=c.HUELuminance>.22?g:h,t=c.rgbaMixBlack.luminance>.22?g:h,v=(1-c.hsv.h)*r.sliderWidth,w=c.hsv.s*r.sliderWidth,x=(1-c.hsv.v)*r.sliderWidth,y=k*r.alphaWidth,z=u?"translate3d":"";a(".cp-xy-slider").css({backgroundColor:"rgb("+d.r+","+d.g+","+d.b+")"}),a(".cp-xy-cursor").css({transform:z+"("+w+"px, "+x+"px, 0)",left:u?"":w,top:u?"":x,borderColor:c.RGBLuminance>.22?g:h}),a(".cp-z-cursor").css({transform:z+"(0, "+v+"px, 0)",top:u?"":v,borderLeftColor:s,borderRightColor:s}),a(".cp-alpha").css({backgroundColor:"rgb("+l+")"}),a(".cp-alpha-cursor").css({transform:z+"("+y+"px, 0, 0)",left:u?"":y,borderTopColor:t,borderBottomColor:t}),o.doRender&&r.$element.css({backgroundColor:p,color:c.rgbaMixBGMixCustom.luminance>.22?g:h}),r.$element.val(q),o.renderCallback.call(m,r.$element,b===!0)}var m,n,o,p,q=a(document),r={},s="touchmove mousemove pointermove",t="touchend mouseup pointerup",u=!1,v=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(a){a()},w='<div class="cp-color-picker"><div class="cp-z-slider"><div class="cp-z-cursor"></div></div><div class="cp-xy-slider"><div class="cp-white"></div><div class="cp-xy-cursor"></div></div><div class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',x=".cp-color-picker{position:absolute;overflow:hidden;padding:6px 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;cursor:default;border-radius:5px}.cp-color-picker>div{position:relative;overflow:hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-bottom:6px;background:linear-gradient(to right,rgba(255,255,255,1)0,rgba(255,255,255,0)100%)}.cp-white{height:100%;width:100%;background:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)100%)}.cp-xy-cursor{position:absolute;top:0;width:10px;height:10px;margin:-5px;border:1px solid #fff;border-radius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin-left:6px;height:128px;width:20px;background:linear-gradient(to bottom,red 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-cursor{position:absolute;margin-top:-4px;width:100%;border:4px solid #fff;border-color:transparent #fff;box-sizing:border-box}.cp-alpha{clear:left;width:100%;height:16px;margin:6px 0;background:linear-gradient(to right,rgba(68,68,68,1)0,rgba(0,0,0,0)100%)}.cp-alpha-cursor{position:absolute;margin-left:-4px;height:100%;border:4px solid #fff;border-color:#fff transparent;box-sizing:border-box}",y=function(a){n=this.color=new b(a),o=n.options};y.prototype.render=l,a.fn.colorPicker=function(b){var d=this,f=function(){};return b=a.extend({animationSpeed:150,GPU:!0,doRender:!0,customBG:"#FFF",opacity:!0,renderCallback:f,buidCallback:f},b),m||(m=new y(b),q.on("touchstart mousedown pointerdown",function(b){-1!==a.inArray(b.target,d)||a(b.target).closest(p).length||e()}).on("focus",this.selector,e)),this.colorPicker=m,this.each(function(){var d=c(this),e=d.split("(");a(this).data("colorMode",e[1]?e[0].substr(0,3):"HEX"),b.doRender&&a(this).css({"background-color":d,color:function(){return n.setColor(d).rgbaMixBGMixCustom.luminance>.22?"#222":"#ddd"}})})}}(window.jQuery,Colors);
+//# sourceMappingURL=jqColorPicker.js.map
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..4bb9cb0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "tiny colorPicker",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/PitPik/tinyColorPicker.git"
+  },
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-uglify": "^0.5.1"
+  }
+}