diff --git a/src/css/component.css b/src/css/component.css
index 58b0ad1..23175bf 100644
--- a/src/css/component.css
+++ b/src/css/component.css
@@ -42,6 +42,38 @@
     border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
 }
 
+/****************\
+| UI Color Input |
+\****************/
+
+.ui_color_input {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+    vertical-align: middle;   
+}
+
+.ui_color_input input[type="color"] {
+    display: block;
+    cursor: pointer;
+	padding: 0;
+    border: .2rem solid var(--input-background-color);
+	width: 3rem;
+}
+
+.ui_color_input .alpha_overlay {
+    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9bRdGKiBlERDJUJwuiIo5ahSJUCLVCqw4mL/2DJg1Jiouj4Fpw8Gex6uDirKuDqyAI/oA4OTopukiJ9yWFFjFeeLyP8+45vHcfEKyVmGa1jQOabpvJeExMZ1bFjld0YxgBCOiTmWXMSVICvvV1T51Ud1Ge5d/3Z/WoWYsBAZF4lhmmTbxBPL1pG5z3iQVWkFXic+Ixky5I/Mh1xeM3znmXgzxTMFPJeWKBWMy3sNLCrGBqxFPEEVXTKT+Y9ljlvMVZK1VY4578heGsvrLMdVpDiGMRS5AgQkEFRZRgI0q7ToqFJJ3HfPyDrl8il0KuIhg5FlCGBtn1g//B79lauckJLykcA9pfHOdjBOjYBepVx/k+dpz6CRB6Bq70pr9cA2Y+Sa82tcgR0LsNXFw3NWUPuNwBBp4M2ZRdKUQrmMsB72f0TRmg/xboWvPm1jjH6QOQolklboCDQ2A0T9nrPu/ubJ3bvz2N+f0AL+pyjMZuudYAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfkCx4BHwaj7CMVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAC5JREFUOMtjfPfuHQNuICgoiEeWiYECMKp5ZGhm/P//Px7p9+/fjwbYqGZKNAMAANAI7r7rfkQAAAAASUVORK5CYII=');
+    background-size: 100% 100%;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    right: 3px;
+    bottom: 3px;
+    pointer-events: none;
+}
+
 /**************************\
 | UI Color Picker Gradient |
 \**************************/
@@ -244,11 +276,16 @@ button img{
 }
 .ui_input_group > input,
 .ui_input_group > .ui_number_input,
-.ui_input_group > .ui_range {
+.ui_input_group > .ui_range,
+.ui_input_group > .ui_color_sample {
     border-radius: 0;
     height: auto;
     min-width: 0;
 }
+.ui_input_group > .ui_color_sample {
+    border: none;
+    width: 100%;
+}
 .ui_input_group > :first-child {
     border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
 }
@@ -572,6 +609,30 @@ button img{
 .ui_swatches .swatch_group.rows_3 {
     max-height: calc(6.9rem - 2px);
 }
+.ui_swatches .swatch_group.cols_1 .swatch {
+    width: 100%;
+}
+.ui_swatches .swatch_group.cols_2 .swatch {
+    width: 50%;
+}
+.ui_swatches .swatch_group.cols_3 .swatch {
+    width: 33.33%;
+}
+.ui_swatches .swatch_group.cols_4 .swatch {
+    width: 25%;
+}
+.ui_swatches .swatch_group.cols_5 .swatch {
+    width: 20%;
+}
+.ui_swatches .swatch_group.cols_6 .swatch {
+    width: 16.66%;
+}
+.ui_swatches .swatch_group.cols_7 .swatch {
+    width: 14.29%;
+}
+.ui_swatches .swatch_group.cols_8 .swatch {
+    width: 12.5%;
+}
 
 .ui_swatches .swatch {
     background: white;
diff --git a/src/css/layout.css b/src/css/layout.css
index 6cfdfbd..8b8e3a9 100644
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -473,7 +473,7 @@ body .sp-preview{
 	clear:both;
 	margin-bottom: 2px;
 }
-.block.details input{
+.block.details input[type="number"]{
 	width: 70px;
 	padding: 3px 5px;
 }
@@ -638,3 +638,27 @@ canvas{
 		width: 88px;
 	}
 }
+
+/* ========== dialogs ======================================================= */
+
+#dialog_color_picker_group {
+	width: 60%;
+}
+#dialog_color_channel_group {
+	width: 40%;
+	margin-left: 1rem;
+}
+
+@media screen and (max-width: 450px) {
+	#dialog_color_picker .ui_flex_group {
+		flex-wrap: wrap;
+	}
+	#dialog_color_picker_group {
+		width: 100%;
+	}
+	#dialog_color_channel_group {
+		width: 100%;
+		margin-left: 0;
+		margin-top: 1rem;
+	}
+}
\ No newline at end of file
diff --git a/src/css/popup.css b/src/css/popup.css
index 372e183..87df3c6 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -1,4 +1,4 @@
-#popup{
+#popup {
 	position:fixed;
 	display:none;
 	top: 15vh;
@@ -12,12 +12,11 @@
 	max-width: 500px;
 	max-height: calc(80vh);
 	margin:0px auto 0px auto;
-	padding:10px;
+	padding: 4rem 0 5rem 0;
 	box-shadow: 0 0 0 4000px rgba(0,0,0,0.3), 0 0 20px rgba(0,0,0,0.5);
 	z-index: 100;
-	overflow-y: auto;
 	font-size: 13px;
-	overflow-y: scroll;
+	overflow: hidden;
 }
 #popup.wide{
 	max-width: 840px;
@@ -26,27 +25,52 @@
 	color: var(--link-color);
 }
 #popup h2{
-	margin: -10px -10px 5px -10px;
-	padding: 6px 10px;
-	font-size: 18px;
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	margin: 0;
+	height: 4rem;
+	line-height: 4rem;
+	padding: 0 1rem;
+	font-size: 1.8rem;
 	background-color: rgba(255, 255, 255, 0.3);
 	background-color: var(--header-background-color);
+	z-index: 0;
 	/*cursor:move;*/
 }
+#popup #dialog_content {
+	overflow-y: auto;
+	max-height: calc(80vh - 9rem);
+	padding: 1rem;
+}
 #popup .buttons{
-	text-align:center;
-	margin-top:20px;
-	margin-bottom:5px;
+	position: absolute;
+	background-color: var(--block-background-color);
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 5rem;
+	line-height: 4rem;
+	margin: 0;
+	padding: .5rem 0;
+	text-align: center;
+	border-top: 1px solid var(--header-background-color);
 }
 #popup .close{
-	float: right;
+	position: absolute;
+	right: 0;
+	top: 0;
 	min-width: 0;
 	padding: 5px;
 	line-height: 0.5;
 	font-size: 16px;
-	margin-left: 10px;
+	margin-top: 10px;
+	margin-right: 10px;
 	border: none;
 	background: none;
+	z-index: 1;
 }
 #popup td, #popup th{
 	height: 25px;
diff --git a/src/css/utility.css b/src/css/utility.css
index 4a2b0f2..6a387e7 100644
--- a/src/css/utility.css
+++ b/src/css/utility.css
@@ -11,6 +11,11 @@
     max-width: 6.4rem;
     overflow: hidden;
 }
+.label_width_medium {
+    width: 100%;
+    max-width: 10.4rem;
+    overflow: hidden;
+}
 
 /* Font color utility */
 .text_red { color: var(--text-color-red); }
diff --git a/src/js/config.js b/src/js/config.js
index 1a08c77..0e5ac72 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -18,6 +18,9 @@ config.layer = null;
 config.need_render = false;
 config.need_render_changed_params = false; // Set specifically when param change in layer details triggered render
 config.mouse = {};
+config.swatches = {
+	default: [] // Only default used right now, object format for swatch swapping in future.
+};
 
 //requires styles in reset.css
 config.themes = [
diff --git a/src/js/core/components/color-input.js b/src/js/core/components/color-input.js
new file mode 100644
index 0000000..0673bed
--- /dev/null
+++ b/src/js/core/components/color-input.js
@@ -0,0 +1,171 @@
+import Helper_class from './../../libs/helpers.js';
+import Dialog_class from './../../libs/popup.js';
+import GUI_colors_class from './../gui/gui-colors.js';
+
+const Helper = new Helper_class();
+let POP;
+
+/**
+ * This input opens a custom color picker dialog that is more tightly integrated with the application (swatch selection, etc).
+ * It can also handle alpha values, whereas native color input can't.
+ */
+
+(function ($) {
+
+	const template = `
+		<div class="ui_color_input">
+			<input type="color">
+			<div class="alpha_overlay"></div>
+		</div>
+	`;
+
+	const on_click_color_input = (event) => {
+		event.preventDefault();
+		const $el = $(event.target.closest('.ui_color_input'));
+		const { value } = $el.data();
+		if (!POP) {
+			POP = new Dialog_class();
+		}
+		let colorsDialog = new GUI_colors_class();
+		var settings = {
+			title: 'Color Picker',
+			on_finish() {
+				set_value($el, colorsDialog.COLOR + (colorsDialog.ALPHA < 255 ? colorsDialog.ALPHA.toString(16).padStart(2, '0') : ''));
+				$el.trigger('input');
+				$el.trigger('change');
+				colorsDialog = null;
+			},
+			params: [
+				{
+					function() {
+						var html = '<div id="dialog_color_picker"></div>';
+						return html;
+					}
+				}
+			],
+		};
+		let colorValue;
+		let alpha = 255;
+		if (/^\#[0-9A-F]{8}$/gi.test(value)) {
+			// Hex with alpha
+			colorValue = value.slice(0, 7);
+			alpha = parseInt(value.slice(7, 9), 16);
+		} else if (/^\#[0-9A-F]{6}$/gi.test(value)) {
+			// Hex without alpha
+			colorValue = value;
+		} else {
+			colorValue = '#000000';
+		}
+		POP.show(settings);
+		colorsDialog.render_main_colors('dialog');
+		colorsDialog.set_color({ hex: colorValue, a: alpha });
+	};
+
+	const set_value = ($el, value) => {
+		const trimmedValue = (value + '').trim();
+		let colorValue;
+		let opacity = 0;
+		if (/^\#[0-9A-F]{8}$/gi.test(trimmedValue)) {
+			// Hex with alpha
+			colorValue = trimmedValue.slice(0, 7);
+			opacity = 1 - (parseInt(value.slice(7, 9), 16) * (1 / 255));
+		} else if (/^\#[0-9A-F]{6}$/gi.test(trimmedValue)) {
+			// Hex without alpha
+			colorValue = trimmedValue;
+		} else {
+			return;
+		}
+		const { input, overlay } = $el.data();
+		overlay.style.opacity = opacity;
+		input.value = colorValue;
+        $el.data('value', trimmedValue);
+	};
+
+	const set_disabled = ($el, disabled) => {
+		const { input } = $el.data();
+        if (disabled) {
+            input.setAttribute('disabled', 'disabled');
+        } else {
+            input.removeAttribute('disabled');
+        }
+        $el.data('disabled', disabled);
+	};
+
+	$.fn.uiColorInput = function(behavior, ...args) {
+		let returnValues = [];
+		for (let i = 0; i < this.length; i++) {
+			let el = this[i];
+
+			// Constructor
+			if (Object.prototype.toString.call(behavior) !== '[object String]') {
+				const definition = behavior || {};
+
+				const classList = el.className;
+				const id = definition.id != null ? definition.id : el.getAttribute('id');
+				const disabled = definition.disabled != null ? definition.disabled : el.hasAttribute('disabled') ? true : false;
+				const value = definition.value != null ? definition.value : el.value || 0;
+				const ariaLabeledBy = el.getAttribute('aria-labelledby');
+
+				let $el;
+				if (el.parentNode) {
+					$(el).after(template);
+					const oldEl = el;
+					el = el.nextElementSibling;
+					$(oldEl).remove();
+				} else {
+					const orphanedParent = document.createElement('div');
+					orphanedParent.innerHTML = template;
+					el = orphanedParent.firstElementChild;
+				}
+				this[i] = el;
+				$el = $(el);
+
+				const input = $el.find('input[type="color"]')[0];
+				const overlay = $el.find('.alpha_overlay')[0];
+
+				if (classList) {
+					el.classList.add(classList);
+				}
+				if (id) {
+					el.setAttribute('id', id);
+				}
+				if (ariaLabeledBy) {
+					input.setAttribute('aria-labelledby', ariaLabeledBy);
+				}
+
+				$el.data({
+					id,
+					input,
+					overlay,
+					value
+				});
+
+				$(input)
+					.on('click', on_click_color_input)
+
+				set_value($el, value);
+				set_disabled($el, disabled);
+			}
+			// Behaviors
+			else if (behavior === 'set_value') {
+                const newValue = args[0];
+                const $el = $(el);
+                if ($el.data('value') !== newValue) {
+                    set_value($(el), newValue);
+                }
+            }
+            else if (behavior === 'get_value') {
+                returnValues.push($(el).data('value'));
+            }
+            else if (behavior === 'get_id') {
+                returnValues.push($(el).data('id'));
+            }
+		}
+		if (returnValues.length > 0) {
+			return returnValues.length === 1 ? returnValues[0] : returnValues;
+		} else {
+			return this;
+		}
+	}
+
+})(jQuery);
\ No newline at end of file
diff --git a/src/js/core/components/color-picker-gradient.js b/src/js/core/components/color-picker-gradient.js
index eccd702..f827750 100644
--- a/src/js/core/components/color-picker-gradient.js
+++ b/src/js/core/components/color-picker-gradient.js
@@ -60,6 +60,7 @@ var Helper = new Helper_class();
     };
 
     const on_mouse_down_secondary_pick = (event) => {
+        event.preventDefault();
         const $el = $(event.target.closest('.ui_color_picker_gradient'));
         const { secondaryPick, secondaryPickHandle, hsv } = $el.data();
         const clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
@@ -140,6 +141,7 @@ var Helper = new Helper_class();
 
                 const id = definition.id != null ? definition.id : el.getAttribute('id'); 
                 const label = definition.label != null ? definition.label : el.getAttribute('aria-label');
+                const hsv = definition.hsv || { h: 0, s: 0, v: 0 };
 
                 $(el).after(template);
                 const oldEl = el;
@@ -178,9 +180,11 @@ var Helper = new Helper_class();
                     primaryRange: $primaryRange[0],
                     secondaryPick,
                     secondaryPickHandle: $el.find('.secondary_pick .handle')[0],
-                    hsv: { h: 0, s: 0, v: 0 }
+                    hsv
                 });
 
+                set_hsv($el, hsv);
+
                 $(secondaryPick).on('keydown', on_key_down_secondary_pick);
                 $(secondaryPick).on('mousedown touchstart', on_mouse_down_secondary_pick);
                 $(secondaryPick).on('touchmove', on_touch_move_secondary_pick);
diff --git a/src/js/core/components/index.js b/src/js/core/components/index.js
index 0785c0b..4db60ee 100644
--- a/src/js/core/components/index.js
+++ b/src/js/core/components/index.js
@@ -1,4 +1,5 @@
 
+import './color-input.js';
 import './color-picker-gradient.js';
 import './number-input.js';
 import './range.js';
diff --git a/src/js/core/components/range.js b/src/js/core/components/range.js
index 29621b0..ea00322 100644
--- a/src/js/core/components/range.js
+++ b/src/js/core/components/range.js
@@ -1,233 +1,234 @@
 
 (function ($) {
 
-    const template = `
-        <div class="ui_range" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
-            <div class="padded_track"></div>
-            <div class="bar">
-                <div class="handle"></div>
-            </div>
-        </div>
-    `;
+	const template = `
+		<div class="ui_range" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
+			<div class="padded_track"></div>
+			<div class="bar">
+				<div class="handle"></div>
+			</div>
+		</div>
+	`;
 
-    const on_keydown_range = (event) => {
-        const $el = $(event.target.closest('.ui_range'));
-        const key = event.key;
-        const { value, step, min, max } = $el.data();
-        if (['Left', 'ArrowLeft', 'Down', 'ArrowDown'].includes(key)) {
-            event.preventDefault();
-            set_value($el, value - step);
-            $el.trigger('input');
-        }
-        else if (['Right', 'ArrowRight', 'Up', 'ArrowUp'].includes(key)) {
-            event.preventDefault();
-            set_value($el, value + step);
-            $el.trigger('input');
-        }
-        else if (['PageUp'].includes(key)) {
-            event.preventDefault();
-            set_value($el, value + (step * 10));
-            $el.trigger('input');
-        }
-        else if (['PageDown'].includes(key)) {
-            event.preventDefault();
-            set_value($el, value - (step * 10));
-            $el.trigger('input');
-        }
-        else if (['Home'].includes(key)) {
-            event.preventDefault();
-            set_value($el, min);
-            $el.trigger('input');
-        }
-        else if (['End'].includes(key)) {
-            event.preventDefault();
-            set_value($el, max);
-            $el.trigger('input');
-        }
-    };
+	const on_keydown_range = (event) => {
+		const $el = $(event.target.closest('.ui_range'));
+		const key = event.key;
+		const { value, step, min, max } = $el.data();
+		if (['Left', 'ArrowLeft', 'Down', 'ArrowDown'].includes(key)) {
+			event.preventDefault();
+			set_value($el, value - step);
+			$el.trigger('input');
+		}
+		else if (['Right', 'ArrowRight', 'Up', 'ArrowUp'].includes(key)) {
+			event.preventDefault();
+			set_value($el, value + step);
+			$el.trigger('input');
+		}
+		else if (['PageUp'].includes(key)) {
+			event.preventDefault();
+			set_value($el, value + (step * 10));
+			$el.trigger('input');
+		}
+		else if (['PageDown'].includes(key)) {
+			event.preventDefault();
+			set_value($el, value - (step * 10));
+			$el.trigger('input');
+		}
+		else if (['Home'].includes(key)) {
+			event.preventDefault();
+			set_value($el, min);
+			$el.trigger('input');
+		}
+		else if (['End'].includes(key)) {
+			event.preventDefault();
+			set_value($el, max);
+			$el.trigger('input');
+		}
+	};
 
-    const on_wheel_range = (event) => {
-        const $el = $(event.target.closest('.ui_range'));
-        if (document.activeElement === $el[0]) {
-            const { value, step } = $el.data();
-            if (event.originalEvent.deltaY < 0) {
-                event.preventDefault();
-                set_value($el, value + step);
-                $el.trigger('input');
-            }
-            else if (event.originalEvent.deltaY > 0) {
-                event.preventDefault();
-                set_value($el, value - step);
-                $el.trigger('input');
-            }
-        }
-    };
+	const on_wheel_range = (event) => {
+		const $el = $(event.target.closest('.ui_range'));
+		if (document.activeElement === $el[0]) {
+			const { value, step } = $el.data();
+			if (event.originalEvent.deltaY < 0) {
+				event.preventDefault();
+				set_value($el, value + step);
+				$el.trigger('input');
+			}
+			else if (event.originalEvent.deltaY > 0) {
+				event.preventDefault();
+				set_value($el, value - step);
+				$el.trigger('input');
+			}
+		}
+	};
 
-    const on_mouse_down_range = (event) => {
-        const target = event.touches && event.touches.length > 0 ? event.touches[0].target : event.target;
-        const $el = $(target.closest('.ui_range'));
-        const { handle, paddedTrack, value, min, max, vertical } = $el.data();
-        const mouseDownClientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
-        const mouseDownClientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
-        const mouseDownPaddedTrackRect = paddedTrack.getBoundingClientRect();
-        let mouseDownValue = value;
-        if (target !== handle) {
-            let range, valueInRange;
-            if (vertical) {
-                range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
-                valueInRange = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
-            } else {
-                range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
-                valueInRange = mouseDownClientX - mouseDownPaddedTrackRect.left;
-            }
-            const ratio = Math.max(0, Math.min(1, valueInRange / range));
-            mouseDownValue = (max - min) * ratio;
-            set_value($el, mouseDownValue);
-            $el.trigger('input');
-        }
-        $el.data({
-            mouseDownValue,
-            mouseDownClientX,
-            mouseDownClientY,
-            mouseDownPaddedTrackRect,
-            mouseMoveWindowHandler: generate_on_mouse_move_window($el),
-            mouseUpWindowHandler: generate_on_mouse_up_window($el)
-        });
-        $el.addClass('active');
-        const $window = $(window);
-        $window.on('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
-        $window.on('mouseup touchend', $el.data('mouseUpWindowHandler'));
-        $el[0].focus();
-    };
+	const on_mouse_down_range = (event) => {
+		event.preventDefault();
+		const target = event.touches && event.touches.length > 0 ? event.touches[0].target : event.target;
+		const $el = $(target.closest('.ui_range'));
+		const { handle, paddedTrack, value, min, max, vertical } = $el.data();
+		const mouseDownClientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
+		const mouseDownClientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
+		const mouseDownPaddedTrackRect = paddedTrack.getBoundingClientRect();
+		let mouseDownValue = value;
+		if (target !== handle) {
+			let range, valueInRange;
+			if (vertical) {
+				range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
+				valueInRange = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
+			} else {
+				range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
+				valueInRange = mouseDownClientX - mouseDownPaddedTrackRect.left;
+			}
+			const ratio = Math.max(0, Math.min(1, valueInRange / range));
+			mouseDownValue = (max - min) * ratio;
+			set_value($el, mouseDownValue);
+			$el.trigger('input');
+		}
+		$el.data({
+			mouseDownValue,
+			mouseDownClientX,
+			mouseDownClientY,
+			mouseDownPaddedTrackRect,
+			mouseMoveWindowHandler: generate_on_mouse_move_window($el),
+			mouseUpWindowHandler: generate_on_mouse_up_window($el)
+		});
+		$el.addClass('active');
+		const $window = $(window);
+		$window.on('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
+		$window.on('mouseup touchend', $el.data('mouseUpWindowHandler'));
+		$el[0].focus();
+	};
 
-    const on_touch_move_range = (event) => {
-        event.preventDefault();
-    };
+	const on_touch_move_range = (event) => {
+		event.preventDefault();
+	};
 
-    const generate_on_mouse_move_window = ($el) => {
-        return (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            const { mouseDownValue, min, max, vertical, mouseDownClientX, mouseDownClientY, mouseDownPaddedTrackRect } = $el.data();
-            let range, offset, startValue;
-            if (vertical) {
-                const clientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
-                range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
-                const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
-                startValue = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
-                offset = clientY - mouseDownClientY + (mouseDownValueInPixelRange - startValue);
-            } else {
-                const clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
-                range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
-                const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
-                startValue = mouseDownClientX - mouseDownPaddedTrackRect.left;
-                offset = clientX - mouseDownClientX + (mouseDownValueInPixelRange - startValue);
-            }
-            const ratio = Math.max(0, Math.min(1, (startValue + offset) / range));
-            const value = (max - min) * ratio;
-            set_value($el, value);
-            $el.trigger('input');
-        };
-    };
+	const generate_on_mouse_move_window = ($el) => {
+		return (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			const { mouseDownValue, min, max, vertical, mouseDownClientX, mouseDownClientY, mouseDownPaddedTrackRect } = $el.data();
+			let range, offset, startValue;
+			if (vertical) {
+				const clientY = event.touches && event.touches.length > 0 ? event.touches[0].clientY : event.clientY;
+				range = mouseDownPaddedTrackRect.top - mouseDownPaddedTrackRect.bottom;
+				const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
+				startValue = mouseDownClientY - mouseDownPaddedTrackRect.bottom;
+				offset = clientY - mouseDownClientY + (mouseDownValueInPixelRange - startValue);
+			} else {
+				const clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
+				range = mouseDownPaddedTrackRect.right - mouseDownPaddedTrackRect.left;
+				const mouseDownValueInPixelRange = ((mouseDownValue - min) / (max - min)) * range;
+				startValue = mouseDownClientX - mouseDownPaddedTrackRect.left;
+				offset = clientX - mouseDownClientX + (mouseDownValueInPixelRange - startValue);
+			}
+			const ratio = Math.max(0, Math.min(1, (startValue + offset) / range));
+			const value = (max - min) * ratio;
+			set_value($el, value);
+			$el.trigger('input');
+		};
+	};
 
-    const generate_on_mouse_up_window = ($el) => {
-        return (event) => {
-            const $window = $(window);
-            $el.removeClass('active');
-            $window.off('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
-            $window.off('mouseup touchend', $el.data('mouseUpWindowHandler'));
-        };
-    };
+	const generate_on_mouse_up_window = ($el) => {
+		return (event) => {
+			const $window = $(window);
+			$el.removeClass('active');
+			$window.off('mousemove touchmove', $el.data('mouseMoveWindowHandler'));
+			$window.off('mouseup touchend', $el.data('mouseUpWindowHandler'));
+		};
+	};
 
-    const set_value = ($el, value) => {
-        const { bar, min, max, step, vertical } = $el.data();
-        value = step * Math.round(value / step);
-        value = Math.max(min, Math.min(max, value));
-        $el.data('value', value);
-        $el.attr('aria-valuemin', min);
-        $el.attr('aria-valuemax', max);
-        $el.attr('aria-valuenow', value);
-        if (vertical) {
-            bar.style.height = (((value - min) / (max - min)) * 100) + '%';
-        } else {
-            bar.style.width = (((value - min) / (max - min)) * 100) + '%';
-        }
-    };
+	const set_value = ($el, value) => {
+		const { bar, min, max, step, vertical } = $el.data();
+		value = step * Math.round(value / step);
+		value = Math.max(min, Math.min(max, value));
+		$el.data('value', value);
+		$el.attr('aria-valuemin', min);
+		$el.attr('aria-valuemax', max);
+		$el.attr('aria-valuenow', value);
+		if (vertical) {
+			bar.style.height = (((value - min) / (max - min)) * 100) + '%';
+		} else {
+			bar.style.width = (((value - min) / (max - min)) * 100) + '%';
+		}
+	};
 
 	$.fn.uiRange = function(behavior, ...args) {
-        let returnValues = [];
-        for (let i = 0; i < this.length; i++) {
-            let el = this[i];
+		let returnValues = [];
+		for (let i = 0; i < this.length; i++) {
+			let el = this[i];
 
-            // Constructor
-            if (Object.prototype.toString.call(behavior) !== '[object String]') {
-                const definition = behavior || {};
+			// Constructor
+			if (Object.prototype.toString.call(behavior) !== '[object String]') {
+				const definition = behavior || {};
 
-                const classList = el.className;
-                const id = definition.id != null ? definition.id : el.getAttribute('id'); 
-                const value = definition.value != null ? definition.value : parseFloat(el.value) || 0;
-                const min = definition.min != null ? definition.min : parseFloat(el.getAttribute('min')) || 0;
-                const max = definition.max != null ? definition.max : parseFloat(el.getAttribute('max')) || 0;
-                const step = definition.step != null ? definition.step : el.hasAttribute('step') ? parseFloat(el.getAttribute('step')) : 1;
-                const vertical = !!definition.vertical;
+				const classList = el.className;
+				const id = definition.id != null ? definition.id : el.getAttribute('id'); 
+				const value = definition.value != null ? definition.value : parseFloat(el.value) || 0;
+				const min = definition.min != null ? definition.min : parseFloat(el.getAttribute('min')) || 0;
+				const max = definition.max != null ? definition.max : parseFloat(el.getAttribute('max')) || 0;
+				const step = definition.step != null ? definition.step : el.hasAttribute('step') ? parseFloat(el.getAttribute('step')) : 1;
+				const vertical = !!definition.vertical;
 
-                $(el).after(template);
-                const oldEl = el;
-                el = el.nextElementSibling;
-                $(oldEl).remove();
-                this[i] = el;
-                const $el = $(el);
+				$(el).after(template);
+				const oldEl = el;
+				el = el.nextElementSibling;
+				$(oldEl).remove();
+				this[i] = el;
+				const $el = $(el);
 
-                if (classList) {
-                    el.classList.add(classList);
-                }
-                if (vertical) {
-                    el.classList.add('vertical');
-                }
-                if (id) {
-                    el.setAttribute('id', id);
-                }
+				if (classList) {
+					el.classList.add(classList);
+				}
+				if (vertical) {
+					el.classList.add('vertical');
+				}
+				if (id) {
+					el.setAttribute('id', id);
+				}
 
-                $el.data({
-                    paddedTrack: $('.padded_track', el).get(0),
-                    bar: $('.bar', el).get(0),
-                    handle: $('.handle', el).get(0),
-                    vertical,
-                    value,
-                    min,
-                    max,
-                    step
-                });
+				$el.data({
+					paddedTrack: $('.padded_track', el).get(0),
+					bar: $('.bar', el).get(0),
+					handle: $('.handle', el).get(0),
+					vertical,
+					value,
+					min,
+					max,
+					step
+				});
 
-                set_value($el, value);
+				set_value($el, value);
 
-                $el
-                    .on('mousedown touchstart', on_mouse_down_range)
-                    .on('touchmove', on_touch_move_range)
-                    .on('keydown', on_keydown_range)
-                    .on('wheel', on_wheel_range);
-            }
-            // Behaviors
-            else if (behavior === 'set_background') {
-                const backgroundStyle = args[0];
-                $(el).data('paddedTrack').style.background = backgroundStyle;
-            }
-            else if (behavior === 'set_value') {
-                const newValue = parseFloat(args[0]);
-                const $el = $(el);
-                if ($el.data('value') !== newValue) {
-                    set_value($(el), newValue);
-                }
-            }
-            else if (behavior === 'get_value') {
-                returnValues.push($(el).data('value'));
-            }
-        }
-        if (returnValues.length > 0) {
-            return returnValues.length === 1 ? returnValues[0] : returnValues;
-        } else {
-            return this;
-        }
-    };
+				$el
+					.on('mousedown touchstart', on_mouse_down_range)
+					.on('touchmove', on_touch_move_range)
+					.on('keydown', on_keydown_range)
+					.on('wheel', on_wheel_range);
+			}
+			// Behaviors
+			else if (behavior === 'set_background') {
+				const backgroundStyle = args[0];
+				$(el).data('paddedTrack').style.background = backgroundStyle;
+			}
+			else if (behavior === 'set_value') {
+				const newValue = parseFloat(args[0]);
+				const $el = $(el);
+				if ($el.data('value') !== newValue) {
+					set_value($(el), newValue);
+				}
+			}
+			else if (behavior === 'get_value') {
+				returnValues.push($(el).data('value'));
+			}
+		}
+		if (returnValues.length > 0) {
+			return returnValues.length === 1 ? returnValues[0] : returnValues;
+		} else {
+			return this;
+		}
+	};
 
 })(jQuery);
\ No newline at end of file
diff --git a/src/js/core/components/swatches.js b/src/js/core/components/swatches.js
index 6fe1075..e7019b6 100644
--- a/src/js/core/components/swatches.js
+++ b/src/js/core/components/swatches.js
@@ -1,135 +1,170 @@
 (function ($) {
 
-    const template = `
-        <div class="ui_swatches">
+	const template = `
+		<div class="ui_swatches">
 			<div class="swatch_group" tabindex="0">
-            </div>
-        </div>
-    `;
+			</div>
+		</div>
+	`;
 
-    const on_key_down_swatches = (event) => {
-        const $el = $(event.target.closest('.ui_swatches'));
-        const key = event.key;
-        const { rows, count, selectedIndex } = $el.data();
-        if (['Left', 'ArrowLeft'].includes(key)) {
-            event.preventDefault();
-            set_selected_index($el, selectedIndex - 1);
-            $el.trigger('input');
-        }
-        else if (['Right', 'ArrowRight'].includes(key)) {
-            event.preventDefault();
-            set_selected_index($el, selectedIndex + 1);
-            $el.trigger('input');
-        }
-        else if (['Up', 'ArrowUp'].includes(key)) {
-            event.preventDefault();
-            set_selected_index($el, selectedIndex - Math.floor(count / rows));
-            $el.trigger('input');
-        }
-        else if (['Down', 'ArrowDown'].includes(key)) {
-            event.preventDefault();
-            set_selected_index($el, selectedIndex + Math.floor(count / rows));
-            $el.trigger('input');
-        }
-    };
+	const on_key_down_swatches = (event) => {
+		const $el = $(event.target.closest('.ui_swatches'));
+		const key = event.key;
+		const { rows, count, selectedIndex } = $el.data();
+		if (['Left', 'ArrowLeft'].includes(key)) {
+			event.preventDefault();
+			set_selected_index($el, selectedIndex - 1);
+			$el.trigger('input');
+		}
+		else if (['Right', 'ArrowRight'].includes(key)) {
+			event.preventDefault();
+			set_selected_index($el, selectedIndex + 1);
+			$el.trigger('input');
+		}
+		else if (['Up', 'ArrowUp'].includes(key)) {
+			event.preventDefault();
+			set_selected_index($el, selectedIndex - Math.floor(count / rows));
+			$el.trigger('input');
+		}
+		else if (['Down', 'ArrowDown'].includes(key)) {
+			event.preventDefault();
+			set_selected_index($el, selectedIndex + Math.floor(count / rows));
+			$el.trigger('input');
+		}
+	};
 
-    const on_click_swatches = (event) => {
-        const target = event.target;
-        const $el = $(target.closest('.ui_swatches'));
-        if (target.classList.contains('swatch')) {
-            const { swatches } = $el.data();
-            set_selected_index($el, swatches.indexOf(target));
-            $el.trigger('input');
-        }
-    };
+	const on_click_swatches = (event) => {
+		const target = event.target;
+		const $el = $(target.closest('.ui_swatches'));
+		if (target.classList.contains('swatch')) {
+			const { swatches } = $el.data();
+			set_selected_index($el, swatches.indexOf(target));
+			$el.trigger('input');
+		}
+	};
 
-    const set_selected_index = ($el, index) => {
-        const { swatches } = $el.data();
-        if (swatches[index]) {
-            $el.find('.active').removeClass('active');
-            $el.data('selectedIndex', index);
-            $(swatches[index]).addClass('active');
-        }
-    };
+	const set_selected_index = ($el, index) => {
+		const { readonly, swatches } = $el.data();
+		if (swatches[index]) {
+			$el.data('selectedIndex', index);
+			if (!readonly) {
+				$el.find('.active').removeClass('active');
+				$(swatches[index]).addClass('active');
+			}
+		}
+	};
 
-    const set_selected_hex = ($el, hex) => {
-        const { selectedIndex, swatches } = $el.data();
-        if (/^\#[0-9A-F]{6}$/gi.test(hex)) {
-            const swatch = swatches[selectedIndex];
-            $(swatch)
-                .data('hex', hex)
-                .css('background-color', hex);
-        }
-    };
+	const set_selected_hex = ($el, hex) => {
+		const { selectedIndex, swatches } = $el.data();
+		if (/^\#[0-9A-F]{6}$/gi.test(hex)) {
+			const swatch = swatches[selectedIndex];
+			$(swatch)
+				.data('hex', hex)
+				.css('background-color', hex);
+		}
+	};
 
-    $.fn.uiSwatches = function(behavior, ...args) {
-        let returnValues = [];
-        for (let i = 0; i < this.length; i++) {
-            let el = this[i];
+	const set_all_hex = ($el, hexArray) => {
+		hexArray = hexArray || [];
+		const { swatches } = $el.data();
+		for (let i = 0; i < swatches.length; i++) {
+			if (hexArray[i]) {
+				const hex = hexArray[i];
+				if (/^\#[0-9A-F]{6}$/gi.test(hex)) {
+					$(swatches[i])
+						.data('hex', hex)
+						.css('background-color', hex);
+				}
+			} else {
+				break;
+			}
+		}
+	}
 
-            // Constructor
-            if (Object.prototype.toString.call(behavior) !== '[object String]') {
-                const definition = behavior || {};
+	$.fn.uiSwatches = function(behavior, ...args) {
+		let returnValues = [];
+		for (let i = 0; i < this.length; i++) {
+			let el = this[i];
 
-                const id = definition.id != null ? definition.id : el.getAttribute('id');
-                const rows = definition.rows || 1;
-                const count = definition.count || 10;
-                const selectedIndex = definition.selectedIndex != null ? definition.selectedIndex : 0;
+			// Constructor
+			if (Object.prototype.toString.call(behavior) !== '[object String]') {
+				const definition = behavior || {};
 
-                $(el).after(template);
-                const oldEl = el;
-                el = el.nextElementSibling;
-                $(oldEl).remove();
-                this[i] = el;
+				const id = definition.id != null ? definition.id : el.getAttribute('id');
+				const cols = definition.cols;
+				const rows = definition.rows || 1;
+				const count = definition.count || 10;
+				const readonly = definition.readonly || false;
+				const selectedIndex = definition.selectedIndex != null ? definition.selectedIndex : 0;
 
-                const $el = $(el);
+				$(el).after(template);
+				const oldEl = el;
+				el = el.nextElementSibling;
+				$(oldEl).remove();
+				this[i] = el;
 
-                const swatchGroup = $el.find('.swatch_group')[0];
+				const $el = $(el);
 
-                if (id) {
-                    el.setAttribute('id', id);
-                }
-                swatchGroup.classList.add('rows_' + rows);
+				const swatchGroup = $el.find('.swatch_group')[0];
 
-                const swatches = [];
-                for (let i = 0; i < count; i++) {
-                    const swatch = document.createElement('div');
-                    swatch.classList.add('swatch');
-                    $(swatch).data('hex', '#ffffff');
-                    swatches.push(swatch);
-                    swatchGroup.appendChild(swatch);
-                    if (i === selectedIndex) {
-                        swatch.classList.add('active');
-                    }
-                }
+				if (id) {
+					el.setAttribute('id', id);
+				}
+				if (cols) {
+					swatchGroup.classList.add('cols_' + cols);
+				}
+				swatchGroup.classList.add('rows_' + rows);
 
-                $el.data({
-                    selectedIndex,
-                    swatchGroup,
-                    swatches,
-                    count,
-                    rows
-                });
+				const swatches = [];
+				for (let i = 0; i < count; i++) {
+					const swatch = document.createElement('div');
+					swatch.classList.add('swatch');
+					$(swatch).data('hex', '#ffffff');
+					swatches.push(swatch);
+					swatchGroup.appendChild(swatch);
+					if (i === selectedIndex && !readonly) {
+						swatch.classList.add('active');
+					}
+				}
 
-                $el
-                    .on('click', on_click_swatches)
-                    .on('keydown', on_key_down_swatches);
-            }
-            // Behaviors
-            else if (behavior === 'set_selected_hex') {
-                const newValue = args[0] + '';
-                set_selected_hex($(el), newValue);
-            }
-            else if (behavior === 'get_selected_hex') {
-                const { selectedIndex, swatches } = $(el).data();
-                returnValues.push($(swatches[selectedIndex]).data('hex'));
-            }
-        }
-        if (returnValues.length > 0) {
-            return returnValues.length === 1 ? returnValues[0] : returnValues;
-        } else {
-            return this;
-        }
-    };
+				$el.data({
+					selectedIndex,
+					swatchGroup,
+					swatches,
+					count,
+					cols,
+					rows,
+					readonly
+				});
+
+				$el
+					.on('click', on_click_swatches)
+					.on('keydown', on_key_down_swatches);
+			}
+			// Behaviors
+			else if (behavior === 'set_selected_hex') {
+				const newValue = args[0] + '';
+				set_selected_hex($(el), newValue);
+			}
+			else if (behavior === 'get_selected_hex') {
+				const { selectedIndex, swatches } = $(el).data();
+				returnValues.push($(swatches[selectedIndex]).data('hex'));
+			}
+			else if (behavior === 'set_all_hex') {
+				set_all_hex($(el), args[0]);
+			}
+			else if (behavior === 'get_all_hex') {
+				const { swatches } = $(el).data();
+				for (let swatch of swatches) {
+					returnValues.push($(swatch).data('hex'));
+				}
+			}
+		}
+		if (returnValues.length > 0) {
+			return returnValues.length === 1 ? returnValues[0] : returnValues;
+		} else {
+			return this;
+		}
+	};
 
 })(jQuery);
\ No newline at end of file
diff --git a/src/js/core/gui/gui-colors.js b/src/js/core/gui/gui-colors.js
index faae4b5..f5adf60 100644
--- a/src/js/core/gui/gui-colors.js
+++ b/src/js/core/gui/gui-colors.js
@@ -6,9 +6,9 @@
 import config from './../../config.js';
 import Helper_class from './../../libs/helpers.js';
 
-var Helper = new Helper_class();
+const Helper = new Helper_class();
 
-var template = `
+const sidebarTemplate = `
 	<div class="ui_flex_group justify_content_space_between stacked">
 		<div id="selected_color_sample" class="ui_color_sample" title="Current Color Preview"></div>
 		<div class="ui_button_group">
@@ -95,6 +95,74 @@ var template = `
 	</div>
 `;
 
+const dialogTemplate = `
+	<div class="ui_flex_group">
+		<div id="dialog_color_picker_group" class="ui_flex_group column">
+			<input id="dialog_color_picker_gradient" type="color" aria-label="Color Selection">
+			<div class="block_section">
+				<div class="ui_input_grid stacked">
+					<div class="ui_input_group">
+						<label class="label_width_medium">Current</label>
+						<div id="dialog_selected_color_sample" class="ui_color_sample"></div>
+					</div>
+					<div class="ui_input_group">
+						<label class="label_width_medium">Previous</label>
+						<div id="dialog_previous_color_sample" class="ui_color_sample"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="dialog_color_channel_group">
+			<div class="ui_input_group stacked">
+				<label id="dialog_color_hex_label" title="Hex" class="label_width_small">Hex</label>
+				<input id="dialog_color_hex" aria-labelledby="dialog_color_hex_label" value="#000000" maxlength="7" type="text" />
+			</div>
+			<div class="ui_input_grid stacked">
+				<div class="ui_input_group">
+					<label id="dialog_rgb_r_label" title="Red" class="label_width_character text_red"><strong>R<span class="sr_only">ed</span></strong></label>
+					<input id="dialog_rgb_r_range" aria-labelledby="dialog_rgb_r_label" type="range" min="0" max="255" class="color_picker" />
+					<input id="dialog_rgb_r" min="0" aria-labelledby="dialog_rgb_r_label" max="255" type="number" class="input_cw_3" />
+				</div>
+				<div class="ui_input_group">
+					<label id="dialog_rgb_g_label" title="Green" class="label_width_character text_green"><strong>G<span class="sr_only">reen</span></strong></label>
+					<input id="dialog_rgb_g_range" aria-labelledby="dialog_rgb_g_label" type="range" min="0" max="255" class="color_picker" />
+					<input id="dialog_rgb_g" min="0" aria-labelledby="dialog_rgb_g_label" max="255" type="number" class="input_cw_3" />
+				</div>
+				<div class="ui_input_group">
+					<label id="dialog_rgb_b_label" title="Blue" class="label_width_character text_blue"><strong>B<span class="sr_only">lue</span></strong></label>
+					<input id="dialog_rgb_b_range" aria-labelledby="dialog_rgb_b_label" type="range" min="0" max="255" class="color_picker" />
+					<input id="dialog_rgb_b" min="0" aria-labelledby="dialog_rgb_b_label" max="255" type="number" class="input_cw_3" />
+				</div>
+				<div class="ui_input_group">
+					<label id="dialog_rgb_a_label" title="Alpha" class="label_width_character text_muted"><strong>A<span class="sr_only">lpha</span></strong></label>
+					<input id="dialog_rgb_a_range" aria-labelledby="dialog_rgb_a_label" type="range" min="0" max="255" class="color_picker" />
+					<input id="dialog_rgb_a" min="0" aria-labelledby="dialog_rgb_a_label" max="255" type="number" class="input_cw_3" />
+				</div>
+			</div>
+			<div class="ui_input_grid stacked">
+				<div class="ui_input_group">
+					<label id="dialog_hsl_h_label" title="Hue" class="label_width_character"><strong>H<span class="sr_only">ue</span></strong></label>
+					<input id="dialog_hsl_h_range" aria-labelledby="dialog_hsl_h_label" type="range" min="0" max="360" class="color_picker" />
+					<input id="dialog_hsl_h" min="0" aria-labelledby="dialog_hsl_h_label" max="360" type="number" class="input_cw_3" />
+				</div>
+				<div class="ui_input_group">
+					<label id="dialog_hsl_s_label" title="Saturation" class="label_width_character"><strong>S<span class="sr_only">aturation</span></strong></label>
+					<input id="dialog_hsl_s_range" aria-labelledby="dialog_hsl_s_label" type="range" min="0" max="100" class="color_picker" />
+					<input id="dialog_hsl_s" min="0" aria-labelledby="dialog_hsl_s_label"max="100" type="number" class="input_cw_3" />
+				</div>
+				<div class="ui_input_group">
+					<label id="dialog_hsl_l_label" title="Luminosity" class="label_width_character"><strong>L<span class="sr_only">uminosity</span></strong></label>
+					<input id="dialog_hsl_l_range" aria-labelledby="dialog_hsl_l_label" type="range" min="0" max="100" class="color_picker" />
+					<input id="dialog_hsl_l" min="0" aria-labelledby="dialog_hsl_l_label"max="100" type="number" class="input_cw_3" />
+				</div>
+			</div>
+			<div class="block_section">
+				<div id="dialog_color_swatches"></div>
+			</div>
+		</div>
+	</div>
+`;
+
 /**
  * GUI class responsible for rendering colors block on right sidebar
  */
@@ -102,77 +170,86 @@ class GUI_colors_class {
 
 	constructor() {
 		this.el = null;
+		this.COLOR = '#000000';
+		this.ALPHA = 255;
+		this.colorNotSet = true;
+		this.uiType = null;
 		this.butons = null;
 		this.sections = null;
 		this.inputs = null;
 		this.Helper = new Helper_class();
 	}
 
-	render_main_colors() {
-		var saved_color = this.Helper.getCookie('color');
-		if(saved_color != null)
-			config.COLOR = saved_color;
-
-		this.el = document.getElementById('toggle_colors');
-		this.el.innerHTML = template;
+	render_main_colors(uiType) {
+		this.uiType = uiType || 'sidebar';
+		if (this.uiType === 'dialog') {
+			this.el = document.getElementById('dialog_color_picker');
+			this.el.innerHTML = dialogTemplate;
+		} else {
+			var saved_color = this.Helper.getCookie('color');
+			if (saved_color != null) config.COLOR = saved_color;
+			this.el = document.getElementById('toggle_colors');
+			this.el.innerHTML = sidebarTemplate;
+		}
 		this.init_components();
-		this.render_range_gradients = Helper.throttle(this.render_range_gradients, 50);
+		this.render_ui_deferred = Helper.throttle(this.render_ui_deferred, 50);
 	}
 
 	init_components() {
 		// Store button references
 		this.buttons = {
-			toggleColorSwatches: $('#toggle_color_swatches_section_button'),
-			toggleColorPicker: $('#toggle_color_picker_section_button'),
-			toggleColorChannels: $('#toggle_color_channels_section_button')
+			toggleColorSwatches: $('#toggle_color_swatches_section_button', this.el),
+			toggleColorPicker: $('#toggle_color_picker_section_button', this.el),
+			toggleColorChannels: $('#toggle_color_channels_section_button', this.el)
 		};
 
 		// Store UI section references
 		this.sections = {
-			swatches: $('#color_section_swatches'),
+			swatches: $('#color_section_swatches', this.el),
 			swatchesPlaceholder: document.createComment('Placeholder comment for color swatches'),
-			picker: $('#color_section_picker'),
+			picker: $('#color_section_picker', this.el),
 			pickerPlaceholder: document.createComment('Placeholder comment for color picker'),
-			channels: $('#color_section_channels'),
+			channels: $('#color_section_channels', this.el),
 			channelsPlaceholder: document.createComment('Placeholder comment for color channels')
 		};
 
 		// Store references to all inputs in DOM
+		const idPrefix = this.uiType === 'dialog' ? 'dialog_' : '';
 		this.inputs = {
-			sample: $('#selected_color_sample'),
-			swatches: $('#color_swatches'),
-			pickerGradient: $('#color_picker_gradient'),
-			hex: $('#color_hex'),
+			sample: $(`#${idPrefix}selected_color_sample`, this.el),
+			swatches: $(`#${idPrefix}color_swatches`, this.el),
+			pickerGradient: $(`#${idPrefix}color_picker_gradient`, this.el),
+			hex: $(`#${idPrefix}color_hex`, this.el),
 			rgb: {
 				r: {
-					range: $('#rgb_r_range'),
-					number: $('#rgb_r')
+					range: $(`#${idPrefix}rgb_r_range`, this.el),
+					number: $(`#${idPrefix}rgb_r`, this.el)
 				},
 				g: {
-					range: $('#rgb_g_range'),
-					number: $('#rgb_g')
+					range: $(`#${idPrefix}rgb_g_range`, this.el),
+					number: $(`#${idPrefix}rgb_g`, this.el)
 				},
 				b: {
-					range: $('#rgb_b_range'),
-					number: $('#rgb_b')
+					range: $(`#${idPrefix}rgb_b_range`, this.el),
+					number: $(`#${idPrefix}rgb_b`, this.el)
 				},
 				a: {
-					range: $('#rgb_a_range'),
-					number: $('#rgb_a')
+					range: $(`#${idPrefix}rgb_a_range`, this.el),
+					number: $(`#${idPrefix}rgb_a`, this.el)
 				}
 			},
 			hsl: {
 				h: {
-					range: $('#hsl_h_range'),
-					number: $('#hsl_h')
+					range: $(`#${idPrefix}hsl_h_range`, this.el),
+					number: $(`#${idPrefix}hsl_h`, this.el)
 				},
 				s: {
-					range: $('#hsl_s_range'),
-					number: $('#hsl_s')
+					range: $(`#${idPrefix}hsl_s_range`, this.el),
+					number: $(`#${idPrefix}hsl_s`, this.el)
 				},
 				l: {
-					range: $('#hsl_l_range'),
-					number: $('#hsl_l')
+					range: $(`#${idPrefix}hsl_l_range`, this.el),
+					number: $(`#${idPrefix}hsl_l`, this.el)
 				}
 			}
 		};
@@ -239,12 +316,15 @@ class GUI_colors_class {
 
 		// Initialize color swatches
 		this.inputs.swatches
-			.uiSwatches({ rows: 3, count: 21 })
+			.uiSwatches({ rows: 3, cols: 7, count: 21, readonly: this.uiType === 'dialog' })
 			.on('input', () => {
 				this.set_color({
 					hex: this.inputs.swatches.uiSwatches('get_selected_hex')
 				});
 			});
+		if (this.uiType === 'dialog') {
+			this.inputs.swatches.uiSwatches('set_all_hex', config.swatches.default);
+		}
 
 		// Initialize color picker gradient
 		this.inputs.pickerGradient
@@ -260,7 +340,8 @@ class GUI_colors_class {
 
 		// Initialize hex entry
 		this.inputs.hex
-			.on('input', () => {
+			.on('input', (event) => {
+				console.log(event);
 				const value = this.inputs.hex.val();
 				const trimmedValue = value.trim();
 				if (value !== trimmedValue) {
@@ -272,7 +353,7 @@ class GUI_colors_class {
 			.on('blur', () => {
 				const value = this.inputs.hex.val();
 				if (!/^\#[0-9A-F]{6}$/gi.test(value)) {
-					this.inputs.hex.val(config.COLOR);
+					this.inputs.hex.val(this.uiType === 'dialog' ? this.COLOR : config.COLOR);
 					this.inputs.hex[0].setCustomValidity('');
 				}
 			});
@@ -296,7 +377,7 @@ class GUI_colors_class {
 		}
 
 		// Update all inputs from config.COLOR
-		this.render_config_color();
+		this.render_selected_color();
 	}
 
 	/**
@@ -322,7 +403,7 @@ class GUI_colors_class {
 		}
 		// Set new color by rgb
 		else if ('r' in definition || 'b' in definition || 'g' in definition) {
-			const previousRgb = Helper.hexToRgb(config.COLOR);
+			const previousRgb = Helper.hexToRgb(this.uiType === 'dialog' ? this.COLOR : config.COLOR);
 			newColor = Helper.rgbToHex(
 				'r' in definition ? Math.min(255, Math.max(0, parseInt(definition.r, 10) || 0)) : previousRgb.r,
 				'g' in definition ? Math.min(255, Math.max(0, parseInt(definition.g, 10) || 0)) : previousRgb.g,
@@ -331,7 +412,7 @@ class GUI_colors_class {
 		}
 		// Set new color by hsv
 		else if ('v' in definition) {
-			const previousRgb = Helper.hexToRgb(config.COLOR);
+			const previousRgb = Helper.hexToRgb(this.uiType === 'dialog' ? this.COLOR : config.COLOR);
 			const previousHsv = Helper.rgbToHsv(previousRgb.r, previousRgb.g, previousRgb.b);
 			hsv = {
 				h: 'h' in definition ? Math.min(360, Math.max(0, parseInt(definition.h, 10) || 0)) / 360 : previousHsv.h,
@@ -355,18 +436,29 @@ class GUI_colors_class {
 		}
 		// Re-render UI if changes made
 		if (newColor != null || newAlpha != null) {
-			config.COLOR = newColor != null ? newColor : config.COLOR;
-			config.ALPHA = newAlpha != null ? newAlpha : config.ALPHA;
+			if (this.uiType === 'dialog') {
+				this.COLOR = newColor != null ? newColor : this.COLOR;
+				this.ALPHA = newAlpha != null ? newAlpha : this.ALPHA;
+				if (this.colorNotSet) {
+					this.colorNotSet = false;
+					$('#dialog_previous_color_sample', this.el)[0].style.background = this.COLOR;
+				}
+			} else {
+				config.COLOR = newColor != null ? newColor : config.COLOR;
+				config.ALPHA = newAlpha != null ? newAlpha : config.ALPHA;
+			}
 			if (hsl && !hsv) {
 				hsv = Helper.hslToHsv(hsl.h, hsl.s, hsl.l);
 			}
 			if (hsv && !hsl) {
 				hsl = Helper.hsvToHsl(hsv.h, hsv.s, hsv.v);
 			}
-			this.render_config_color({ hsl, hsv });
+			this.render_selected_color({ hsl, hsv });
 		}
 
-		this.Helper.setCookie('color', config.COLOR);
+		if (this.uiType === 'sidebar') {
+			this.Helper.setCookie('color', config.COLOR);
+		}
 	}
 
 	/**
@@ -375,25 +467,29 @@ class GUI_colors_class {
 	 *                    hsl - override for hsl values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
 	 *                    hsv - override for hsv values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
 	 */
-	render_config_color(options) {
+	render_selected_color(options) {
 		options = options || {};
+		const COLOR = this.uiType === 'dialog' ? this.COLOR : config.COLOR;
+		const ALPHA = this.uiType === 'dialog' ? this.ALPHA : config.ALPHA;
 
-		this.inputs.sample.css('background', config.COLOR);
+		this.inputs.sample.css('background', COLOR);
 
-		this.inputs.swatches.uiSwatches('set_selected_hex', config.COLOR);
+		if (this.uiType !== 'dialog') {
+			this.inputs.swatches.uiSwatches('set_selected_hex', COLOR);
+		}
 
 		const hexInput = this.inputs.hex[0];
-		hexInput.value = config.COLOR;
+		hexInput.value = COLOR;
 		hexInput.setCustomValidity('');
 
-		const rgb = Helper.hexToRgb(config.COLOR);
+		const rgb = Helper.hexToRgb(COLOR);
 		delete rgb.a;
 		for (let rgbKey in rgb) {
 			this.inputs.rgb[rgbKey].range.uiRange('set_value', rgb[rgbKey]);
 			this.inputs.rgb[rgbKey].number.uiNumberInput('set_value', rgb[rgbKey]);
 		}
-		this.inputs.rgb.a.range.uiRange('set_value', config.ALPHA);
-		this.inputs.rgb.a.number.uiNumberInput('set_value', config.ALPHA);
+		this.inputs.rgb.a.range.uiRange('set_value', ALPHA);
+		this.inputs.rgb.a.number.uiNumberInput('set_value', ALPHA);
 
 		const hsv = options.hsv || Helper.rgbToHsv(rgb.r, rgb.g, rgb.b);
 
@@ -404,7 +500,7 @@ class GUI_colors_class {
 			this.inputs.hsl[hslKey].number.uiNumberInput('set_value', hslValue);
 		}
 
-		this.render_range_gradients({ hsl, hsv });
+		this.render_ui_deferred({ hsl, hsv });
 	}
 
 	/**
@@ -414,11 +510,12 @@ class GUI_colors_class {
 	 *                    hsl - override for hsl values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
 	 *                    hsv - override for hsv values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
 	 */
-	render_range_gradients(options) {
+	render_ui_deferred(options) {
 		options = options || {};
+		const COLOR = this.uiType === 'dialog' ? this.COLOR : config.COLOR;
 
 		// RGB
-		const rgb = Helper.hexToRgb(config.COLOR);
+		const rgb = Helper.hexToRgb(COLOR);
 		delete rgb.a;
 		for (let rgbKey in rgb) {
 			const rangeMin = JSON.parse(JSON.stringify(rgb));
@@ -431,7 +528,7 @@ class GUI_colors_class {
 		}
 		// A
 		this.inputs.rgb.a.range.uiRange('set_background',
-			`linear-gradient(to right, transparent, ${ config.COLOR })`
+			`linear-gradient(to right, transparent, ${ COLOR })`
 		);
 		// HSV
 		const hsv = options.hsv || Helper.rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -470,6 +567,11 @@ class GUI_colors_class {
 		this.inputs.hsl.l.range.uiRange('set_background',
 			`linear-gradient(to right, #000000 0%, ${ Helper.hslToHex(rangeMid.h, rangeMid.s, rangeMid.l) } 50%, #ffffff 100%)`
 		);
+
+		// Store swatch values
+		if (this.uiType === 'sidebar') {
+			config.swatches.default = this.inputs.swatches.uiSwatches('get_all_hex');
+		}
 	}
 
 }
diff --git a/src/js/core/gui/gui-details.js b/src/js/core/gui/gui-details.js
index 0783694..94632ee 100644
--- a/src/js/core/gui/gui-details.js
+++ b/src/js/core/gui/gui-details.js
@@ -293,14 +293,21 @@ class GUI_details_class {
 	render_color(events) {
 		var layer = config.layer;
 
+		let $colorInput;
+		if (events) {
+			$colorInput = $(document.getElementById('detail_color')).uiColorInput();
+		} else {
+			$colorInput = $(document.getElementById('detail_color'));
+		}
+
 		if (layer != undefined) {
-			document.getElementById('detail_color').value = layer.color;
+			$colorInput.uiColorInput('set_value', layer.color);
 		}
 
 		if (events) {
 			//events
-			document.getElementById('detail_color').addEventListener('change', function (e) {
-				var value = this.value;
+			$colorInput.on('change', function (e) {
+				const value = $colorInput.uiColorInput('get_value');
 				config.layer.color = value;
 				config.need_render = true;
 				config.need_render_changed_params = true;
diff --git a/src/js/core/gui/gui-tools.js b/src/js/core/gui/gui-tools.js
index 5c68ccd..445b238 100644
--- a/src/js/core/gui/gui-tools.js
+++ b/src/js/core/gui/gui-tools.js
@@ -346,27 +346,28 @@ class GUI_tools_class {
 				elementTitle.innerHTML = title + ': ';
 				elementTitle.for = k;
 
-				var elementInput = document.createElement('input');
-				elementInput.type = 'color';
-				elementInput.id = k;
-				elementInput.value = item;
-
-				elementInput.addEventListener('keyup', (event) => {
-					this.action_data().attributes[event.target.id] = event.target.value;
-				});
-				elementInput.addEventListener('change', (event) => {
-					const actionData = this.action_data();
-					actionData.attributes[event.target.id] = event.target.value;
-					if (actionData.on_update != undefined) {
-						//send event
-						var moduleKey = actionData.name;
-						var functionName = actionData.on_update;
-						this.tools_modules[moduleKey][functionName]({ key: event.target.id, value: event.target.value });
-					}
-				});
+				var colorInput = document.createElement('input');
+				colorInput.type = 'color';
+				const $colorInput = $(colorInput)
+					.uiColorInput({
+						id: k,
+						value: item
+					})
+					.on('change', () => {
+						let value = $colorInput.uiColorInput('get_value');
+						const id = $colorInput.uiColorInput('get_id');
+						const actionData = this.action_data();
+						actionData.attributes[id] = value;
+						if (actionData.on_update != undefined) {
+							//send event
+							var moduleKey = actionData.name;
+							var functionName = actionData.on_update;
+							this.tools_modules[moduleKey][functionName]({ key: id, value: value });
+						}
+					});
 
 				itemDom.appendChild(elementTitle);
-				itemDom.appendChild(elementInput);
+				itemDom.appendChild($colorInput[0]);
 			}
 			else {
 				alertify.error('Error: unsupported attribute type:' + typeof item + ', ' + k);
diff --git a/src/js/tools/pick_color.js b/src/js/tools/pick_color.js
index fbc29bc..72a372b 100644
--- a/src/js/tools/pick_color.js
+++ b/src/js/tools/pick_color.js
@@ -40,7 +40,10 @@ class Pick_color_class extends Base_tools_class {
 			_this.dragMove(event);
 		});
 		document.addEventListener('mouseup', function (event) {
-			_this.copy_color_to_ckipboard();
+			var _this = this;
+			if (config.TOOL.name != _this.name)
+				return;
+			_this.copy_color_to_clipboard();
 		});
 
 		// collect touch events
@@ -99,7 +102,7 @@ class Pick_color_class extends Base_tools_class {
 		this.Base_gui.GUI_colors.set_color(newColorDefinition);
 	}
 
-	copy_color_to_ckipboard() {
+	copy_color_to_clipboard() {
 		navigator.clipboard.writeText(config.COLOR);
 	}