jQuery ColorPicker

Set the colorMode property of the jqxColorPicker. Author: http://jqwidgets.com

by Umair Rafiq

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div style="display:block;background:white;width:100%;height:100%">
<div id="colorPicker"></div>
<button id="addbutton" type="button">Add Color</button>
<div id="data"></div>

<div>

CSS

#data > div {
  height:20px;
}

JavaScript

var color = '000000';
var colorhex;

function getTextElementByColor(color) {
                if (color == 'transparent' || color.hex == "") {
                    return $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>transparent</div>");
                }
                var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>#" + color.hex + "</div>");
                var nThreshold = 105;
                var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
                var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
                return foreColor;
}

$("#colorPicker").on('colorchange', function (event) {
										if (event != null && 
                    event.args != null && 
                    event.args.color!= null)
                    {
                    	color = event.args.color;
 										}
                });

$("#colorPicker").jqxColorPicker({ color: "ffaabb", colorMode: 'hue', width: 220, height: 220});
                
                

 $("#addbutton").click(function(){
 var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>#" + color.hex + " rgb(" + color.r+ "," + color.g+ "," + color.b +") </div>");
                element.css('color',  getTextElementByColor(color));
                element.css('background', "#" + color.hex);
                
 $("#data").append(element);
 });