diff --git a/apps/common/main/lib/template/ExtendedColorDialog.template b/apps/common/main/lib/template/ExtendedColorDialog.template
index d4a55b951b..c43dba5884 100644
--- a/apps/common/main/lib/template/ExtendedColorDialog.template
+++ b/apps/common/main/lib/template/ExtendedColorDialog.template
@@ -4,24 +4,26 @@
     <div class="color-info" style="">
         <div class="margin-left-15">
             <label class="color-label"><%= txtNew %></label>
-            <div id="field-new-color" class="color-cnt top"></div>
-            <div id="field-start-color" class="color-cnt bottom"></div>
+            <div class="color-field-wrapper">
+                <div id="field-new-color" class="color-cnt top"></div>
+                <div id="field-start-color" class="color-cnt bottom"></div>
+            </div>
             <label class="color-label"><%= txtCurrent %></label>
         </div>
         <div style="padding:13px 0 2px 0;">
-            <label class="input-label">R:</label>
+            <label class="input-label">R</label>
             <div id="extended-spin-r" class="color-spin"></div>
         </div>
         <div style="padding:2px 0;">
-            <label class="input-label">G:</label>
+            <label class="input-label">G</label>
             <div id="extended-spin-g" class="color-spin"></div>
         </div>
         <div style="padding:2px 0;">
-            <label class="input-label">B:</label>
+            <label class="input-label">B</label>
             <div id="extended-spin-b" class="color-spin"></div>
         </div>
         <div style="padding:11px 0 0 0;">
-            <label class="input-label" style="width:12px;">#:</label>
+            <label class="input-label" style="width:12px;">#</label>
             <input id="extended-text-color" type="text" role="textbox" style="width:62px; height: 22px;">
         </div>
     </div>
diff --git a/apps/common/main/lib/view/ExtendedColorDialog.js b/apps/common/main/lib/view/ExtendedColorDialog.js
index 8a11253a55..02a4cab053 100644
--- a/apps/common/main/lib/view/ExtendedColorDialog.js
+++ b/apps/common/main/lib/view/ExtendedColorDialog.js
@@ -56,7 +56,7 @@ define([
                 header: false,
                 buttons: [{value: '1', caption: this.addButtonText}, {value: '0', caption: this.cancelButtonText}],
                 primary: '1',
-                width: 340
+                width: 356
             });
 
             this.hexRe = /\s*#?([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/;
diff --git a/apps/common/main/resources/less/extended-color-picker.less b/apps/common/main/resources/less/extended-color-picker.less
index aad5044b3d..f76a328c4d 100644
--- a/apps/common/main/resources/less/extended-color-picker.less
+++ b/apps/common/main/resources/less/extended-color-picker.less
@@ -32,12 +32,17 @@
             background-color: @background-normal;
         }
 
+        .color-field-wrapper {
+            border-radius: 2px;
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+            padding: 1px;
+        }
+
         .color-cnt {
             width: 63px;
             height: 20px;
             background-color: transparent;
-            border: @scaled-one-px-value-ie solid @border-color-shading-ie;
-            border: @scaled-one-px-value solid @border-color-shading;
             &.top {
                 border-bottom: none;
             }
@@ -52,6 +57,9 @@
         }
 
         .color-transparent {
+            border: @scaled-one-px-value-ie solid @border-color-shading-ie;
+            border: @scaled-one-px-value solid @border-color-shading;
+
             &:before {
                 height: 64px;
                 transform: translate(29px, -22px) rotate(73deg);
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index 92c0339b35..272b04b515 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -40,15 +40,13 @@
         display: inline-block;
         width: 10px;
         height: 196px;
-        margin: 0 8px 0 10px;
+        margin: 0 16px;
     }
 
     .cnt-sat {
         width: 12px;
         height: 100%;
         position: relative;
-        border: @scaled-one-px-value-ie solid @border-regular-control-ie;
-        border: @scaled-one-px-value solid @border-regular-control;
         background: linear-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     }
 
@@ -76,8 +74,8 @@
         width: 20px;
         height: 12px;
         margin-top: -6px;
-        margin-left: -5px;
-        margin-left: calc(-4px - @scaled-one-px-value);
+        margin-left: -4px;
+        margin-left: calc(-3px - @scaled-one-px-value);
         position: absolute;
         background-position: 0px 0px;
         .pixel-ratio__2_5 & {