<!--S:Main-->

		<div class="tools-picker">
			<span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
		</div>

		<style>
			.tools-picker {
				_text-align: center;
			}

			.cp-basic {
				display: inline-block;
				padding-left: 10px;
			}
			.cp-basic .ui-colorpicker.ui-widget-content {
				border: 0px!important;
				background: transparent
			}

			.cp-basic .ui-dialog::before {
				display: none!important;
			}
		</style>

		<script>
			$(function() {
				$('.cp-basic').colorpicker({
					parts:  [   
						//'header', 
						'map', 
						'bar', 
						'hex',
						'hsv', 
						'rgb', 
						//'alpha', 
						'preview',
						'swatches', 
						//'footer'
					],
				});
			});
		</script>


<!--E:Main-->

		<div id="cp_tools"></div>
		<script>
			$(function() {
				$('#cp_tools').colorpicker({
					parts:  [   
						'header', 
						'map', 
						'bar', 
						'hex',
						'hsv', 
						'rgb', 
						//'alpha', 
						'preview',
						//'swatches', 
						'footer'
					],
					showOn: 'both',
					buttonColorize: true,
					showNoneButton: true,
					alpha: false,
					colorFormat: '#HEX'
				});
			});
		</script>
