diff --git a/assets/inc/color-picker-alpha/wp-color-picker-alpha.js b/assets/inc/color-picker-alpha/wp-color-picker-alpha.js
new file mode 100644
index 00000000..40a937bd
--- /dev/null
+++ b/assets/inc/color-picker-alpha/wp-color-picker-alpha.js
@@ -0,0 +1,498 @@
+/**!
+ * wp-color-picker-alpha
+ *
+ * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
+ * Only run in input and is defined data alpha in true
+ *
+ * Version: 2.1.3
+ * https://github.com/kallookoo/wp-color-picker-alpha
+ * Licensed under the GPLv2 license.
+ */
+( function( $ ) {
+	// Prevent double-init.
+	if ( $.wp.wpColorPicker.prototype._hasAlpha ) {
+		return;
+	}
+
+		// Variable for some backgrounds ( grid )
+	var image   = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==',
+		// html stuff for wpColorPicker copy of the original color-picker.js
+		_after = '<div class="wp-picker-holder" />',
+		_wrap = '<div class="wp-picker-container" />',
+		_button = '<input type="button" class="button button-small" />',
+		// Prevent CSS issues in < WordPress 4.9
+		_deprecated = ( wpColorPickerL10n.current !== undefined );
+		// Declare some global variables when is deprecated or not
+		if ( _deprecated ) {
+			var _before = '<a tabindex="0" class="wp-color-result" />';
+		} else {
+			var _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
+				_wrappingLabel = '<label></label>',
+				_wrappingLabelText = '<span class="screen-reader-text"></span>';
+		}
+	/**
+	 * Overwrite Color
+	 * for enable support rbga
+	 */
+	Color.fn.toString = function() {
+		if ( this._alpha < 1 )
+			return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
+
+		var hex = parseInt( this._color, 10 ).toString( 16 );
+
+		if ( this.error )
+			return '';
+
+		if ( hex.length < 6 )
+			hex = ( '00000' + hex ).substr( -6 );
+
+		return '#' + hex;
+	};
+
+	/**
+	 * Overwrite wpColorPicker
+	 */
+	$.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, {
+		_hasAlpha: true,
+		/**
+		 * @summary Creates the color picker.
+		 *
+		 * Creates the color picker, sets default values, css classes and wraps it all in HTML.
+		 *
+		 * @since 3.5.0
+		 *
+		 * @access private
+		 *
+		 * @returns {void}
+		 */
+		_create: function() {
+			// Return early if Iris support is missing.
+			if ( ! $.support.iris ) {
+				return;
+			}
+
+			var self = this,
+				el = self.element;
+
+			// Override default options with options bound to the element.
+			$.extend( self.options, el.data() );
+
+			// Create a color picker which only allows adjustments to the hue.
+			if ( self.options.type === 'hue' ) {
+				return self._createHueOnly();
+			}
+
+			// Bind the close event.
+			self.close = $.proxy( self.close, self );
+
+			self.initialValue = el.val();
+
+			// Add a CSS class to the input field.
+			el.addClass( 'wp-color-picker' );
+
+			if ( _deprecated ) {
+				el.hide().wrap( _wrap );
+				self.wrap            = el.parent();
+				self.toggler         = $( _before )
+					.insertBefore( el )
+					.css( { backgroundColor : self.initialValue } )
+					.attr( 'title', wpColorPickerL10n.pick )
+					.attr( 'data-current', wpColorPickerL10n.current );
+				self.pickerContainer = $( _after ).insertAfter( el );
+				self.button          = $( _button ).addClass('hidden');
+			} else {
+				/*
+				 * Check if there's already a wrapping label, e.g. in the Customizer.
+				 * If there's no label, add a default one to match the Customizer template.
+				 */
+				if ( ! el.parent( 'label' ).length ) {
+					// Wrap the input field in the default label.
+					el.wrap( _wrappingLabel );
+					// Insert the default label text.
+					self.wrappingLabelText = $( _wrappingLabelText )
+						.insertBefore( el )
+						.text( wpColorPickerL10n.defaultLabel );
+				}
+
+				/*
+				 * At this point, either it's the standalone version or the Customizer
+				 * one, we have a wrapping label to use as hook in the DOM, let's store it.
+				 */
+				self.wrappingLabel = el.parent();
+
+				// Wrap the label in the main wrapper.
+				self.wrappingLabel.wrap( _wrap );
+				// Store a reference to the main wrapper.
+				self.wrap = self.wrappingLabel.parent();
+				// Set up the toggle button and insert it before the wrapping label.
+				self.toggler = $( _before )
+					.insertBefore( self.wrappingLabel )
+					.css( { backgroundColor: self.initialValue } );
+				// Set the toggle button span element text.
+				self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
+				// Set up the Iris container and insert it after the wrapping label.
+				self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
+				// Store a reference to the Clear/Default button.
+				self.button = $( _button );
+			}
+
+			// Set up the Clear/Default button.
+			if ( self.options.defaultColor ) {
+				self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
+				if ( ! _deprecated ) {
+					self.button.attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
+				}
+			} else {
+				self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
+				if ( ! _deprecated ) {
+					self.button.attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
+				}
+			}
+
+			if ( _deprecated ) {
+				el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button );
+			} else {
+				// Wrap the wrapping label in its wrapper and append the Clear/Default button.
+				self.wrappingLabel
+					.wrap( '<span class="wp-picker-input-wrap hidden" />' )
+					.after( self.button );
+
+				/*
+				 * The input wrapper now contains the label+input+Clear/Default button.
+				 * Store a reference to the input wrapper: we'll use this to toggle
+				 * the controls visibility.
+				 */
+				self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
+			}
+
+			el.iris( {
+				target: self.pickerContainer,
+				hide: self.options.hide,
+				width: self.options.width,
+				mode: self.options.mode,
+				palettes: self.options.palettes,
+				/**
+				 * @summary Handles the onChange event if one has been defined in the options.
+				 *
+				 * Handles the onChange event if one has been defined in the options and additionally
+				 * sets the background color for the toggler element.
+				 *
+				 * @since 3.5.0
+				 *
+				 * @param {Event} event    The event that's being called.
+				 * @param {HTMLElement} ui The HTMLElement containing the color picker.
+				 *
+				 * @returns {void}
+				 */
+				change: function( event, ui ) {
+					if ( self.options.alpha ) {
+						self.toggler.css( { 'background-image' : 'url(' + image + ')' } );
+						if ( _deprecated ) {
+							self.toggler.html( '<span class="color-alpha" />' );
+						} else {
+							self.toggler.css( {
+								'position' : 'relative'
+							} );
+							if ( self.toggler.find('span.color-alpha').length == 0 ) {
+								self.toggler.append('<span class="color-alpha" />');
+							}
+						}
+
+						self.toggler.find( 'span.color-alpha' ).css( {
+							'width'                     : '30px',
+							'height'                    : '24px',
+							'position'                  : 'absolute',
+							'top'                       : 0,
+							'left'                      : 0,
+							'border-top-left-radius'    : '2px',
+							'border-bottom-left-radius' : '2px',
+							'background'                : ui.color.toString()
+						} );
+					} else {
+						self.toggler.css( { backgroundColor : ui.color.toString() } );
+					}
+
+					if ( $.isFunction( self.options.change ) ) {
+						self.options.change.call( this, event, ui );
+					}
+				}
+			} );
+
+			el.val( self.initialValue );
+			self._addListeners();
+
+			// Force the color picker to always be closed on initial load.
+			if ( ! self.options.hide ) {
+				self.toggler.click();
+			}
+		},
+		/**
+		 * @summary Binds event listeners to the color picker.
+		 *
+		 * @since 3.5.0
+		 *
+		 * @access private
+		 *
+		 * @returns {void}
+		 */
+		_addListeners: function() {
+			var self = this;
+
+			/**
+			 * @summary Prevent any clicks inside this widget from leaking to the top and closing it.
+			 *
+			 * @since 3.5.0
+			 *
+			 * @param {Event} event The event that's being called.
+			 *
+			 * @returs {void}
+			 */
+			self.wrap.on( 'click.wpcolorpicker', function( event ) {
+				event.stopPropagation();
+			});
+
+			/**
+			 * @summary Open or close the color picker depending on the class.
+			 *
+			 * @since 3.5
+			 */
+			self.toggler.click( function(){
+				if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
+					self.close();
+				} else {
+					self.open();
+				}
+			});
+
+			/**
+			 * @summary Checks if value is empty when changing the color in the color picker.
+			 *
+			 * Checks if value is empty when changing the color in the color picker.
+			 * If so, the background color is cleared.
+			 *
+			 * @since 3.5.0
+			 *
+			 * @param {Event} event The event that's being called.
+			 *
+			 * @returns {void}
+			 */
+			self.element.on( 'change', function( event ) {
+				// Empty or Error = clear
+				if ( $( this ).val() === '' || self.element.hasClass( 'iris-error' ) ) {
+					if ( self.options.alpha ) {
+						if ( _deprecated ) {
+							self.toggler.removeAttr( 'style' );
+						}
+						self.toggler.find( 'span.color-alpha' ).css( 'backgroundColor', '' );
+					} else {
+						self.toggler.css( 'backgroundColor', '' );
+					}
+
+					// fire clear callback if we have one
+					if ( $.isFunction( self.options.clear ) )
+						self.options.clear.call( this, event );
+				}
+			} );
+
+			/**
+			 * @summary Enables the user to clear or revert the color in the color picker.
+			 *
+			 * Enables the user to either clear the color in the color picker or revert back to the default color.
+			 *
+			 * @since 3.5.0
+			 *
+			 * @param {Event} event The event that's being called.
+			 *
+			 * @returns {void}
+			 */
+			self.button.on( 'click', function( event ) {
+				if ( $( this ).hasClass( 'wp-picker-clear' ) ) {
+					self.element.val( '' );
+					if ( self.options.alpha ) {
+						if ( _deprecated ) {
+							self.toggler.removeAttr( 'style' );
+						}
+						self.toggler.find( 'span.color-alpha' ).css( 'backgroundColor', '' );
+					} else {
+						self.toggler.css( 'backgroundColor', '' );
+					}
+
+					if ( $.isFunction( self.options.clear ) )
+						self.options.clear.call( this, event );
+
+					self.element.trigger( 'change' );
+				} else if ( $( this ).hasClass( 'wp-picker-default' ) ) {
+					self.element.val( self.options.defaultColor ).change();
+				}
+			});
+		},
+	});
+
+	/**
+	 * Overwrite iris
+	 */
+	$.widget( 'a8c.iris', $.a8c.iris, {
+		_create: function() {
+			this._super();
+
+			// Global option for check is mode rbga is enabled
+			this.options.alpha = this.element.data( 'alpha' ) || false;
+
+			// Is not input disabled
+			if ( ! this.element.is( ':input' ) )
+				this.options.alpha = false;
+
+			if ( typeof this.options.alpha !== 'undefined' && this.options.alpha ) {
+				var self       = this,
+					el         = self.element,
+					_html      = '<div class="iris-strip iris-slider iris-alpha-slider"><div class="iris-slider-offset iris-slider-offset-alpha"></div></div>',
+					aContainer = $( _html ).appendTo( self.picker.find( '.iris-picker-inner' ) ),
+					aSlider    = aContainer.find( '.iris-slider-offset-alpha' ),
+					controls   = {
+						aContainer : aContainer,
+						aSlider    : aSlider
+					};
+
+				if ( typeof el.data( 'custom-width' ) !== 'undefined' ) {
+					self.options.customWidth = parseInt( el.data( 'custom-width' ) ) || 0;
+				} else {
+					self.options.customWidth = 100;
+				}
+
+				// Set default width for input reset
+				self.options.defaultWidth = el.width();
+
+				// Update width for input
+				if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != -1 )
+					el.width( parseInt( self.options.defaultWidth + self.options.customWidth ) );
+
+				// Push new controls
+				$.each( controls, function( k, v ) {
+					self.controls[k] = v;
+				} );
+
+				// Change size strip and add margin for sliders
+				self.controls.square.css( { 'margin-right': '0' } );
+				var emptyWidth   = ( self.picker.width() - self.controls.square.width() - 20 ),
+					stripsMargin = ( emptyWidth / 6 ),
+					stripsWidth  = ( ( emptyWidth / 2 ) - stripsMargin );
+
+				$.each( [ 'aContainer', 'strip' ], function( k, v ) {
+					self.controls[v].width( stripsWidth ).css( { 'margin-left' : stripsMargin + 'px' } );
+				} );
+
+				// Add new slider
+				self._initControls();
+
+				// For updated widget
+				self._change();
+			}
+		},
+		_initControls: function() {
+			this._super();
+
+			if ( this.options.alpha ) {
+				var self     = this,
+					controls = self.controls;
+
+				controls.aSlider.slider({
+					orientation : 'vertical',
+					min         : 0,
+					max         : 100,
+					step        : 1,
+					value       : parseInt( self._color._alpha * 100 ),
+					slide       : function( event, ui ) {
+						// Update alpha value
+						self._color._alpha = parseFloat( ui.value / 100 );
+						self._change.apply( self, arguments );
+					}
+				});
+			}
+		},
+		_change: function() {
+			this._super();
+
+			var self = this,
+				el   = self.element;
+
+			if ( this.options.alpha ) {
+				var	controls     = self.controls,
+					alpha        = parseInt( self._color._alpha * 100 ),
+					color        = self._color.toRgb(),
+					gradient     = [
+						'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%',
+						'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%'
+					],
+					defaultWidth = self.options.defaultWidth,
+					customWidth  = self.options.customWidth,
+					target       = self.picker.closest( '.wp-picker-container' ).find( '.wp-color-result' );
+
+				// Generate background slider alpha, only for CSS3 old browser fuck!! :)
+				controls.aContainer.css( { 'background' : 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' } );
+
+				if ( target.hasClass( 'wp-picker-open' ) ) {
+					// Update alpha value
+					controls.aSlider.slider( 'value', alpha );
+
+					/**
+					 * Disabled change opacity in default slider Saturation ( only is alpha enabled )
+					 * and change input width for view all value
+					 */
+					if ( self._color._alpha < 1 ) {
+						controls.strip.attr( 'style', controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ) );
+						el.width( parseInt( defaultWidth + customWidth ) );
+					} else {
+						el.width( defaultWidth );
+					}
+				}
+			}
+
+			var reset = el.data( 'reset-alpha' ) || false;
+
+			if ( reset ) {
+				self.picker.find( '.iris-palette-container' ).on( 'click.palette', '.iris-palette', function() {
+					self._color._alpha = 1;
+					self.active        = 'external';
+					self._change();
+				} );
+			}
+			el.trigger( 'change' );
+		},
+		_addInputListeners: function( input ) {
+			var self            = this,
+				debounceTimeout = 100,
+				callback        = function( event ) {
+					var color = new Color( input.val() ),
+						val   = input.val();
+
+					input.removeClass( 'iris-error' );
+					// we gave a bad color
+					if ( color.error ) {
+						// don't error on an empty input
+						if ( val !== '' )
+							input.addClass( 'iris-error' );
+					} else {
+						if ( color.toString() !== self._color.toString() ) {
+							// let's not do this on keyup for hex shortcodes
+							if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) )
+								self._setOption( 'color', color.toString() );
+						}
+					}
+				};
+
+			input.on( 'change', callback ).on( 'keyup', self._debounce( callback, debounceTimeout ) );
+
+			// If we initialized hidden, show on first focus. The rest is up to you.
+			if ( self.options.hide ) {
+				input.on( 'focus', function() {
+					self.show();
+				} );
+			}
+		}
+	} );
+}( jQuery ) );
+
+// Auto Call plugin is class is color-picker
+jQuery( document ).ready( function( $ ) {
+	$( '.color-picker' ).wpColorPicker();
+} );
diff --git a/assets/inc/color-picker-alpha/wp-color-picker-alpha.min.js b/assets/inc/color-picker-alpha/wp-color-picker-alpha.min.js
new file mode 100644
index 00000000..21fe8c4a
--- /dev/null
+++ b/assets/inc/color-picker-alpha/wp-color-picker-alpha.min.js
@@ -0,0 +1,11 @@
+/**!
+ * wp-color-picker-alpha
+ *
+ * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
+ * Only run in input and is defined data alpha in true
+ *
+ * Version: 2.1.3
+ * https://github.com/kallookoo/wp-color-picker-alpha
+ * Licensed under the GPLv2 license.
+ */
+!function(t){if(!t.wp.wpColorPicker.prototype._hasAlpha){var o="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==",r='<div class="wp-picker-holder" />',e='<div class="wp-picker-container" />',a='<input type="button" class="button button-small" />',i=void 0!==wpColorPickerL10n.current;if(i)var n='<a tabindex="0" class="wp-color-result" />';else{n='<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>';var l="<label></label>",s='<span class="screen-reader-text"></span>'}Color.fn.toString=function(){if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var t=parseInt(this._color,10).toString(16);return this.error?"":(t.length<6&&(t=("00000"+t).substr(-6)),"#"+t)},t.widget("wp.wpColorPicker",t.wp.wpColorPicker,{_hasAlpha:!0,_create:function(){if(t.support.iris){var p=this,c=p.element;if(t.extend(p.options,c.data()),"hue"===p.options.type)return p._createHueOnly();p.close=t.proxy(p.close,p),p.initialValue=c.val(),c.addClass("wp-color-picker"),i?(c.hide().wrap(e),p.wrap=c.parent(),p.toggler=t(n).insertBefore(c).css({backgroundColor:p.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),p.pickerContainer=t(r).insertAfter(c),p.button=t(a).addClass("hidden")):(c.parent("label").length||(c.wrap(l),p.wrappingLabelText=t(s).insertBefore(c).text(wpColorPickerL10n.defaultLabel)),p.wrappingLabel=c.parent(),p.wrappingLabel.wrap(e),p.wrap=p.wrappingLabel.parent(),p.toggler=t(n).insertBefore(p.wrappingLabel).css({backgroundColor:p.initialValue}),p.toggler.find(".wp-color-result-text").text(wpColorPickerL10n.pick),p.pickerContainer=t(r).insertAfter(p.wrappingLabel),p.button=t(a)),p.options.defaultColor?(p.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString),i||p.button.attr("aria-label",wpColorPickerL10n.defaultAriaLabel)):(p.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),i||p.button.attr("aria-label",wpColorPickerL10n.clearAriaLabel)),i?c.wrap('<span class="wp-picker-input-wrap" />').after(p.button):(p.wrappingLabel.wrap('<span class="wp-picker-input-wrap hidden" />').after(p.button),p.inputWrapper=c.closest(".wp-picker-input-wrap")),c.iris({target:p.pickerContainer,hide:p.options.hide,width:p.options.width,mode:p.options.mode,palettes:p.options.palettes,change:function(r,e){p.options.alpha?(p.toggler.css({"background-image":"url("+o+")"}),i?p.toggler.html('<span class="color-alpha" />'):(p.toggler.css({position:"relative"}),0==p.toggler.find("span.color-alpha").length&&p.toggler.append('<span class="color-alpha" />')),p.toggler.find("span.color-alpha").css({width:"30px",height:"24px",position:"absolute",top:0,left:0,"border-top-left-radius":"2px","border-bottom-left-radius":"2px",background:e.color.toString()})):p.toggler.css({backgroundColor:e.color.toString()}),t.isFunction(p.options.change)&&p.options.change.call(this,r,e)}}),c.val(p.initialValue),p._addListeners(),p.options.hide||p.toggler.click()}},_addListeners:function(){var o=this;o.wrap.on("click.wpcolorpicker",function(t){t.stopPropagation()}),o.toggler.click(function(){o.toggler.hasClass("wp-picker-open")?o.close():o.open()}),o.element.on("change",function(r){(""===t(this).val()||o.element.hasClass("iris-error"))&&(o.options.alpha?(i&&o.toggler.removeAttr("style"),o.toggler.find("span.color-alpha").css("backgroundColor","")):o.toggler.css("backgroundColor",""),t.isFunction(o.options.clear)&&o.options.clear.call(this,r))}),o.button.on("click",function(r){t(this).hasClass("wp-picker-clear")?(o.element.val(""),o.options.alpha?(i&&o.toggler.removeAttr("style"),o.toggler.find("span.color-alpha").css("backgroundColor","")):o.toggler.css("backgroundColor",""),t.isFunction(o.options.clear)&&o.options.clear.call(this,r),o.element.trigger("change")):t(this).hasClass("wp-picker-default")&&o.element.val(o.options.defaultColor).change()})}}),t.widget("a8c.iris",t.a8c.iris,{_create:function(){if(this._super(),this.options.alpha=this.element.data("alpha")||!1,this.element.is(":input")||(this.options.alpha=!1),void 0!==this.options.alpha&&this.options.alpha){var o=this,r=o.element,e=t('<div class="iris-strip iris-slider iris-alpha-slider"><div class="iris-slider-offset iris-slider-offset-alpha"></div></div>').appendTo(o.picker.find(".iris-picker-inner")),a={aContainer:e,aSlider:e.find(".iris-slider-offset-alpha")};void 0!==r.data("custom-width")?o.options.customWidth=parseInt(r.data("custom-width"))||0:o.options.customWidth=100,o.options.defaultWidth=r.width(),(o._color._alpha<1||-1!=o._color.toString().indexOf("rgb"))&&r.width(parseInt(o.options.defaultWidth+o.options.customWidth)),t.each(a,function(t,r){o.controls[t]=r}),o.controls.square.css({"margin-right":"0"});var i=o.picker.width()-o.controls.square.width()-20,n=i/6,l=i/2-n;t.each(["aContainer","strip"],function(t,r){o.controls[r].width(l).css({"margin-left":n+"px"})}),o._initControls(),o._change()}},_initControls:function(){if(this._super(),this.options.alpha){var t=this;t.controls.aSlider.slider({orientation:"vertical",min:0,max:100,step:1,value:parseInt(100*t._color._alpha),slide:function(o,r){t._color._alpha=parseFloat(r.value/100),t._change.apply(t,arguments)}})}},_change:function(){this._super();var t=this,r=t.element;if(this.options.alpha){var e=t.controls,a=parseInt(100*t._color._alpha),i=t._color.toRgb(),n=["rgb("+i.r+","+i.g+","+i.b+") 0%","rgba("+i.r+","+i.g+","+i.b+", 0) 100%"],l=t.options.defaultWidth,s=t.options.customWidth,p=t.picker.closest(".wp-picker-container").find(".wp-color-result");e.aContainer.css({background:"linear-gradient(to bottom, "+n.join(", ")+"), url("+o+")"}),p.hasClass("wp-picker-open")&&(e.aSlider.slider("value",a),t._color._alpha<1?(e.strip.attr("style",e.strip.attr("style").replace(/rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g,"rgb($1$3$5)")),r.width(parseInt(l+s))):r.width(l))}(r.data("reset-alpha")||!1)&&t.picker.find(".iris-palette-container").on("click.palette",".iris-palette",function(){t._color._alpha=1,t.active="external",t._change()}),r.trigger("change")},_addInputListeners:function(t){var o=this,r=function(r){var e=new Color(t.val()),a=t.val();t.removeClass("iris-error"),e.error?""!==a&&t.addClass("iris-error"):e.toString()!==o._color.toString()&&("keyup"===r.type&&a.match(/^[0-9a-fA-F]{3}$/)||o._setOption("color",e.toString()))};t.on("change",r).on("keyup",o._debounce(r,100)),o.options.hide&&t.on("focus",function(){o.show()})}})}}(jQuery),jQuery(document).ready(function(t){t(".color-picker").wpColorPicker()});
\ No newline at end of file
diff --git a/includes/fields/class-acf-field-color_picker.php b/includes/fields/class-acf-field-color_picker.php
index 6b6657ff..8b6bef5d 100644
--- a/includes/fields/class-acf-field-color_picker.php
+++ b/includes/fields/class-acf-field-color_picker.php
@@ -1,147 +1,155 @@
 <?php
 
-if( ! class_exists('acf_field_color_picker') ) :
-
-class acf_field_color_picker extends acf_field {
-	
-	
-	/*
-	*  __construct
-	*
-	*  This function will setup the field type data
-	*
-	*  @type	function
-	*  @date	5/03/2014
-	*  @since	5.0.0
-	*
-	*  @param	n/a
-	*  @return	n/a
-	*/
-	
-	function initialize() {
-		
-		// vars
-		$this->name = 'color_picker';
-		$this->label = __("Color Picker",'acf');
-		$this->category = 'jquery';
-		$this->defaults = array(
-			'default_value'	=> '',
-		);
-		
-	}
-	
-	
-	/*
-	*  input_admin_enqueue_scripts
-	*
-	*  description
-	*
-	*  @type	function
-	*  @date	16/12/2015
-	*  @since	5.3.2
-	*
-	*  @param	$post_id (int)
-	*  @return	$post_id (int)
-	*/
-	
-	function input_admin_enqueue_scripts() {
-		
-		// globals
-		global $wp_scripts;
-		
-		
-		// register if not already (on front end)
-		// http://wordpress.stackexchange.com/questions/82718/how-do-i-implement-the-wordpress-iris-picker-into-my-plugin-on-the-front-end
-		if( !isset($wp_scripts->registered['iris']) ) {
-			
-			// styles
-			wp_register_style('wp-color-picker', admin_url('css/color-picker.css'), array(), '', true);
-			
-			
-			// scripts
-			wp_register_script('iris', admin_url('js/iris.min.js'), array('jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch'), '1.0.7', true);
-			wp_register_script('wp-color-picker', admin_url('js/color-picker.min.js'), array('iris'), '', true);
-			
-			
-			// localize
-		    wp_localize_script('wp-color-picker', 'wpColorPickerL10n', array(
-		        'clear'			=> __('Clear', 'acf' ),
-		        'defaultString'	=> __('Default', 'acf' ),
-		        'pick'			=> __('Select Color', 'acf' ),
-		        'current'		=> __('Current Color', 'acf' )
-		    )); 
-			
-		}
-		
-		
-		// enqueue
-		wp_enqueue_style('wp-color-picker');
-	    wp_enqueue_script('wp-color-picker');
-	    
-	    			
-	}
-	
-	
-	/*
-	*  render_field()
-	*
-	*  Create the HTML interface for your field
-	*
-	*  @param	$field - an array holding all the field's data
-	*
-	*  @type	action
-	*  @since	3.6
-	*  @date	23/01/13
-	*/
-	
-	function render_field( $field ) {
-		
-		// vars
-		$text_input = acf_get_sub_array( $field, array('id', 'class', 'name', 'value') );
-		$hidden_input = acf_get_sub_array( $field, array('name', 'value') );
-		
-		
-		// html
-		?>
-		<div class="acf-color-picker">
-			<?php acf_hidden_input( $hidden_input ); ?>
-			<?php acf_text_input( $text_input ); ?>
-		</div>
-		<?php
-	}
-	
-	
-	/*
-	*  render_field_settings()
-	*
-	*  Create extra options for your field. This is rendered when editing a field.
-	*  The value of $field['name'] can be used (like bellow) to save extra data to the $field
-	*
-	*  @type	action
-	*  @since	3.6
-	*  @date	23/01/13
-	*
-	*  @param	$field	- an array holding all the field's data
-	*/
-	
-	function render_field_settings( $field ) {
-		
-		// display_format
-		acf_render_field_setting( $field, array(
-			'label'			=> __('Default Value','acf'),
-			'instructions'	=> '',
-			'type'			=> 'text',
-			'name'			=> 'default_value',
-			'placeholder'	=> '#FFFFFF'
-		));
-		
-	}
-	
-}
+if (!class_exists('acf_field_color_picker')) :
+
+  class acf_field_color_picker extends acf_field
+  {
+
+
+    /*
+    *  __construct
+    *
+    *  This function will setup the field type data
+    *
+    *  @type	function
+    *  @date	5/03/2014
+    *  @since	5.0.0
+    *
+    *  @param	n/a
+    *  @return	n/a
+    */
+
+    function initialize()
+    {
+
+      // vars
+      $this->name = 'color_picker';
+      $this->label = __("Color Picker", 'acf');
+      $this->category = 'jquery';
+      $this->defaults = array(
+        'default_value' => '',
+      );
+
+    }
+
+
+    /*
+    *  input_admin_enqueue_scripts
+    *
+    *  description
+    *
+    *  @type	function
+    *  @date	16/12/2015
+    *  @since	5.3.2
+    *
+    *  @param	$post_id (int)
+    *  @return	$post_id (int)
+    */
+
+    function input_admin_enqueue_scripts()
+    {
+
+      // globals
+      global $wp_scripts;
+
+
+      // register if not already (on front end)
+      // http://wordpress.stackexchange.com/questions/82718/how-do-i-implement-the-wordpress-iris-picker-into-my-plugin-on-the-front-end
+      if (!isset($wp_scripts->registered['iris'])) {
+
+        // styles
+        wp_register_style('wp-color-picker', admin_url('css/color-picker.css'), array(), '', true);
+
+
+        // scripts
+        wp_register_script('iris', admin_url('js/iris.min.js'), array('jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch'), '1.0.7', true);
+        wp_register_script('wp-color-picker', admin_url('js/color-picker.min.js'), array('iris'), '', true);
+
+
+        // localize
+        wp_localize_script('wp-color-picker', 'wpColorPickerL10n', array(
+          'clear' => __('Clear', 'acf'),
+          'defaultString' => __('Default', 'acf'),
+          'pick' => __('Select Color', 'acf'),
+          'current' => __('Current Color', 'acf')
+        ));
+
+      }
+
+      // Add the Alpha Color Picker JS
+      wp_register_script( 'wp-color-picker-alpha', acf_get_url("/assets/inc/color-picker-alpha/wp-color-picker-alpha.min.js"), array( 'wp-color-picker' ), '2.1.3', true );
+
+      // enqueue
+      wp_enqueue_style('wp-color-picker');
+      wp_enqueue_script('wp-color-picker');
+      wp_enqueue_script('wp-color-picker-alpha');
+
+
+    }
+
+
+    /*
+    *  render_field()
+    *
+    *  Create the HTML interface for your field
+    *
+    *  @param	$field - an array holding all the field's data
+    *
+    *  @type	action
+    *  @since	3.6
+    *  @date	23/01/13
+    */
+
+    function render_field($field)
+    {
+
+      // vars
+      $text_input = acf_get_sub_array($field, array('id', 'class', 'name', 'value'));
+      $hidden_input = acf_get_sub_array($field, array('name', 'value'));
+
+
+      // html
+      ?>
+      <div class="acf-color-picker">
+        <?php acf_hidden_input($hidden_input); ?>
+        <input type="text" <?php echo acf_esc_attrs($text_input); ?> data-alpha="true"/>
+      </div>
+      <?php
+    }
+
+
+    /*
+    *  render_field_settings()
+    *
+    *  Create extra options for your field. This is rendered when editing a field.
+    *  The value of $field['name'] can be used (like bellow) to save extra data to the $field
+    *
+    *  @type	action
+    *  @since	3.6
+    *  @date	23/01/13
+    *
+    *  @param	$field	- an array holding all the field's data
+    */
+
+    function render_field_settings($field)
+    {
+
+      // display_format
+      acf_render_field_setting($field, array(
+        'label' => __('Default Value', 'acf'),
+        'instructions' => '',
+        'type' => 'text',
+        'name' => 'default_value',
+        'placeholder' => '#FFFFFF'
+      ));
+
+    }
+
+  }
 
 
 // initialize
-acf_register_field_type( 'acf_field_color_picker' );
+  acf_register_field_type('acf_field_color_picker');
 
 endif; // class_exists check