JQUERY COLOR PICKER v2.0

• Fully Customize • Responsive • Mobile Friendly •

Paint own Background Color

Paint me

$(".cp-background").colorPicker({
	onSelect: function(ui, color){
		ui.css('background-color', color);
	}
});

Paint parent Background Color (Other element)

Paint my Parent

$(".cp-parent-background").colorPicker({
	onSelect: function(ui, color){
		ui.parents().filter('.well').css('background', c);
	}
});

<a href="#" class="cp-parent-background" 
	data-colors="colors-5x4.json" 
	data-itemwidth="50" 
	data-itemheight="30" 
	data-rowitem="5"
>See me</a>

Color Picker Alignment

Top Left Top Right Bottom Left Bottom Right

$(".cp-align").colorPicker({
	onSelect: function(ui, color){
		ui.parent().prev().css('color', c);
	}
});

<a href="#" class="cp-align" data-alignment="tl">Top left</a>
<a href="#" class="cp-align" data-alignment="tr">Top Right</a>
<a href="#" class="cp-align" data-alignment="bl">Bottom left</a>
<a href="#" class="cp-align" data-alignment="br">Bottom Right</a>

Paint Header / With New Colors

Paint Header

$(".cp-header").colorPicker({
	colors: 'colors.json',
	rowitem: 10,
	onSelect: function( ui, c ){
		$('.head-section').css('background-color', c);
		$('.navbar-nav > li.active > a').css('color', c);
	}
});

Getting Color Code / Different Type



$(".cp-get").colorPicker({
	onSelect: function(ui, color){
		$('.cp-set').val(c).css('color', c);
	}
});
<a href="#" class="cp-get" data-colorformat="hex">HEX</a>
<a href="#" class="cp-get" data-colorformat="rgb">RGB</a>
<a href="#" class="cp-get" data-colorformat="rgba">RGBA</a>
<a href="#" class="cp-get" data-colorformat="0x">0x</a>

Fullscreen and Insert code

See me

$(".cp-fullscreen").colorPicker({
	onSelect: function(ui, color){
		alert(color);
	}
});

<a href="#" class="cp-fullscreen" 
	data-insertcode="true"
	data-fullscreen="true"
>See me</a>

Usage

Default
	$(".selector").colorPicker({ 
		onSelect: function(ui, color){
			ui.css('color', c);
	});

Configuration

Configuration Sheet
Option Data-* Type Default Description
colors data-colors Object / String 66 colors You can load external JSON file. Just put JSON file path into here
customcolors data-customcolors Object [ ] You can add many color into here. ['#ffffff', '#eeeeee', '#dddddd', ... ]
itemheight data-itemheight Integer 20 Item height in Pixel (px)
itemwidth data-itemwidth Integer 20 Item width in Pixel (px)
insertcode data-insertcode Boolean false Show or Hide Insert color form
rowitem data-rowitem Integer 11 How much colors in a Row
buttonclose data-buttonclose Boolean true Show or Hide Close Button
buttonfullscreen data-buttonfullscreen Boolean true Show or Hide Fullscreen Button
fullscreen data-fullscreen Boolean false Open Color Picker in Fullscreen mode
esc data-esc Boolean true Press Esc key to close Color Picker in Fullscreen mode
alignment data-alignment String bl Alignment Color Picker with Handler Element. Supported values: 'bl', 'br', 'tl', 'tr'
colorformat data-colorformat String hex Returning Color Format. Supported values: 'hex', 'rgb', 'rgba', '0x'

Object configuration


$(".selector").colorPicker({
	colors: [
		'#ffffff', '#000000', '#eeece1', '#1f497d', '#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', '#ffff00',
		'#f2f2f2', '#7f7f7f', '#ddd9c3', '#c6d9f0', '#dbe5f1', '#f2dcdb', '#ebf1dd', '#e5e0ec', '#dbeef3', '#fdeada', '#fff2ca',
		'#d8d8d8', '#595959', '#c4bd97', '#8db3e2', '#b8cce4', '#e5b9b7', '#d7e3bc', '#ccc1d9', '#b7dde8', '#fbd5b5', '#ffe694',
		'#bfbfbf', '#3f3f3f', '#938953', '#548dd4', '#95b3d7', '#d99694', '#c3d69b', '#b2a2c7', '#a5d0e0', '#fac08f', '#f2c314',
		'#a5a5a5', '#262626', '#494429', '#17365d', '#366092', '#953734', '#76923c', '#5f497a', '#92cddc', '#e36c09', '#c09100',
		'#7f7f7f', '#0c0c0c', '#1d1b10', '#0f243e', '#244061', '#632423', '#4f6128', '#3f3151', '#31859b', '#974806', '#7f6000'
	],
	customcolors: 		[],
	itemheight: 		20,
	itemwidth: 			20,
	insertcode: 		false,
	rowitem: 			11,
	buttonclose: 		true,
	buttonfullscreen: 	true,
	fullscreen: 		false,
	esc: 				true,
	alignment: 			'bl',
	colorformat: 		'hex',
	onSelect: 			function(ui, color){ console.log( color ); }
});

Data-* attribute configuration


<button class="colorpicker" type="button"
	data-colors="colors.json"  <!-- OR ['#ffffff', '#eeeeee', '#dddddd'] -->
	data-customcolors="['#ffffff', '#eeeeee', '#dddddd']"
	data-itemheight="25"
	data-itemwidth="25"
	data-insertcode="true"
	data-rowitem="10"
	data-buttonclose="false"
	data-buttonfullscreen="false"
	data-fullscreen="false"
	data-esc="false"
	data-alignment="tl"
	data-colorformat="rgb"	
>Color Picker</button>

MY OTHER WORKS

Thanks to Bootstrap for the great CSS Framework

Thanks to Font Awesome for the great icon library

Thanks to Google Fonts for the great font library