Cacher is the code snippet organizer for pro developers

<link href="http://aplicot.jp/js/colorpicker/css/colorpicker.css" rel="stylesheet" />

html, body {
  margin: 0;
  padding: 0;
}
header {
  position: relative;
  width: 100%;
  height: 80px;
  background: #82b515;
}
footer {
  position: relative;
  width: 100%;
  height: 80px;
  background: #000;
}
input[type="text"].color {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  padding: 3px;
  border: 1px solid #999;
}
#wrap:after {
  content: '';
  clear: both;
  display: block;
}
#contents {
  float: left;
  position: relative;
  width: 70%;
  height: 300px;
}
#sidebar {
  float: right;
  position: relative;
  width: 30%;
  height: 300px;
  background: #cccccc;
}
#colorSelector1,
#colorSelector2,
#colorSelector3,
#colorSelector4 {
    position: relative;
    width: 36px;
    height: 36px;
    background: url("http://aplicot.jp/js/colorpicker/images/select.png");
}
#colorSelector1 div,
#colorSelector2 div,
#colorSelector3 div,
#colorSelector4 div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url("http://aplicot.jp/js/colorpicker/images/select.png") center;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://aplicot.jp/js/colorpicker/js/jquery.js"></script>
<script src="http://aplicot.jp/js/colorpicker/js/colorpicker.js"></script>

$(function() {
	$('#colorSelector1').ColorPicker({
		color: '#82b515',
		onShow: function(colorpicker) {
			$(colorpicker).fadeIn(500);
			return false;
		},
		onHide: function(colorpicker) {
			$(colorpicker).fadeOut( 500 );
			return false;
		},
		onChange: function( hsb, hex, rgb ) {
			$('#colorSelector1 div').css('backgroundColor', '#' + hex);
			$('header').css('backgroundColor', '#' + hex);
			$('#headerColor').val('#' + hex);
		}
	});

	$('#colorSelector2').ColorPicker({
		color: '#ffffff',
		onShow: function(colorpicker) {
			$(colorpicker).fadeIn(500);
			return false;
		},
		onHide: function(colorpicker) {
			$(colorpicker).fadeOut( 500 );
			return false;
		},
		onChange: function( hsb, hex, rgb ) {
			$('#colorSelector2 div').css('backgroundColor', '#' + hex);
			$('#contents').css('backgroundColor', '#' + hex);
			$('#contentsColor').val('#' + hex);
		}
	});

	$('#colorSelector3').ColorPicker({
		color: '#cccccc',
		onShow: function(colorpicker) {
			$(colorpicker).fadeIn(500);
			return false;
		},
		onHide: function(colorpicker) {
			$(colorpicker).fadeOut( 500 );
			return false;
		},
		onChange: function( hsb, hex, rgb ) {
			$('#colorSelector3 div').css('backgroundColor', '#' + hex);
			$('#sidebar').css('backgroundColor', '#' + hex);
			$('#sidebarColor').val('#' + hex);
		}
	});
  
	$('#colorSelector4').ColorPicker({
		color: '#000000',
		onShow: function(colorpicker) {
			$(colorpicker).fadeIn(500);
			return false;
		},
		onHide: function(colorpicker) {
			$(colorpicker).fadeOut( 500 );
			return false;
		},
		onChange: function( hsb, hex, rgb ) {
			$('#colorSelector4 div').css('backgroundColor', '#' + hex);
			$('footer').css('backgroundColor', '#' + hex);
			$('#footerColor').val('#' + hex);
		}
	});
});

<header>
  <div id="colorSelector1">
    <div style="background-color: #82b515"></div>
  </div>
  <input type="text" id="headerColor" class="color" value="#82b515">
</header>
<div id="wrap">
<div id="contents">
  <div id="colorSelector2">
    <div style="background-color: #ffffff"></div>
  </div>
  <input type="text" id="contentsColor" class="color" value="#ffffff">
</div>
<div id="sidebar">
  <div id="colorSelector3">
    <div style="background-color: #cccccc"></div>
  </div>
  <input type="text" id="sidebarColor" class="color" value="#cccccc">
</div>
</div>
<footer>
  <div id="colorSelector4">
    <div style="background-color: #000000"></div>
  </div>
  <input type="text" id="footerColor" class="color" value="#000000">
</footer>