At the top of globalTemplate:

<php> $skinColor = ( ( IPSCookie::get('SkinColor') ) ? IPSCookie::get('SkinColor') : '57a5d1' ); </php>

---------------------------------
Just before </head>:

		<!-- Color Picker Files -->
		<script type='text/javascript' src='{$this->settings['img_url']}/colorpicker/colorpicker.min.js'></script>
		<if test="$skinColor">
			<style type='text/css'>
				#branding, .maintitle, .popupInner h3{ background-color: #{$skinColor}; }
			</style>
		</if>

---------------------------------
The button:

						<div id='colorPick' data-tooltip='Change Colors'>
							<input type='text' id='colorPickInput' class='hide' />
							<a href='#colorPick' title=''><img src='{style_images_url}/icon_colorpick.png' alt='' /></a>
						</div>

---------------------------------
After the button somewhere:

					<script type='text/javascript'>
						var cp1 = new colorPicker('colorPick', {
							color: '#{$skinColor}',
							inputElement: 'colorPickInput',
							hideOnSubmit: false,
							onChange: function(picker){
								var HexColor = '#' + picker.hexColor;
								$('branding').setStyle({
									backgroundColor:HexColor
								});
								$$('.maintitle').each( function( t )
								{
									t.setStyle({
										backgroundColor:HexColor
									});
								});
							},
							onSubmit: function(picker){
								ipb.Cookie.set( 'smoothSkinColor', picker.hexColor, 1 );
								new Effect.Fade( picker.cp , { duration: 0.5 });
							},
						});
					</script>