diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 3b3708886..6dc028211 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -517,6 +517,22 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
 #toolbar-down table.w2ui-button .w2ui-tb-image {
 	margin: 5px 9px !important;
 }
+#toolbar-down table.w2ui-button .textcolor {
+	margin-bottom: 0px !important;
+}
+#toolbar-down table.w2ui-button .backcolor {
+	margin-bottom: 0px !important;
+}
+#toolbar-down table.w2ui-button .selected-color-classic {
+	height: 5px;
+	width: 26px;
+	margin: auto;
+	position: relative;
+	top: -6px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 7px;
+	outline: 1px solid var(--color-background-lighter);
+}
 .w2ui-toolbar .w2ui-break{
 	background-image: none;
 	background-color: #dae6f3;
diff --git a/browser/css/w2ui-1.5.rc1.css b/browser/css/w2ui-1.5.rc1.css
index d2d604013..26bb9545b 100644
--- a/browser/css/w2ui-1.5.rc1.css
+++ b/browser/css/w2ui-1.5.rc1.css
@@ -2943,6 +2943,15 @@ button.w2ui-btn-small:focus:before {
   border: 1px solid transparent;
   background-color: transparent;
 }
+.w2ui-toolbar table.w2ui-button .selected-color-classic {
+  height: 7px;
+  width: 26px;
+  position: relative;
+  top: -6px;
+  border: 1px solid var(--color-border-dark);
+  border-radius: 7px;
+  outline: 1px solid var(--color-background-lighter);
+}
 .w2ui-toolbar table.w2ui-button .w2ui-tb-image {
   width: 22px;
   height: 16px;
diff --git a/browser/js/w2ui-1.5.rc1.js b/browser/js/w2ui-1.5.rc1.js
index bbb13b12a..b59c09f91 100644
--- a/browser/js/w2ui-1.5.rc1.js
+++ b/browser/js/w2ui-1.5.rc1.js
@@ -6231,7 +6231,36 @@ w2utils.event = {
             var img  = '<td>&#160;</td>';
             var text = item.text;
             if (typeof text == 'function') text = text.call(this, item);
-            if (item.img)  img = '<td><div class="w2ui-tb-image w2ui-icon '+ item.img +'"></div></td>';
+
+            if (item.img) {
+                // color indicator container for classic mode
+                var colorContainer = '<div class="selected-color-classic"></div>';
+
+                /**
+                 * @css class="textcolor" used in:
+                 *  - Writer, Calc, Impress, Draw
+                 *  - as "Font Color"
+                 *
+                 * @css class="backcolor" used in:
+                 *  - Writer, Impress, Draw
+                 *  - as "Character Highlighting Color"
+                 *
+                 * @css class="backgroundcolor" used in:
+                 *  - Calc
+                 *  - as "Background Color"
+                 *  - (on mobile Calc uses "backcolor")
+                 *
+                 * It would be appropriate to place color indicator to below
+                 * of those classes' container.
+                 *
+                 * We have to filter where to add the color indicator,
+                 * otherwise it will be added to below of each toolbar
+                 * elements.
+                 */
+                img = (item.img == 'textcolor' || item.img == 'backcolor' || item.img == 'backgroundcolor') ?
+                '<td><div class="w2ui-tb-image w2ui-icon '+ item.img +'"></div>' + colorContainer + '</td>' :
+                '<td><div class="w2ui-tb-image w2ui-icon '+ item.img +'"></div></td>';
+            }
             if (item.icon) img = '<td><div class="w2ui-tb-image"><span class="'+ item.icon +'"></span></div></td>';
 
             if (html === '') switch (item.type) {
diff --git a/browser/src/control/Control.Toolbar.js b/browser/src/control/Control.Toolbar.js
index 8950b608c..915d88282 100644
--- a/browser/src/control/Control.Toolbar.js
+++ b/browser/src/control/Control.Toolbar.js
@@ -858,7 +858,7 @@ function processStateChangedCommand(commandName, state) {
 			color = color.toString(16);
 			color = '#' + Array(7 - color.length).join('0') + color;
 		}
-		$('#tb_editbar_item_fontcolor .w2ui-tb-image').css('box-shadow', 'inset 0 -2px #ffffff, inset 0px -6px ' + color);
+		$('#tb_editbar_item_fontcolor table.w2ui-button .selected-color-classic').css('background-color', color);
 		$('#tb_editbar_item_fontcolor .w2ui-tb-caption').css('display', 'none');
 
 		div = L.DomUtil.get('fontcolorindicator');
@@ -877,10 +877,11 @@ function processStateChangedCommand(commandName, state) {
 			color = '#' + Array(7 - color.length).join('0') + color;
 		}
 		//writer
-		$('#tb_editbar_item_backcolor .w2ui-tb-image').css('box-shadow', 'inset 0 -2px #ffffff, inset 0px -6px ' + color);
+		$('#tb_editbar_item_backcolor table.w2ui-button .selected-color-classic').css('background-color', color);
 		$('#tb_editbar_item_backcolor .w2ui-tb-caption').css('display', 'none');
+
 		//calc?
-		$('#tb_editbar_item_backgroundcolor .w2ui-tb-image').css('box-shadow', 'inset 0 -2px #ffffff, inset 0px -6px ' + color);
+		$('#tb_editbar_item_backgroundcolor table.w2ui-button .selected-color-classic').css('background-color', color);
 		$('#tb_editbar_item_backgroundcolor .w2ui-tb-caption').css('display', 'none');
 
 		div = L.DomUtil.get('backcolorindicator');