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...)

.

-Test-

.

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':

its big variety of options and API for out of the box configuration for individual needs,

its compact design that tries to fit all possible situations while giving best overview over relevant data,

etc... play around with the demo to find out what ColorPicker provides...

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:

colors.js the brain that calculates all colors and color dependent components.Can be used separately to build your own color tool.colors.js can convert 182 different combinations of color spaces (rgb2HSV, RGB2hsl, cmyk2hsl, rgb2RGB, HEX2Lab, ...)

colorPicker.data.js the HTML, CSS (functional and visual UI) and 5 images including transparent cursor. All those can be customized. There are tools for customizations available, or it can be dropped for development or if there is custom components available

jsColor.js or jqColor.js the plain javaScript or jQuery implementation for out of the box usage of ColorPicker or for simple development for all your needs without having to dig deep into the rest of the code. See this as a simple API usage example for your implementations. Find single file versions in according folders.

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:

simple and effective DOM manipulation (fastest old school technics for broadest browser coverage)

strict separation of UI interactions, calculations and rendering

usage of requestAnimationFrame for optimized rendering speed

heaviest (pre-)calculations in non-critical situations

a smart layer rendering technic makes ColorPicker also small and compact (fast download of a single small file)

shared and pre-calculated resources (almost all functions, HTML, CSS, etc.) between instances makes processing way faster and needs less memory. A newly developed OOP design pattern makes privacy and reuse possible and results in a clean and non distracting API and data model.

Documentation: API and technical details

Chrome extension and old versions?

If you're looking for the Chrome extension and / or the old version of colorPicker then follow this link.

Tiny jQuery ColorPicker

Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...
There is a tiny jQuery version: TinyColorPicker, a 4.5KB small HSB color picker, 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 Tiny jQuery ColorPicker or Tiny jQuery ColorPicker on GitHub for details.