<metaname="Description"content="tiny ColorPicker is a small (10.0KB, 4.5KB gZip) but very advanced jQuery color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-layer or 3-layer overlap mix, etc..."/>
<metaname="Keywords"content="ColorPicker, color picker, color chooser, color, picker, javaScript, jquery, colors, rgb, hsv, hsl, hex, alpha, WCAG 2.0, grayscale, contrast, readability, realtime, retina, high resolution"/>
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
This <strong>4.5KB</strong> small HSB color picker is based on a subset of <ahref="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <ahref="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 <ahref="#demo">Demo</a>).</p>
This <strong>4.5KB</strong> small HSB color picker is based on a subset of <ahref="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <ahref="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 <ahref="#demo">Demo</a>).</p>
<aname="demo"id="demo"></a>
<aname="demo"id="demo"class="a-inline"></a>
<h2>Demo</h2>
<h2>Demo</h2>
On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<p>Switch between plugins:
<p>Switch between plugins:
@ -48,7 +53,7 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
</script>
</script>
</pre>
</pre>
<h2>Features</h2>
<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>
<p>Tiny jQuery colorPicker only loads if triggered to show. 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.<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>
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 <ahref="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <ahref="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <ahref="https://github.com/PitPik/colorPicker">colorPicker on GitHub</a> for more details)</p>
As Tiny jQuery colorPicker uses <ahref="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <ahref="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <ahref="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>
<p>The following snipped shows how easy it is to make plugins: use for mobile</p>