diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index f7c7ef6b4..98c0b7216 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -271,7 +271,7 @@ define([
 
     Common.UI.ComboBoxColor = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<div class="input-group combobox combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
             '<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
                 '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
             '</div>',
@@ -309,12 +309,13 @@ define([
         updateFormControl: function(record) {
             var formcontrol = $(this.el).find('.form-control > div');
 
+            formcontrol[0].innerHTML = record.get('displayValue');
             if (record.get('value')!=-1) {
-                formcontrol[0].innerHTML = '';
                 formcontrol.css({'background': '#' + record.get('value'), 'margin-top': '0'});
+                record.get('displayColor') && formcontrol.css({'color': '#' + record.get('displayColor'), 'text-align': 'center'});
             } else {
-                formcontrol[0].innerHTML = record.get('displayValue');
                 formcontrol.css({'background': '', 'margin-top': '1px'});
+                formcontrol.css({'color': '', 'text-align': ''});
             }
         },
 
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 51df24ed9..8e9c5c75a 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -44,3 +44,9 @@
         }
     }
 }
+
+.combo-color {
+    .form-control:not(input) {
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/app/view/SortDialog.js b/apps/spreadsheeteditor/main/app/view/SortDialog.js
index 143dc7a6d..d838eafb4 100644
--- a/apps/spreadsheeteditor/main/app/view/SortDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortDialog.js
@@ -268,7 +268,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                                 if (item)
                                     color_data.push({
                                         value: Common.Utils.ThemeColor.getHexColor(item.get_r(), item.get_g(), item.get_b()).toLocaleUpperCase(),
-                                        displayValue: Common.Utils.ThemeColor.getHexColor(item.get_r(), item.get_g(), item.get_b()).toLocaleUpperCase(),
+                                        displayValue: '',
                                         color: item
                                     });
                                 else
@@ -555,7 +555,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                         var value = item ? Common.Utils.ThemeColor.getHexColor(item.get_r(), item.get_g(), item.get_b()).toLocaleUpperCase() : -1,
                             color_data = {
                                 value: value,
-                                displayValue: item ? value : ((level.cmbSort.getValue()==Asc.c_oAscSortOptions.ByColorFill) ? me.textNone : me.textAuto),
+                                displayValue: item ? '' : ((level.cmbSort.getValue()==Asc.c_oAscSortOptions.ByColorFill) ? me.textNone : me.textAuto),
                                 color: item
                             };
                         item ? level.color_data.push(color_data) : level.color_data.unshift(color_data);