diff --git a/apps/common/main/lib/template/ExtendedColorDialog.template b/apps/common/main/lib/template/ExtendedColorDialog.template
index c43dba5884..a0b7a977c6 100644
--- a/apps/common/main/lib/template/ExtendedColorDialog.template
+++ b/apps/common/main/lib/template/ExtendedColorDialog.template
@@ -24,7 +24,7 @@
         </div>
         <div style="padding:11px 0 0 0;">
             <label class="input-label" style="width:12px;">#</label>
-            <input id="extended-text-color" type="text" role="textbox" style="width:62px; height: 22px;">
+            <input id="extended-text-color" type="text" role="textbox" style="width:67px; height: 22px;">
         </div>
     </div>
 </div>
diff --git a/apps/common/main/lib/view/ExtendedColorDialog.js b/apps/common/main/lib/view/ExtendedColorDialog.js
index fdd37dab82..db4a4b8ded 100644
--- a/apps/common/main/lib/view/ExtendedColorDialog.js
+++ b/apps/common/main/lib/view/ExtendedColorDialog.js
@@ -76,7 +76,7 @@ define([
             this.spinR = new Common.UI.MetricSpinner({
                 el: $('#extended-spin-r'),
                 step: 1,
-                width: 63,
+                width: 67,
                 value: '0',
                 defaultUnit : "",
                 maxValue: 255,
@@ -88,7 +88,7 @@ define([
             this.spinG = new Common.UI.MetricSpinner({
                 el: $('#extended-spin-g'),
                 step: 1,
-                width: 63,
+                width: 67,
                 value: '0',
                 defaultUnit : "",
                 maxValue: 255,
@@ -100,7 +100,7 @@ define([
             this.spinB = new Common.UI.MetricSpinner({
                 el: $('#extended-spin-b'),
                 step: 1,
-                width: 63,
+                width: 67,
                 value: '0',
                 defaultUnit : "",
                 maxValue: 255,
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index b0a243e66c..0805a9f6ba 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -52,22 +52,13 @@
 
     .cnt-hb-arrow {
         display:  block;
-        width: 12px;
-        height: 12px;
-        margin: -6px;
+        width: 14px;
+        height: 14px;
+        margin: -8px;
         position: absolute;
-        border: @scaled-one-px-value-ie solid #000;
-        border: @scaled-one-px-value solid #000;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xIDdhNiA2IDAgMSAxIDEyIDBBNiA2IDAgMCAxIDEgN202LTdhNyA3IDAgMSAwIDAgMTRBNyA3IDAgMCAwIDcgMCIgZmlsbD0iIzAwMCIvPgogICAgPHBhdGggZD0iTTcgMTJBNSA1IDAgMSAxIDcgMmE1IDUgMCAwIDEgMCAxMG0wIDFBNiA2IDAgMSAwIDcgMWE2IDYgMCAwIDAgMCAxMiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K");
+        background-clip: content-box;
         .border-radius(50%);
-        &:after{
-            content: ' ';
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            border: @scaled-one-px-value-ie solid #fff;
-            border: @scaled-one-px-value solid #fff;
-            .border-radius(50%);
-        }
     }
 
     .cnt-sat-arrow {