Skip to content

Lightweight jQuery Color Picker plugin with RGB, HSB and HEX fields, several skins and layouts.

License

Notifications You must be signed in to change notification settings

mrgrain/colpick

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
flatboolean 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
layoutstring 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'
submitboolean 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
colorSchemestring The color scheme to use for the picker, 'light' or 'dark'. Default: 'light'
submitTextstring The text to show on the submit button if active. Default: 'OK'
colorstring 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'
showEventstring Event that shows the color picker. Default: 'click'
livePreviewboolean 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
polyfillboolean 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
appendToDOM element Append the picker to the specified DOM element.
Defaults:
  • flat: true -> this (the element itself)
  • flat: false -> document.body
styleobject Set additional styles to the picker. Will accept any object that could be passed to jQuery's .css method. Default: null
onBeforeShowfunction Callback function triggered before the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.
onShowfunction Callback function triggered when the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.
onHidefunction Callback function triggered when the color picker is hidden. Use it to define custom behavior. Should receive a colorpicker DOM object.
onChangefunction 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).
onSubmitfunction 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: colpick full layout
rgbhex: colpick rgbhex layout
hex: colpick hex layout

##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

About

Lightweight jQuery Color Picker plugin with RGB, HSB and HEX fields, several skins and layouts.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 69.7%
  • CSS 24.1%
  • HTML 6.2%