colpick - A jQuery Color Picker

colpick is a simple Photoshop-style color picker jQuery plugin. Its interface is familiar for most users and it's also very lightweight loading less than 30 KB to the browser.

• No images! Just a JS and a CSS file
• Very intuitive Photoshop-like interface
• Light and dark easy-to-customize CSS3 skins
• Only 29 KB total, even less if minified and gziped
• Works and looks nice even on IE7
• Extremely easy to implement

Installation

Add colpick to your project using your the tool of you choice or download the files.

Bower

bower install jquery-colpick --save

npm

npm install jquery-colpick --save

Usage

Include colpick.js and colpick.css to into your application. Make sure you have included jQuery (v1.7.0+) as well.

<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>

Browserify/Node

Require the module in your application. Don't forget to include the css file as well.

require('jquery-colpick');

Now you may call the colpick method on any jQuery object to create a color picker. By default you get a dropdown color picker.

<button id="colorpicker">Show Color Picker</button>
$('#colorpicker').colpick();

For more examples see Usage examples.

##Options##

Option	Type	Description
flat	boolean	Flat mode just displays the color picker in place, always visible, with no show/hide behavior. Use it with colpickShow() and colpickHide() to define your own show/hide behavior or if you want the picker to be always visible. Default: false
layout	string	Name of the color picker layout to use. Posible values are 'full' (RGB, HEX, and HSB fields), 'rgbhex' (no HSB fields) and hex (no HSB, no RGB). You can see the full layout at the top of the page. rgbhex and hex layouts are shown in the examples below. Default: 'full'
submit	boolean	If false the picker has no submit or OK button and no previous color viewer. If false use onChange function to get the picked color. Default: true
colorScheme	string	The color scheme to use for the picker, 'light' or 'dark'. Default: 'light'
submitText	string	The text to show on the submit button if active. Default: 'OK'
color	string or object	Default color. Hex string (eg. 'ff0000') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:0, s:100, b:100}). String 'auto' to read color from the element's value attribute. Default: 'auto'
showEvent	string	Event that shows the color picker. Default: 'click'
livePreview	boolean	If true color values change live while the user moves a selector or types in a field. Turn it off to improve speed. Default: true
polyfill	boolean or function	If true, the color picker is only activated when no native browser behavior is available. Use a function (should receive a colorpicker DOM object) to determine the option dynamically (e.g. by user-agent). Default: false
appendTo	DOM element	Append the picker to the specified DOM element. Defaults: flat: true -> this (the element itself) flat: false -> document.body
style	object	Set additional styles to the picker. Will accept any object that could be passed to jQuery's .css method. Default: null
onBeforeShow	function	Callback function triggered before the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.
onShow	function	Callback function triggered when the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.
onHide	function	Callback function triggered when the color picker is hidden. Use it to define custom behavior. Should receive a colorpicker DOM object.
onChange	function	Callback function triggered when the color is changed. This is the function that allows you to get the color picked by the user whenever it changes, whithout the user pressing the OK button. Should receive: HSB object (eg. {h:0, s:100, b:100}) HEX string (with no #) RGB object(eg. {r:255, g:0, b:0}) el element, the parent element on which colorpicker() was called. Use it to modify this parent element on change (see first example below). bySetColor flag: if true, the onChange callback was fired by the colpickSetColor function and not by the user changing the color directly in the picker. There are some cases in which you'll want a different behaviour in this case (see last example).
onSubmit	function	Callback function triggered when the color is chosen by the user, using the OK button. Should receive exactly the same as onChange. It's never fired if using submit:0 option.

##jQuery.fn Functions##

Function	Description
colpick(options)	The main function used to create a color picker.
colpickHide()	Hides the color picker. Accepts no arguments. Use it to hide the picker with an external trigger.
colpickShow()	Shows the color picker. Accepts no arguments. Use it to show the picker with an external trigger.
colpickSetColor(col,setCurrent)	Use it to set the picker color. The onChange callback is fired with bySetColor set to true. Parameters: col: a hex string (eg. 'd78b5a') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:150, s:50, b:50}) setCurrent: If true the color picker's current color (the one to the right in layouts with submit button) is set in addition to the new color, which is always set.

##jQuery Functions##

Function	Description
$.colpick.rgbToHex(rgb)	Receives an object like {r:255, g:0, b:0} and returns the corresponding HEX string (with no #).
$.colpick.rgbToHsb(rgb)	Receives an object like {r:255, g:0, b:0} and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range.
$.colpick.hsbToHex(hsb)	Receives an object like {h:0, s:100, b:100} and returns the corresponding HEX string (with no #).
$.colpick.hsbToRgb(hsb)	Receives an object like {h:0, s:100, b:100} and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range.
$.colpick.hexToHsb(hex)	Receives a hex string with no # and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range.
$.colpick.hexToRgb(hex)	Receives a hex string with no # and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range.

##Layouts##

Layout	Image
full:
rgbhex:
hex:

##Changes to josedvq's version##

• Polyfill: New option 'polyfill' to work with native color input fields
• Auto color: Get the default color from an element's 'value' attribute using jQuery function .val()
• Custom parent: New option 'appendTo' to specify which element to append the picker to (PR #44)
• CSS styles: New option 'styles' to specify additional styles to be set on the picker (PR #44)
• UMD compatibility: Uses an UMD style closure to be loadable with AMD loaders (require.js) or CommonJS
• 3 character hex support: Added support for entering three character hex codes as specificied in the CSS 2.1 spec (PR #43)
• Fixed Issues: #16, #17, PR#58

Dual licensed under the MIT and GPLv2 licenses.

Fork of josedvq's colpick
Based on Stefan Petre's color picker