ColorPicker (v. 1.0) and Colors

ColorPicker v1.0 is a small (45.4KB, 19.5KB gZip) but very advanced framework independent javaScript color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab 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...

Demo and test area

This demo section shows how ColorPicker's and Colors' APIs work and how they communicate to the outer world.
The initial setup: ColorPicker UI (user interface) to the left as a standalone instance and test patches to the right (also interactive) connected to a separate instance of Colors.
Use the drop down menu to connect the patches with its own Colors instance or to sync with the instance of ColorPicker.

Some hints: resize colorPicker to see 4 different possible sizes; use keybord, arrow/page keys our mouse in input fields to manipulate values; try all buttons on right side of colorPicker to explore functionalities. (Better description will follow...)

Change drop down to connect test patches to Colors instance or to ColorPicker:

Demo of simple javaScript implementation

This demo uses jsColor.js (3.8KB), a javaScript only implementation of colors.js and colorPicker.js
Calling the colorPicker on all inputs with the className 'color':


See also a simple jQuery implementation preview here

Short description

ColorPicker is very convenient and intuitive to use due to

ColorPicker runs within all browsers including IE7+ (theoretically also IE5.5+ and mobile devices with some modifications) can be called within 1 single file (color.all.min.js 45.4KB, 19.5KB gZip including HTML, CSS and some images),
although it's separated into 4 components for flexible customization, developing and handling:

The demos and the implementations show how easy it is to build your own color picker with colors.js (8.46KB) that could be used as a mobile device color chooser or an advanced color calculation tool. Be creative and use colors' or ColorPicker's clean, intuitive and convenient API to create your own great tools.

Some technical facts:

ColorPicker is faster and more efficient than most other tools of its kind due to a smart combination of some technics like: