Color picker

color-picker.markdown

Color picker

Pen is a demonstration of use color picker to change the background color and text color of the element and also about vertical and horizontal centered.

A Pen by Jakub Turský on CodePen.

License.

index.html

        <!-- =========================
            SIDEBAR -> SETTINGS    
        ============================== -->
        <aside id="sidebar">
            <button id="nav-btn">
            <i class="fa-set fa-cogs"></i>
            </button>
            <h3>Settings</h3>
            <div id="sidecontent">
                <div class="pcolor">
                    <p>Elements colour:</p>
                    <input type="text" id="picker-elements-colour" class="picker" value="933132"></input>
                </div>
                <div class="pcolor">
                    <p>Text colour:</p>
                    <input type="text" id="picker-text-colour" class="textpicker picker" value="ffffff"></input>
                </div>
                <div class="pcolor">
                    <p class="colorsch">Colour scheme:</p>
                    <ul class="colorScheme">
                        <li class="red"></li>
                        <li class="blue"></li>
                        <li class="green"></li>
                        <li class="yellow"></li>
                        <li class="purple"></li>
                        <li class="orange"></li>
                    </ul>
                </div>
            </div>
        </aside>
        <!-- =========================
            END SIDEBAR -> SETTINGS    
        ============================== -->

        <section class="container">
            <div class="Center-Container is-Table">
              <div class="Table-Cell">
                <div class="Center-Block">
                    <h4 class="Title">Background color/ color</h4>
                    <p>Using the settings that are located on the left top of the window you can change the text color or background color.</p>
                    <p>Your color scheme is stored in the LS, this means that when you return to the page you'll see your colors.</p>
                </div>
              </div>
            </div>
        </section>

        <footer>
    <div class="about-me-img">
      <a href="http://jakubtursky.studenthosting.sk/?lang=en">
        <img src="https://www.mediafire.com/convkey/722e/qk13jrjdq7z45k1zg.jpg" alt="Jakub Turský" width="110px" height="110px">
      </a>
        <div class="authorWindowWrapper">
            <div class="authorWindow">
              <p>Responsive modal window <br>
                Created by <a href="http://jakubtursky.studenthosting.sk/?lang=en"><strong>Jakub Turský</strong></a> <br>
                For next info about me you can visit me site (click on my image, or name)
              </p>
            </div>
        </div>
  </div>
</footer>

script.js

/*
colpick Color Picker
Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses

For usage and examples: colpick.com/plugin
 */

(function ($) {
	var colpick = function () {
		var
			tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>',
			defaults = {
				showEvent: 'click',
				onShow: function () {},
				onBeforeShow: function(){},
				onHide: function () {},
				onChange: function () {},
				onSubmit: function () {},
				colorScheme: 'light',
				color: '3289c7',
				livePreview: true,
				flat: false,
				layout: 'full',
				submit: 1,
				submitText: 'OK',
				height: 156
			},
			//Fill the inputs of the plugin
			fillRGBFields = function  (hsb, cal) {
				var rgb = hsbToRgb(hsb);
				$(cal).data('colpick').fields
					.eq(1).val(rgb.r).end()
					.eq(2).val(rgb.g).end()
					.eq(3).val(rgb.b).end();
			},
			fillHSBFields = function  (hsb, cal) {
				$(cal).data('colpick').fields
					.eq(4).val(Math.round(hsb.h)).end()
					.eq(5).val(Math.round(hsb.s)).end()
					.eq(6).val(Math.round(hsb.b)).end();
			},
			fillHexFields = function (hsb, cal) {
				$(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb));
			},
			//Set the round selector position
			setSelector = function (hsb, cal) {
				$(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100}));
				$(cal).data('colpick').selectorIndic.css({
					left: parseInt($(cal).data('colpick').height * hsb.s/100, 10),
					top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10)
				});
			},
			//Set the hue selector position
			setHue = function (hsb, cal) {
				$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h/360, 10));
			},
			//Set current and new colors
			setCurrentColor = function (hsb, cal) {
				$(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb));
			},
			setNewColor = function (hsb, cal) {
				$(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb));
			},
			//Called when the new color is changed
			change = function (ev) {
				var cal = $(this).parent().parent(), col;
				if (this.parentNode.className.indexOf('_hex') > 0) {
					cal.data('colpick').color = col = hexToHsb(fixHex(this.value));
					fillRGBFields(col, cal.get(0));
					fillHSBFields(col, cal.get(0));
				} else if (this.parentNode.className.indexOf('_hsb') > 0) {
					cal.data('colpick').color = col = fixHSB({
						h: parseInt(cal.data('colpick').fields.eq(4).val(), 10),
						s: parseInt(cal.data('colpick').fields.eq(5).val(), 10),
						b: parseInt(cal.data('colpick').fields.eq(6).val(), 10)
					});
					fillRGBFields(col, cal.get(0));
					fillHexFields(col, cal.get(0));
				} else {
					cal.data('colpick').color = col = rgbToHsb(fixRGB({
						r: parseInt(cal.data('colpick').fields.eq(1).val(), 10),
						g: parseInt(cal.data('colpick').fields.eq(2).val(), 10),
						b: parseInt(cal.data('colpick').fields.eq(3).val(), 10)
					}));
					fillHexFields(col, cal.get(0));
					fillHSBFields(col, cal.get(0));
				}
				setSelector(col, cal.get(0));
				setHue(col, cal.get(0));
				setNewColor(col, cal.get(0));
				cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]);
			},
			//Change style on blur and on focus of inputs
			blur = function (ev) {
				$(this).parent().removeClass('colpick_focus');
			},
			focus = function () {
				$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
				$(this).parent().addClass('colpick_focus');
			},
			//Increment/decrement arrows functions
			downIncrement = function (ev) {
				ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
				var field = $(this).parent().find('input').focus();
				var current = {
					el: $(this).parent().addClass('colpick_slider'),
					max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
					y: ev.pageY,
					field: field,
					val: parseInt(field.val(), 10),
					preview: $(this).parent().parent().data('colpick').livePreview
				};
				$(document).mouseup(current, upIncrement);
				$(document).mousemove(current, moveIncrement);
			},
			moveIncrement = function (ev) {
				ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10))));
				if (ev.data.preview) {
					change.apply(ev.data.field.get(0), [true]);
				}
				return false;
			},
			upIncrement = function (ev) {
				change.apply(ev.data.field.get(0), [true]);
				ev.data.el.removeClass('colpick_slider').find('input').focus();
				$(document).off('mouseup', upIncrement);
				$(document).off('mousemove', moveIncrement);
				return false;
			},
			//Hue slider functions
			downHue = function (ev) {
				ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
				var current = {
					cal: $(this).parent(),
					y: $(this).offset().top
				};
				$(document).on('mouseup touchend',current,upHue);
				$(document).on('mousemove touchmove',current,moveHue);
				
				var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
				change.apply(
					current.cal.data('colpick')
					.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10))
						.get(0),
					[current.cal.data('colpick').livePreview]
				);
				return false;
			},
			moveHue = function (ev) {
				var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
				change.apply(
					ev.data.cal.data('colpick')
					.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10))
						.get(0),
					[ev.data.preview]
				);
				return false;
			},
			upHue = function (ev) {
				fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
				fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
				$(document).off('mouseup touchend',upHue);
				$(document).off('mousemove touchmove',moveHue);
				return false;
			},
			//Color selector functions
			downSelector = function (ev) {
				ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
				var current = {
					cal: $(this).parent(),
					pos: $(this).offset()
				};
				current.preview = current.cal.data('colpick').livePreview;
				
				$(document).on('mouseup touchend',current,upSelector);
				$(document).on('mousemove touchmove',current,moveSelector);

				var payeX,pageY;
				if(ev.type == 'touchstart') {
					pageX = ev.originalEvent.changedTouches[0].pageX,
					pageY = ev.originalEvent.changedTouches[0].pageY;
				} else {
					pageX = ev.pageX;
					pageY = ev.pageY;
				}

				change.apply(
					current.cal.data('colpick').fields
					.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end()
					.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
					.get(0),
					[current.preview]
				);
				return false;
			},
			moveSelector = function (ev) {
				var payeX,pageY;
				if(ev.type == 'touchmove') {
					pageX = ev.originalEvent.changedTouches[0].pageX,
					pageY = ev.originalEvent.changedTouches[0].pageY;
				} else {
					pageX = ev.pageX;
					pageY = ev.pageY;
				}

				change.apply(
					ev.data.cal.data('colpick').fields
					.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end()
					.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10))
					.get(0),
					[ev.data.preview]
				);
				return false;
			},
			upSelector = function (ev) {
				fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
				fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
				$(document).off('mouseup touchend',upSelector);
				$(document).off('mousemove touchmove',moveSelector);
				return false;
			},
			//Submit button
			clickSubmit = function (ev) {
				var cal = $(this).parent();
				var col = cal.data('colpick').color;
				cal.data('colpick').origColor = col;
				setCurrentColor(col, cal.get(0));
				cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el);
			},
			//Show/hide the color picker
			show = function (ev) {
				// Prevent the trigger of any direct parent
				ev.stopPropagation();
				var cal = $('#' + $(this).data('colpickId'));
				cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]);
				var pos = $(this).offset();
				var top = pos.top + this.offsetHeight;
				var left = pos.left;
				var viewPort = getViewport();
				var calW = cal.width();
				if (left + calW > viewPort.l + viewPort.w) {
					left -= calW;
				}
				cal.css({left: left + 'px', top: top + 'px'});
				if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) {
					cal.show();
				}
				//Hide when user clicks outside
				$('html').mousedown({cal:cal}, hide);
				cal.mousedown(function(ev){ev.stopPropagation();})
			},
			hide = function (ev) {
				if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
					ev.data.cal.hide();
				}
				$('html').off('mousedown', hide);
			},
			getViewport = function () {
				var m = document.compatMode == 'CSS1Compat';
				return {
					l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
					w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
				};
			},
			//Fix the values if the user enters a negative or high value
			fixHSB = function (hsb) {
				return {
					h: Math.min(360, Math.max(0, hsb.h)),
					s: Math.min(100, Math.max(0, hsb.s)),
					b: Math.min(100, Math.max(0, hsb.b))
				};
			}, 
			fixRGB = function (rgb) {
				return {
					r: Math.min(255, Math.max(0, rgb.r)),
					g: Math.min(255, Math.max(0, rgb.g)),
					b: Math.min(255, Math.max(0, rgb.b))
				};
			},
			fixHex = function (hex) {
				var len = 6 - hex.length;
				if (len > 0) {
					var o = [];
					for (var i=0; i<len; i++) {
						o.push('0');
					}
					o.push(hex);
					hex = o.join('');
				}
				return hex;
			},
			restoreOriginal = function () {
				var cal = $(this).parent();
				var col = cal.data('colpick').origColor;
				cal.data('colpick').color = col;
				fillRGBFields(col, cal.get(0));
				fillHexFields(col, cal.get(0));
				fillHSBFields(col, cal.get(0));
				setSelector(col, cal.get(0));
				setHue(col, cal.get(0));
				setNewColor(col, cal.get(0));
			};
		return {
			init: function (opt) {
				opt = $.extend({}, defaults, opt||{});
				//Set color
				if (typeof opt.color == 'string') {
					opt.color = hexToHsb(opt.color);
				} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
					opt.color = rgbToHsb(opt.color);
				} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
					opt.color = fixHSB(opt.color);
				} else {
					return this;
				}
				
				//For each selected DOM element
				return this.each(function () {
					//If the element does not have an ID
					if (!$(this).data('colpickId')) {
						var options = $.extend({}, opt);
						options.origColor = opt.color;
						//Generate and assign a random ID
						var id = 'collorpicker_' + parseInt(Math.random() * 1000);
						$(this).data('colpickId', id);
						//Set the tpl's ID and get the HTML
						var cal = $(tpl).attr('id', id);
						//Add class according to layout
						cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
						//Add class if the color scheme is not default
						if(options.colorScheme != 'light') {
							cal.addClass('colpick_'+options.colorScheme);
						}
						//Setup submit button
						cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
						//Setup input fields
						options.fields = cal.find('input').change(change).blur(blur).focus(focus);
						cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal);
						//Setup hue selector
						options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
						options.selectorIndic = options.selector.find('div.colpick_selector_outer');
						//Store parts of the plugin
						options.el = this;
						options.hue = cal.find('div.colpick_hue_arrs');
						huebar = options.hue.parent();
						//Paint the hue bar
						var UA = navigator.userAgent.toLowerCase();
						var isIE = navigator.appName === 'Microsoft Internet Explorer';
						var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0;
						var ngIE = ( isIE && IEver < 10 );
						var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000'];
						if(ngIE) {
							var i, div;
							for(i=0; i<=11; i++) {
								div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";');
								huebar.append(div);
							}
						} else {
							stopList = stops.join(',');
							huebar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background: -o-linear-gradient(top,'+stopList+'); background: -ms-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); -webkit-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
						}
						cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
						options.newColor = cal.find('div.colpick_new_color');
						options.currentColor = cal.find('div.colpick_current_color');
						//Store options and fill with default color
						cal.data('colpick', options);
						fillRGBFields(options.color, cal.get(0));
						fillHSBFields(options.color, cal.get(0));
						fillHexFields(options.color, cal.get(0));
						setHue(options.color, cal.get(0));
						setSelector(options.color, cal.get(0));
						setCurrentColor(options.color, cal.get(0));
						setNewColor(options.color, cal.get(0));
						//Append to body if flat=false, else show in place
						if (options.flat) {
							cal.appendTo(this).show();
							cal.css({
								position: 'relative',
								display: 'block'
							});
						} else {
							cal.appendTo(document.body);
							$(this).on(options.showEvent, show);
							cal.css({
								position:'absolute'
							});
						}
					}
				});
			},
			//Shows the picker
			showPicker: function() {
				return this.each( function () {
					if ($(this).data('colpickId')) {
						show.apply(this);
					}
				});
			},
			//Hides the picker
			hidePicker: function() {
				return this.each( function () {
					if ($(this).data('colpickId')) {
						$('#' + $(this).data('colpickId')).hide();
					}
				});
			},
			//Sets a color as new and current (default)
			setColor: function(col, setCurrent) {
				setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
				if (typeof col == 'string') {
					col = hexToHsb(col);
				} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
					col = rgbToHsb(col);
				} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
					col = fixHSB(col);
				} else {
					return this;
				}
				return this.each(function(){
					if ($(this).data('colpickId')) {
						var cal = $('#' + $(this).data('colpickId'));
						cal.data('colpick').color = col;
						cal.data('colpick').origColor = col;
						fillRGBFields(col, cal.get(0));
						fillHSBFields(col, cal.get(0));
						fillHexFields(col, cal.get(0));
						setHue(col, cal.get(0));
						setSelector(col, cal.get(0));
						
						setNewColor(col, cal.get(0));
						cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 1]);
						if(setCurrent) {
							setCurrentColor(col, cal.get(0));
						}
					}
				});
			}
		};
	}();
	//Color space convertions
	var hexToRgb = function (hex) {
		var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
		return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
	};
	var hexToHsb = function (hex) {
		return rgbToHsb(hexToRgb(hex));
	};
	var rgbToHsb = function (rgb) {
		var hsb = {h: 0, s: 0, b: 0};
		var min = Math.min(rgb.r, rgb.g, rgb.b);
		var max = Math.max(rgb.r, rgb.g, rgb.b);
		var delta = max - min;
		hsb.b = max;
		hsb.s = max != 0 ? 255 * delta / max : 0;
		if (hsb.s != 0) {
			if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
			else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
			else hsb.h = 4 + (rgb.r - rgb.g) / delta;
		} else hsb.h = -1;
		hsb.h *= 60;
		if (hsb.h < 0) hsb.h += 360;
		hsb.s *= 100/255;
		hsb.b *= 100/255;
		return hsb;
	};
	var hsbToRgb = function (hsb) {
		var rgb = {};
		var h = hsb.h;
		var s = hsb.s*255/100;
		var v = hsb.b*255/100;
		if(s == 0) {
			rgb.r = rgb.g = rgb.b = v;
		} else {
			var t1 = v;
			var t2 = (255-s)*v/255;
			var t3 = (t1-t2)*(h%60)/60;
			if(h==360) h = 0;
			if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
			else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
			else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
			else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
			else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
			else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
			else {rgb.r=0; rgb.g=0;	rgb.b=0}
		}
		return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
	};
	var rgbToHex = function (rgb) {
		var hex = [
			rgb.r.toString(16),
			rgb.g.toString(16),
			rgb.b.toString(16)
		];
		$.each(hex, function (nr, val) {
			if (val.length == 1) {
				hex[nr] = '0' + val;
			}
		});
		return hex.join('');
	};
	var hsbToHex = function (hsb) {
		return rgbToHex(hsbToRgb(hsb));
	};
	$.fn.extend({
		colpick: colpick.init,
		colpickHide: colpick.hidePicker,
		colpickShow: colpick.showPicker,
		colpickSetColor: colpick.setColor
	});
	$.extend({
		colpick:{ 
			rgbToHex: rgbToHex,
			rgbToHsb: rgbToHsb,
			hsbToHex: hsbToHex,
			hsbToRgb: hsbToRgb,
			hexToHsb: hexToHsb,
			hexToRgb: hexToRgb
		}
	});
})(jQuery);



/* INITIALIZATION COLOURPICKER FOR ELEMENTS
    *********************************************/
    var newColorColorPickElements = $('.Center-Block, #sidebar h3, #nav-btn, .authorWindow, .about-me-img');

    $('#picker-elements-colour').colpick({
        layout: 'hex',
        submit: 1,
        colorScheme: 'dark',
        onChange: function(hsb, hex, rgb, el, bySetColor) {
            $(el).css('border-color', '#' + hex);
            setNewColorUI(hex);
            if (!bySetColor) $(el).val(hex);
        }
    }).keyup(function() {
        setNewColorUI(this.value);
        $(this).colpickSetColor(this.value);
    });

    function setNewColorUI(newColor) {
        newColorColorPickElements.css('background', '#' + newColor);
        if(!(/Trident\/7\./).test(navigator.userAgent)) {
            if (localStorage.getItem('elementsColour') != newColor) localStorage.setItem("elementsColour", newColor);
        }
    }



    /* INITIALIZATION COLOURPICKER FOR TEXTs
    *********************************************/
    var  newColorColorPickText = $('.Center-Block h4, .Center-Block p');
    $('#picker-text-colour').colpick({
        layout: 'hex',
        submit: 1,
        colorScheme: 'dark',
        onChange: function(hsb, hex, rgb, el, bySetColor) {
            $(el).css('border-color', '#' + hex);
            setNewColorText(hex);
            if (!bySetColor) $(el).val(hex);
        }
    }).keyup(function() {
        setNewColorText(this.value);
        $(this).colpickSetColor(this.value);
    });


    function setNewColorText(newColor) {
        newColorColorPickText.css('color', '#' + newColor);
        if(!(/Trident\/7\./).test(navigator.userAgent)) {
            if (localStorage.getItem('textColour') != newColor) localStorage.setItem("textColour", newColor);
        }
    }


    /* CHOOSE COLOUR  SCHEME
    *********************************************/
    var chooseColor,
        newColor,
        newKnob,
        newVolumeSlider,
        initializationColor = $('.Center-Block');

    $('.colorScheme li').bind('click', function() {
        chooseColor = $(this).attr("class");
        chooseColourScheme(chooseColor);
    });


    function chooseColourScheme(chooseColor){
        switch (chooseColor) {
            case "red":
                newColor = "#933132";
                break;
            case "blue":
                newColor = "#0e324d";
                break;
            case "green":
                newColor = "#4A5F67";
                break;
            case "yellow":
                newColor = "#c2931d";
                break;
            case "purple":
                newColor = "#443266";
                break;
            case "orange":
                newColor = "#b0551c";
                break;
        }
        initializationColor.css('background', newColor);
        newColorColorPickText.css('color', '#fff');
        $('#picker-elements-colour').colpickSetColor(newColor, true);
        if(!(/Trident\/7\./).test(navigator.userAgent)) {
            if (localStorage.getItem('schemeColour') != chooseColor) localStorage.setItem("schemeColour", chooseColor);
        }
    }

    /* GET OWN SCHEME FROM LOCALSTORAGE
    *********************************************/
    function getLocalStorage(){
        if (!(/Trident\/7\./).test(navigator.userAgent)) {
            if (typeof(Storage) != "undefined") {
                if (localStorage.getItem('elementsColour')) {
                    setNewColorUI(localStorage.getItem('elementsColour'));
                    $('#picker-elements-colour').colpickSetColor(localStorage.getItem('elementsColour'), true);
                }
                if (localStorage.getItem('textColour')) {
                    setNewColorText(localStorage.getItem('textColour'));
                    $('#picker-text-colour').colpickSetColor(localStorage.getItem('textColour'), true);
                }
            }
        }
    }

    getLocalStorage();



    /* TOGGLE SIDEBAR MENU
    *********************************************/
    $('#nav-btn').click(function() {
        toggleMenu(700);
    });

    var settingButton = $('#nav-btn'),
        settingButtonIcon = $('#nav-btn i');

    function toggleMenu(speed) {
        $('#nav-btn, #sidebar').toggleClass('active', speed, "easeOutQuint");
        if (settingButtonIcon.hasClass('fa-cogs')){
            settingButtonIcon.removeClass('fa-cogs').addClass('fa-close');
            settingButton.css('cursor', 'pointer');
        }
        else {
            settingButtonIcon.delay(3000).removeClass('fa-close').addClass('fa-cogs');
            settingButton.css('cursor', '');
        }
    }

    /* AUTHOR LINK
    ********************************************************/
    $('.about-me-img img, .authorWindowWrapper').hover(function(){
        $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
    }, function(){
    });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

/**********************************************************************************************/
/*    PRIMARY STRUCTURE                                     									                          
/**********************************************************************************************/

/* CSS Reset
================================================== */
html, body, div, span, h1, h6, p, a, ul, li, audio {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	line-height: 100%;
	vertical-align: baseline;
}

html, body {
	width: 100%;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	background: linear-gradient(rgba(49, 77, 94, 1) 0%, rgba(49, 77, 94, 0.22) 100%);
	color: #C8C7C8;
	font: 20px/24px "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: 300;
	background-image: url('https://www.mediafire.com/convkey/f7a6/6y8dh37awomsdgezg.jpg');
	line-height: 1;
	margin: 0;
	padding: 0;
}

*{
	z-index: 10;
}

ul {
	list-style: none;
}

.clearBoth {
	clear: both;
}


/* Typography
================================================== */
h1, h6, p {
	color: white;
	font-weight: 400;
}

h1 {
	font-size: 60px !important;
	margin: 0px 0 0 !important;
	color: rgba(255, 255, 255, 0.9);
}

.Center-Block .Title {
  padding: 0;
  margin: 0 0 .5em;
  line-height: 1em;
}


p {
	font-size: 18px;
	margin: 0 0 20px;
	line-height: 24px;
}


/* Links
================================================== */
a, a:visited {
	outline: 0;
	text-decoration: underline;
}

a:hover, a:focus {
	color: white;
}

p a, p a:visited {
	line-height: inherit;
}

.Clear {
  clear: both;
}

/**********************************************************************************************/
/*   	END PRIMARY STRUCTURE                                     									                          
/**********************************************************************************************/

/**********************************************************************************************/
/*    BODY CONTENT                                   									                          
/**********************************************************************************************/

/* Container
================================================== */


.container {
width: 100%;
  margin: 0 auto;
  height: 100%;
}

.Center-Container.is-Table { display: table; }

.Center-Container {
    width: 500px;
  position: relative;
  margin: 20px auto 40px;
  clear: both;
  height: 100%;
}

.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}


.Center-Block .Title {
  padding: 0;
  margin: 0 0 1em;
  line-height: 1em;
  text-align: center;
  font-size: 24px;
}
.Center-Block .Title {
	text-align: center;
}

.Center-Block {
  margin: 0 auto;
  background: #933132;
  color: #FFF;
  padding: 30px;
}


@media (max-width: 600px) {
	.Center-Container {
		width: 300px;
	}
}


/* Button -> Settings, Info
================================================== */
.buttonClass {
	outline: none;
	font-weight: 600;
	cursor: url("../images/cursorinfo.png"), auto;
	border: none;
	color: #fff;
	position: absolute;
	background: #933132;
	height: 60px;
	width: 60px;
	top: 80px;
	left: 10px;
	border: 1px solid transparent;
	z-index: 12;
}

.fa-info {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	font-size: 40px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.buttonClose{
	padding: 10px 20px;
	outline: none;
	font-weight: bold;
	cursor: pointer;
	border: none;
	border-radius: 3px;
	font-size: 20px;
	font-family: 'Open Sans';
	color: #fff;
	background: #933132;
	margin-top: 15px;
	transition: all 0.5s ease;
}


.buttonClose:hover{
	transition: all 0.1s ease;
	background: black;
}



/* Sidebar Settings
================================================== */

#sidebar {
	position: absolute;
	left: -399px;
	width: 350px;
	top: 0;
	background-color: #333;
	z-index: 30;
}
#sidebar.active {
    left: 0
}
    
#nav-btn {
	position: absolute;
	right: -120px;
	border: 0;
	outline: none;
	top: 10px;
	background: #933132;
	height: 60px;
	width: 60px;
	color: rgba(255, 255, 255, 1);
	cursor: url('https://www.mediafire.com/convkey/063a/14xf6o6fk3w40opzg.jpg'), auto;
}

#nav-btn:hover{
	background: white;
	color: black;
}

#nav-btn > div {
    position: relative;
    height: 4px;
    width: 35px;
    margin: 7px auto;
    background-color: #FFF;
    border-radius: 5px
}
    
#nav-btn.active {
	right: 0;
	top: 0;
	background: rgba(147, 49, 50, 1);
	margin-top: 0px;
	color: rgba(255, 255, 255, 0.9);
}


.buttonClass:hover{
	background: white;
	color: black;
}



.fa-set{
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 35px;
	vertical-align: middle;
}


#sidebar h3{
	background: #933132;
	text-align: center;
	margin: 0;
	height: 60px;
	font-size: 28px;
	line-height: 60px;
	margin-top: 0px;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #FFFFFF;
}


.picker {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	height: 50px;
	float: left;
	margin-left: 20px;
	padding-left: 10px;
	color: black;
	background: white;
	width: 80px;
	height: 40px;
	border-right: 40px solid rgb(147, 49, 50);
}

.textpicker{
	border-right: 40px solid rgba(229, 229, 229, 0.7);
}

.pcolor{
	height: 50px;
	margin-bottom: 20px;
}


#sidecontent{
	margin: 50px 0px 80px 20px;
	min-height: 100px;
}


#sidecontent p{
	margin: 0;
	float: left;
	line-height: 35px;
	font-size: 22px;
	font-family: 'Open Sans';
	color: #FFFFFF;
}


.colorScheme{
	width: 360px;;
}

.colorScheme li{
	width: 40px;
	height: 40px;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.colorScheme li:hover{
	transform: scale(1.05);
}

.colorsch{
	width: 100%;
	margin-bottom: 10px !important;
}


.red{
	background: #933132;
}

.blue{
	background: #0e324d;
}

.green{
	background: #4A5F67;
}

.purple{
	background: #443266;
}

.yellow{
	background: #c2931d;
}

.orange{
	background: #b0551c;
}


span.rand{
	position: relative;
	float: left;
	width: 60px;
	height: 60px;
	background: rgb(147, 49, 50);
}


.fa-rand, .fa-ey, .fa-fil{
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	font-size: 30px;
	line-height: 60px;
	text-align: center;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.9);
}

.fa-rand:hover, .fa-ey:hover, .fa-fil:hover{
	background: white;
	color: black !important;
	-webkit-transition: all .15s ease-in-out;
}

.tracklist .fa-play{
	font-size: 18px !important;
}


/**********************************************************************************************/
/*   	END BODY CONTENT                                   									                          
/**********************************************************************************************/


/* AUTHOR LINK */


footer{
  z-index: 100;
  padding-bottom: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer p {
color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  opacity: 0;
  font-family: 'Open Sans';
  width: 100%;
  line-height: 25px;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  margin: 0;
}

footer .authorWindow a{
  text-decoration: none;
}

footer p strong {
    color: rgba(255, 255, 255, 0.9);
  margin-left: 5px;
  cursor:pointer;
}

.about-me-img {
  width: 120px;
  height: 120px;
  left: 10px;
  /* bottom: 30px; */
  position: relative;
  border-radius: 100px;
    border: 1px solid #FFFFFF;
    background: #4A5F67;
}


.about-me-img img {
  margin-top: 10px;
  margin-left: 5px;
}


.authorWindow{
    width: 560px;
  background: #4A5F67;
  padding: 22px 20px 22px 20px;
  border-radius: 5px;
    overflow: hidden;
}

.authorWindowWrapper{
  display:none; 
  left: 110px;
  bottom: 0;
  padding-left: 30px;
  position: absolute;
}


.trans{
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  transition: all 500ms ease;
}

@media screen and (max-width: 680px) {
    .authorWindow{
         width: 180px;
    }

    .authorWindowWrapper{
          bottom: -50px;
    }

    footer p{
          font-size: 14px;
    }
}










/**********************************************************************************************/
/*    									COLOR PICKER                                          */                           
/**********************************************************************************************/


/*Main container*/
.colpick {
	position: absolute;
	width: 346px;
	height: 170px;
	overflow: hidden;
	z-index: 999;
	display: none;
	font-family: Arial, Helvetica, sans-serif;
	background:#ebebeb;
	border: 1px solid #bbb;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	/*Prevents selecting text when dragging the selectors*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
/*Color selection box with gradients*/
.colpick_color {
	position: absolute;
	left: 7px;
	top: 7px;
	width: 156px;
	height: 156px;
	overflow: hidden;
	outline: 1px solid #aaa;
	cursor: crosshair;
}
.colpick_color_overlay1 {
	position: absolute;
	left:0;
	top:0;
	width: 156px;
	height: 156px;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
}
.colpick_color_overlay2 {
	position: absolute;
	left:0;
	top:0;
	width: 156px;
	height: 156px;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
/*Circular color selector*/
.colpick_selector_outer {
	background:none;
	position: absolute;
	width: 11px;
	height: 11px;
	margin: -6px 0 0 -6px;
	border: 1px solid black;
	border-radius: 50%;
}
.colpick_selector_inner{
	position: absolute;
	width: 9px;
	height: 9px;
	border: 1px solid white;
	border-radius: 50%;
}
/*Vertical hue bar*/
.colpick_hue {
	position: absolute;
	top: 6px;
	left: 175px;
	width: 19px;
	height: 156px;
	border: 1px solid #aaa;
	cursor: n-resize;
}
/*Hue bar sliding indicator*/
.colpick_hue_arrs {
	position: absolute;
	left: -8px;
	width: 35px;
	height: 7px;
	margin: -7px 0 0 0;
}
.colpick_hue_larr {
	position:absolute;
	width: 0; 
	height: 0; 
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 7px solid #858585;
}
.colpick_hue_rarr {
	position:absolute;
	right:0;
	width: 0; 
	height: 0; 
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent; 
	border-right: 7px solid #858585; 
}
/*New color box*/
.colpick_new_color {
	position: absolute;
	left: 207px;
	top: 6px;
	width: 60px;
	height: 27px;
	background: #f00;
	border: 1px solid #8f8f8f;
}
/*Current color box*/
.colpick_current_color {
	position: absolute;
	left: 277px;
	top: 6px;
	width: 60px;
	height: 27px;
	background: #f00;
	border: 1px solid #8f8f8f;
}
/*Input field containers*/
.colpick_field, .colpick_hex_field  {
	position: absolute;
	height: 20px;
	width: 60px;
	overflow:hidden;
	background:#f3f3f3;
	color:#b8b8b8;
	font-size:12px;
	border:1px solid #bdbdbd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.colpick_rgb_r {
	top: 40px;
	left: 207px;
}
.colpick_rgb_g {
	top: 67px;
	left: 207px;
}
.colpick_rgb_b {
	top: 94px;
	left: 207px;
}
.colpick_hsb_h {
	top: 40px;
	left: 277px;
}
.colpick_hsb_s {
	top: 67px;
	left: 277px;
}
.colpick_hsb_b {
	top: 94px;
	left: 277px;
}
.colpick_hex_field {
	width: 68px;
	left: 207px;
	top: 121px;
}
/*Text field container on focus*/
.colpick_focus {
	border-color: #999;
}
/*Field label container*/
.colpick_field_letter {
	position: absolute;
	width: 12px;
	height: 20px;
	line-height: 20px;
	padding-left: 4px;
	background: #efefef;
	border-right: 1px solid #bdbdbd;
	font-weight: bold;
	color:#777;
}
/*Text inputs*/
.colpick_field input, .colpick_hex_field input {
	position: absolute;
	right: 11px;
	margin: 0;
	padding: 0;
	height: 20px;
	line-height: 20px;
	background: transparent;
	border: none;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	text-align: right;
	outline: none;
}
.colpick_hex_field input {
	right: 4px;
}
/*Field up/down arrows*/
.colpick_field_arrs {
	position: absolute;
	top: 0;
	right: 0;
	width: 9px;
	height: 21px;
	cursor: n-resize;
}
.colpick_field_uarr {
	position: absolute;
	top: 5px;
	width: 0; 
	height: 0; 
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid #959595;
}
.colpick_field_darr {
	position: absolute;
	bottom:5px;
	width: 0; 
	height: 0; 
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #959595;
}
/*Submit/Select button*/
.colpick_submit {
	position: absolute;
	left: 207px;
	top: 149px;
	width: 130px;
	height: 22px;
	line-height:22px;
	background: #efefef;
	text-align: center;
	color: #555;
	font-size: 12px;
	font-weight:bold;
	border: 1px solid #bdbdbd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.colpick_submit:hover {
	background:#f3f3f3;
	border-color:#999;
	cursor: pointer;
}

/*full layout with no submit button*/
.colpick_full_ns  .colpick_submit, .colpick_full_ns .colpick_current_color{
	display:none;
}
.colpick_full_ns .colpick_new_color {
	width: 130px;
	height: 25px;
}
.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsb_h {
	top: 42px;
}
.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsb_s {
	top: 73px;
}
.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsb_b {
	top: 104px;
}
.colpick_full_ns .colpick_hex_field {
	top: 135px;
}

/*rgbhex layout*/
.colpick_rgbhex .colpick_hsb_h, .colpick_rgbhex .colpick_hsb_s, .colpick_rgbhex .colpick_hsb_b {
	display:none;
}
.colpick_rgbhex {
	width:282px;
}
.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit {
	width:68px;
}
.colpick_rgbhex .colpick_new_color {
	width:34px;
	border-right:none;
}
.colpick_rgbhex .colpick_current_color {
	width:34px;
	left:240px;
	border-left:none;
}

/*rgbhex layout, no submit button*/
.colpick_rgbhex_ns  .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{
	display:none;
}
.colpick_rgbhex_ns .colpick_new_color{
	width:68px;
	border: 1px solid #8f8f8f;
}
.colpick_rgbhex_ns .colpick_rgb_r {
	top: 42px;
}
.colpick_rgbhex_ns .colpick_rgb_g {
	top: 73px;
}
.colpick_rgbhex_ns .colpick_rgb_b {
	top: 104px;
}
.colpick_rgbhex_ns .colpick_hex_field {
	top: 135px;
}

/*hex layout*/
.colpick_hex .colpick_hsb_h, .colpick_hex .colpick_hsb_s, .colpick_hex .colpick_hsb_b, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b {
	display:none;
}
.colpick_hex {
	width:206px;
	height:201px;
}
.colpick_hex .colpick_hex_field {
	width:72px;
	height:25px;
	top:168px;
	left:80px;
}
.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input {
	height: 25px;
	line-height: 25px;
}
.colpick_hex .colpick_new_color {
	left:9px;
	top:168px;
	width:30px;
	border-right:none;
}
.colpick_hex .colpick_current_color {
	left:39px;
	top:168px;
	width:30px;
	border-left:none;
}
.colpick_hex .colpick_submit {
	left:164px;
	top: 168px;
	width:30px;
	height:25px;
	line-height: 25px;
}

/*hex layout, no submit button*/
.colpick_hex_ns  .colpick_submit, .colpick_hex_ns .colpick_current_color {
	display:none;
}
.colpick_hex_ns .colpick_hex_field {
	width:80px;
}
.colpick_hex_ns .colpick_new_color{
	width:60px;
	border: 1px solid #8f8f8f;
}

/*Dark color scheme*/
.colpick_dark {
	background: #161616;
	border-color: #2a2a2a;
}
.colpick_dark .colpick_color {
	outline-color: #333;
}
.colpick_dark .colpick_hue {
	border-color: #555;
}
.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field {
	background: #101010;
	border-color: #2d2d2d;
}
.colpick_dark .colpick_field_letter {
	background: #131313;
	border-color: #2d2d2d;
	color: #696969;
}
.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input {
	color: #7a7a7a;
}
.colpick_dark .colpick_field_uarr {
	border-bottom-color:#696969;
}
.colpick_dark .colpick_field_darr {
	border-top-color:#696969;
}
.colpick_dark .colpick_focus {
	border-color:#444;
}
.colpick_dark .colpick_submit {
	background: #131313;
	border-color:#2d2d2d;
	color:#7a7a7a;
}
.colpick_dark .colpick_submit:hover {
	background-color:#101010;
	border-color:#444;
}

styles

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />