Color Picker - demo

colpick Color Picker / colpick.com

by Ben Clayton

HTML

<script src="//colpick.com/colpick/js/colpick.js"></script>
<script src="//colpick.com/js/plugin.js"></script>
<link rel="stylesheet" href="//colpick.com/colpick/css/colpick.css">
<div class="color-box"></div>

<label for=color>Color</label><input name=color type="text" class="color-num"></input><br>
<label for=bgcolor>BgColor</label><input name=bgcolor type="text" class="color-num"></input>

CSS

label {width:60px;display:inline-block;}
.color-num {
	margin:1px;
	padding:0;
	border:0;
	width:70px;
	height:20px;
	border-right:0px solid red;
    background-color:#DDDDDD;
	line-height:20px;
}
.color-box {
	width:30px;
	height:30px;
	margin:5px;
	border: 1px solid white;
}

JavaScript

$('.color-num').colpick({
	layout:'hex',
	submit:0,
	colorScheme:'light',
	onChange:function(hsb,hex,rgb,el,bySetColor) {
        $(el).css({'border-color':'#'+hex,'borderRightWidth':20+'px'});
 		// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
		if(!bySetColor) $(el).val(hex);
        if($(el).val()==''){$(el).css({'borderRightWidth':0+'px'});}
	}
}).keyup(function(){
	$(this).colpickSetColor(this.value);
});

$('.color-box').colpick({
	colorScheme:'light',
	layout:'rgbhex',
	color:'ff8800',
	onSubmit:function(hsb,hex,rgb,el) {
		$(el).css('background-color', '#'+hex);
		$(el).colpickHide();
	}
})
.css('background-color', '#ff8800');