diff --git a/ui/js/class.coverride.js b/ui/js/class.coverride.js
index f6516438e1c..ae6656bd425 100644
--- a/ui/js/class.coverride.js
+++ b/ui/js/class.coverride.js
@@ -289,14 +289,21 @@ jQuery(function ($) {
 		updateOverride: function($override, option, value) {
 			var opt = $override.data('options'),
 				field_name = opt['makeName'](option, opt.getId($override));
-			$('[name="' + field_name + '"]', $override).val(value);
 
 			switch (option) {
 				case 'timeshift':
+					$('[name="' + field_name + '"]', $override).val(value);
+					break;
+
 				case 'color':
+					console.log($('[name="' + field_name + '"]', $override), value);
+
+					$('[name="' + field_name + '"]', $override).colorpicker('setColor', value);
 					break;
 
 				default:
+					$('[name="' + field_name + '"]', $override).val(value);
+
 					var visible_name = (typeof opt.captions[option] !== 'undefined') ? opt.captions[option] : option,
 						visible_value = (typeof opt.captions[option + value] !== 'undefined')
 							? opt.captions[option + value]
diff --git a/ui/js/colorpicker.js b/ui/js/colorpicker.js
index a1b892d3801..3ad182d1489 100644
--- a/ui/js/colorpicker.js
+++ b/ui/js/colorpicker.js
@@ -21,9 +21,9 @@
 const ZBX_TEXTAREA_COLOR_WIDTH = 96;
 
 (function($) {
-	var overlay,
+	var $overlay,
+		element,
 		colorbox,
-		input,
 		$overlay_input,
 		$overlay_colorbox,
 		$button_use_default,
@@ -49,26 +49,85 @@ const ZBX_TEXTAREA_COLOR_WIDTH = 96;
 			use_default: false,
 			onUpdate: null
 		},
+
 		/**
 		 * Click handler for every colorpicker cell.
 		 *
 		 * @param {string} color
 		 */
 		setColorHandler = function (color) {
-			methods.set_color(color);
-			input.trigger('change');
+			setColor(element, color);
+			$(element).trigger('change');
 			methods.hide();
 		},
 
+		/**
+		 * Initialization of colorpicker overlay.
+		 *
+		 * @param object         options
+		 * @param array          options.palette   Every nested array contains hex color for one cell.
+		 * @param string|object  options.appendTo  Target element where overlay should be appended.
+		 */
+		init = function (options) {
+			options = $.extend({}, defaults, options || {});
+
+			/*
+				* Initialization of each separate colorpicker element.
+				*
+				* @param {object}    options
+				* @param {bool}      options.use_default  Target element where overlay should be appended.
+				* @param {callable}  options.onUpdate     Callback function to execute once color has changed.
+				*/
+			return this.each((_, element) => {
+				if ($(element).data('colorpicker')) {
+					return;
+				}
+
+				makeOverlay(options);
+
+				$('<button>', {
+					type: 'button',
+					class: 'color-picker-preview',
+					title: element.value ? '#' + element.value : '',
+					'data-use-default': t('D')
+				})
+					.on('keydown', function (e) {
+						if (e.keyCode == KEY_ENTER || e.keyCode == KEY_SPACE) {
+							e.preventDefault();
+							show(element, e.target);
+						}
+					})
+					.on('click', (e) => {
+						show(element, e.target);
+					})
+					.insertAfter(element);
+	
+				$(element)
+					.data('colorpicker', true)
+					.data('use_default', options.use_default)
+					.change(function () {
+						setColor(this, this.value);
+
+						if (options.onUpdate !== null) {
+							options.onUpdate.call(element, this.value);
+						}
+					});
+
+				setColor(element, element.value);
+
+				methods.hide();
+			});
+		},
+
 		/**
 		 * Set color to the overlay input colorbox.
 		 *
 		 * @param {string} color
 		 */
-		setPreviewColor = function (color) {
+		setPreviewColor = function (element, color) {
 			color = $.trim(color).toUpperCase();
 
-			if (input.data('use_default') && color.length == 0) {
+			if ($(element).data('use_default') && color.length == 0) {
 				$overlay_colorbox
 					.css({'background': ''})
 					.attr('title', t('Use default'))
@@ -88,14 +147,81 @@ const ZBX_TEXTAREA_COLOR_WIDTH = 96;
 			}
 		},
 
+		/**
+		 * Set color as background color value of colorbox and as value for input.
+		 *
+		 * @param string color    Desired hex color.
+		 */
+		setColor = function (element, color) {
+			color = $.trim(color).toUpperCase();
+			colorbox = $(element).next('.color-picker-preview');
+
+			if ($(element).data('use_default') && color.length == 0) {
+				colorbox
+					.css({'background': ''})
+					.attr('title', t('Use default'))
+					.addClass('use-default');
+			}
+			else if (/^[0-9A-F]{6}$/i.test(color)) {
+				colorbox
+					.css({'background': '#' + color})
+					.attr('title', '#' + color)
+					.removeClass('use-default');
+			}
+			else {
+				colorbox
+					.css({'background': ''})
+					.attr('title', t('Use default'))
+					.removeClass('use-default');
+			}
+
+			$(element).val(color);
+		},
+
+		/**
+		 * Show colorpicker for specific element.
+		 *
+		 * @param string id      Id of input element which will be associated with opened colorpicker instance.
+		 * @param object target  jQuery element (colorbox) which triggered show action.
+		 */
+		show = function (input, target) {
+			if ($(input).is(':disabled,[readonly]')) {
+				return;
+			}
+			element = input;
+			$colorbox = $(element).next('.color-picker-preview');
+
+			const pos = getOverlayPosition($colorbox);
+
+			$overlay.css({
+				'left': pos.left + 'px',
+				'top': pos.top + 'px',
+				'display': 'block'
+			});
+
+			if ($(element).data('use_default')) {
+				$button_use_default.show();
+			}
+			else {
+				$button_use_default.hide();
+			}
+
+			$overlay_input.val(element.value);
+
+			setPreviewColor(element, element.value);
+
+			addToOverlaysStack('color_picker', target, 'color_picker');
+
+			Overlay.prototype.recoverFocus.call({'$dialogue': $overlay});
+			Overlay.prototype.containFocus.call({'$dialogue': $overlay});
+		},
+
 		/**
 		 * Calculates top and left position for colorpicker overlay element.
 		 */
-		getOverlayPosition = function(id) {
-			var colorbox = $('#lbl_' + id),
-				pos = colorbox.offset(),
-				dialog = colorbox.closest('.overlay-dialogue'),
-				overlay = $('#color_picker'),
+		getOverlayPosition = function ($colorbox) {
+			var pos = $colorbox.offset(),
+				dialog = $colorbox.closest('.overlay-dialogue'),
 				min_outline = 10,
 				frame_dims = {
 					top: 0,
@@ -103,11 +229,11 @@ const ZBX_TEXTAREA_COLOR_WIDTH = 96;
 					bottom: window.screen.height,
 					right: window.screen.width
 				},
-				left = pos.left + colorbox.outerWidth(),
+				left = pos.left + $colorbox.outerWidth(),
 				top = pos.top;
 
 			// If colorpicker is located in dialog, use dialog as a frame.
-			if (overlay.parents('.overlay-dialogue').length) {
+			if ($overlay.parents('.overlay-dialogue').length) {
 				frame_dims.left = dialog.offset().left;
 				frame_dims.top = dialog.offset().top;
 				frame_dims.bottom = dialog.outerHeight() + frame_dims.top;
@@ -115,12 +241,12 @@ const ZBX_TEXTAREA_COLOR_WIDTH = 96;
 			}
 
 			// Make sure that overlay is inside frame.
-			if (top + overlay.outerHeight() + min_outline > frame_dims.bottom) {
-				top = frame_dims.bottom - overlay.outerHeight() - min_outline;
+			if (top + $overlay.outerHeight() + min_outline > frame_dims.bottom) {
+				top = frame_dims.bottom - $overlay.outerHeight() - min_outline;
 			}
 
-			if (left + overlay.outerWidth() + min_outline > frame_dims.right) {
-				left = frame_dims.right - overlay.outerWidth() - min_outline;
+			if (left + $overlay.outerWidth() + min_outline > frame_dims.right) {
+				left = frame_dims.right - $overlay.outerWidth() - min_outline;
 			}
 
 			return {
@@ -128,256 +254,124 @@ const ZBX_TEXTAREA_COLOR_WIDTH = 96;
 				left: left - frame_dims.left
 			};
 		},
-		methods = {
-			/**
-			 * Initialization of colorpicker overlay.
-			 *
-			 * @param object         options
-			 * @param array          options.palette   Every nested array contains hex color for one cell.
-			 * @param string|object  options.appendTo  Target element where overlay should be appended.
-			 */
-			init: function(options) {
-
-				$overlay_input = $('<input>', {
-					type: 'text',
-					autofocus: 'autofocus',
-					maxlength: 6
-				})
-					.css('width', ZBX_TEXTAREA_COLOR_WIDTH + 'px')
-					.on('input keydown paste', (e) => {
-						const color = e.target.value;
-
-						if (color.length == 0 || color.length == 6) {
-							setPreviewColor(color);
-						}
-					})
-					.on('keypress', (e) => {
-						const color = e.target.value;
 
-						if (e.keyCode == KEY_ENTER && (color.length == 0 || color.length == 6)) {
-							setColorHandler(e.target.value);
-						}
-					});
+		makeOverlay = function (options) {
+			$overlay_input = $('<input>', {
+				type: 'text',
+				autofocus: 'autofocus',
+				maxlength: 6
+			})
+				.css('width', ZBX_TEXTAREA_COLOR_WIDTH + 'px')
+				.on('input keydown paste', (e) => {
+					const color = e.target.value;
 
-				const $close = $('<button>', {
-					type: 'button',
-					class: 'overlay-close-btn',
-					title: t('S_CLOSE')
+					if (color.length == 0 || color.length == 6) {
+						setPreviewColor(color);
+					}
 				})
-					.on('click', (e) => {
-						let color = $overlay_input.val();
-						if (color.length == 0 || color.length == 6) {
-							setColorHandler(color);
-						}
-						else {
-							methods.hide();
-						}
-					});
+				.on('keypress', (e) => {
+					const color = e.target.value;
 
-				$overlay_colorbox = $('<div>', {
-					class: 'color-picker-preview',
-					'data-use-default': t('D')
+					if (e.keyCode == KEY_ENTER && (color.length == 0 || color.length == 6)) {
+						setColorHandler(e.target.value);
+					}
+				});
+	
+			const $close = $('<button>', {
+				type: 'button',
+				class: 'overlay-close-btn',
+				title: t('S_CLOSE')
+			})
+				.on('click', (e) => {
+					let color = $overlay_input.val();
+					if (color.length == 0 || color.length == 6) {
+						setColorHandler(color);
+					}
+					else {
+						methods.hide();
+					}
 				});
 
-				$button_use_default = $('<button>', {
-					type: 'button',
-					class: 'btn-alt',
-					title: t('Use default'),
-					'aria-label': t('Use default')
-				})
-					.html(t('Use default'))
-					.on('click', () => setColorHandler(''));
+			$overlay_colorbox = $('<div>', {
+				class: 'color-picker-preview',
+				'data-use-default': t('D')
+			});
 
-				overlay = $('<div>', {
-					class: 'overlay-dialogue color-picker-dialogue',
-					id: 'color_picker'
-				})
-					.append($close)
-					.append($('<div>').append([
-						$('<div>', {class: 'color-picker-input'}).append([$overlay_colorbox, $overlay_input]),
-						$button_use_default
-					]))
-					.append(
-						$.map(options.palette, (colors) => {
-							return $('<div>').append(
-								$.map(colors, (color) => {
-									return $('<button>', {'title': '#' + color, type: 'button', 'data-color': color})
-										.css('background', '#' + color)
-								})
-							);
-						})
-					)
-					.on('click', '[data-color]', function () {
-						setColorHandler($(this).data('color'));
-					});
+			$button_use_default = $('<button>', {
+				type: 'button',
+				class: 'btn-alt',
+				title: t('Use default'),
+				'aria-label': t('Use default')
+			})
+				.html(t('Use default'))
+				.on('click', () => {
+					setColorHandler('');
+				});
 
-				overlay.appendTo($(options.appendTo));
+			$overlay = $('<div>', {
+				class: 'overlay-dialogue color-picker-dialogue',
+				id: 'color_picker'
+			})
+				.append($close)
+				.append($('<div>').append([
+					$('<div>', {class: 'color-picker-input'}).append([$overlay_colorbox, $overlay_input]),
+					$button_use_default
+				]))
+				.append(
+					$.map(options.palette, (colors) => {
+						return $('<div>').append(
+							$.map(colors, (color) => {
+								return $('<button>', {'title': '#' + color, type: 'button', 'data-color': color})
+									.css('background', '#' + color)
+							})
+						);
+					})
+				)
+				.on('click', '[data-color]', function () {
+					setColorHandler($(this).data('color'));
+				});
 
-				methods.hide();
+			$overlay.appendTo($(options.appendTo));
+		},
+
+		/**
+		 * Externally callable methods.
+		 *
+		 * Examples:
+		 *  - jQuery('.colorpicker').colorpicker('setColor', 'FFFFFF'); - Set color FFFFFF.
+		 *  - jQuery.colorpicker('hide'); - Hide colorpicker overlay.
+		 */
+		methods = {
+			setColor: function (color) {
+				return this.each((_, element) => {
+					setColor(element, color);
+				});
 			},
-			/**
-			 * Hide colorpicker overlay.
-			 */
-			hide: function() {
+
+			hide: function () {
 				colorbox = null;
-				input = null;
 
-				overlay.css({
+				$overlay.css({
 					'zIndex': 1000,
 					'display': 'none',
-					'left': '-' + (overlay.width() ? overlay.width() : 100) + 'px'
+					'left': '-' + ($overlay.width() ? $overlay.width() : 100) + 'px'
 				});
 
 				removeFromOverlaysStack('color_picker');
-			},
-			/**
-			 * Show colorpicker for specific element.
-			 *
-			 * @param string id      Id of input element which will be associated with opened colorpicker instance.
-			 * @param object target  jQuery element (colorbox) which triggered show action.
-			 */
-			show: function(id, target) {
-				input = $('#' + id);
-				colorbox = $('#lbl_' + id);
-
-				if (input.is(':disabled,[readonly]')) {
-					return;
-				}
-
-				const pos = getOverlayPosition(id);
-
-				overlay.css({
-					'left': pos.left + 'px',
-					'top': pos.top + 'px',
-					'display': 'block'
-				});
-
-				if (input.data('use_default')) {
-					$button_use_default.show();
-				}
-				else {
-					$button_use_default.hide();
-				}
-
-				$overlay_input.val(input.val());
-
-				setPreviewColor(input.val());
-
-				addToOverlaysStack('color_picker', target, 'color_picker');
-
-				Overlay.prototype.recoverFocus.call({'$dialogue': overlay});
-				Overlay.prototype.containFocus.call({'$dialogue': overlay});
-			},
-			/**
-			 * Set color as background color value of colorbox and as value for input.
-			 *
-			 * @param string color    Desired hex color.
-			 */
-			set_color: function(color) {
-				color = $.trim(color).toUpperCase();
-
-				if (input.data('use_default') && color.length == 0) {
-					colorbox
-						.css({'background': ''})
-						.attr('title', t('Use default'))
-						.addClass('use-default');
-				}
-				else if (/^[0-9A-F]{6}$/i.test(color)) {
-					colorbox
-						.css({'background': '#' + color})
-						.attr('title', '#' + color)
-						.removeClass('use-default');
-				}
-				else {
-					colorbox
-						.css({'background': ''})
-						.attr('title', t('Use default'))
-						.removeClass('use-default');
-				}
-
-				input.val(color);
-			},
-			/**
-			 * Set desired color to input element and colorbox associated with input element.
-			 *
-			 * @param string id       Id of input element.
-			 * @param string color    Hex color value.
-			 */
-			set_color_by_id: function(id, color) {
-				colorbox = $('#lbl_' + id);
-				input = $('#' + id);
-				methods.set_color(color);
 			}
 		};
 
 	$.colorpicker = function(method) {
 		if (methods[method]) {
-			if (!overlay) {
-				methods.init();
-			}
-
 			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 		}
-		else if (typeof method === 'object' || !method) {
-			return methods.init.apply(this, arguments);
-		}
-		else {
-			$.error('Invalid method "' +  method + '".');
-		}
 	}
 
-	$.fn.colorpicker = function(options) {
-		options = $.extend({}, defaults, options || {});
-
-		/**
-		 * Initialize colorpicker overlay if it is not initialized.
-		 */
-		if (!overlay || !$('#color_picker').length) {
-			methods.init(options);
+	$.fn.colorpicker = function (method) {
+		if (methods[method]) {
+			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 		}
 
-		/*
-		 * Initialization of each separate colorpicker element.
-		 *
-		 * @param {object}    options
-		 * @param {bool}      options.use_default  Target element where overlay should be appended.
-		 * @param {callable}  options.onUpdate     Callback function to execute once color has changed.
-		 */
-		return this.each(function (_, element) {
-			const id = element.id;
-
-			if ($('#lbl_' + id).length) {
-				return;
-			}
-
-			$('<button>', {
-				id: 'lbl_' + id,
-				type: 'button',
-				class: 'color-picker-preview',
-				title: element.value ? '#' + element.value : '',
-				'data-use-default': t('D')
-			})
-				.on('keydown', function (e) {
-					if (e.keyCode == KEY_ENTER || e.keyCode == KEY_SPACE) {
-						e.preventDefault();
-						methods.show(element.id, e.target);
-					}
-				})
-				.on('click', function (e) {
-					methods.show(element.id, e.target);
-				})
-				.insertAfter(element);
-
-			$(element)
-				.data('use_default', options.use_default)
-				.change(function () {
-					methods.set_color_by_id(element.id, this.value);
-					if (options.onUpdate !== null) {
-						options.onUpdate.call(element, this.value);
-					}
-				});
-
-			methods.set_color_by_id(id, element.value);
-		});
+		return init.apply(this, arguments);
 	}
 })(jQuery);