diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 8e2a2280b..90c428b8c 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -91,7 +91,7 @@ define([
                     auto.push({
                         id: id + '-color-auto',
                         caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : this.textAutoColor,
-                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
+                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
                     });
                     auto.push({caption: '--'});
                 }
diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js
index 1af6e825b..f50b7a928 100644
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@@ -64,11 +64,11 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 4px 0 0 12px;">' +
+                '<div class="palette-inner">' +
                 '<% var me = this; var idx = 0; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
-                    '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
-                    '<% } else if (me.isSeparator(item)) { %> </div><div class="divider" style="width:100%;float:left;"></div><div style="padding: 12px;">' +
+                    '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer"></div>' +
+                    '<% } else if (me.isSeparator(item)) { %> </div><div class="divider"></div><div style="padding: 12px;">' +
                     '<% } else if (me.isColor(item)) { %> ' +
                         '<a class="palette-color color-<%=item%>" style="background:#<%=item%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item%>;" unselectable="on">&#160;</span></em>' +
@@ -79,20 +79,20 @@ define([
                         '</a>' +
                     '<% } else if (me.isEffect(item)) { %>' +
                         '<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
-                        '<div style="width:100%;height:0;float:left;"></div>' +
+                        '<div class="color-divider"></div>' +
                         '<% } %>' +
                         '<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
                         '</a>' +
                     '<% } else if (me.isCaption(item)) { %>' +
-                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=item%></div>' +
+                    '<div class="palette-color-caption"><%=item%></div>' +
                     '<% } %>' +
                 '<% }); %>' +
                 '</div>' +
                 '<% if (me.options.dynamiccolors!==undefined) { %>' +
-                '<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
-                    '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
-                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
+                '<div class="palette-color-dynamiccolors">' +
+                    '<div class="palette-color-spacer"></div>' +
+                    '<div class="palette-color-caption"><%=me.textRecentColors%></div>' +
                     '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
                         '<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
                         '<em><span unselectable="on">&#160;</span></em></a>' +
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index e53641a0a..a1e62faf4 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -721,13 +721,26 @@
 
 // for color button auto color
 .dropdown-menu {
-    li > a.selected,
-    li > a:hover {
+    li > a {
         span.color-auto {
-            outline: @scaled-one-px-value-ie solid @icon-normal-ie;
-            outline: @scaled-one-px-value solid @icon-normal;
-            border: @scaled-one-px-value-ie solid @background-normal-ie;
-            border: @scaled-one-px-value solid @background-normal;
+            background-image: none;
+            width: 12px;
+            height: 12px;
+            margin: 1px 7px 0 1px;
+
+            .rtl & {
+                margin: 1px 1px 0 7px;
+            }
+        }
+
+        &.selected,
+        &:hover {
+            span.color-auto {
+                outline: @scaled-one-px-value-ie solid @icon-normal-ie;
+                outline: @scaled-one-px-value solid @icon-normal;
+                border: @scaled-one-px-value-ie solid @background-normal-ie;
+                border: @scaled-one-px-value solid @background-normal;
+            }
         }
     }
 }
diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less
index 3c71fba63..fd63a4483 100644
--- a/apps/common/main/resources/less/theme-colorpalette.less
+++ b/apps/common/main/resources/less/theme-colorpalette.less
@@ -32,6 +32,10 @@
         outline: 0 none;
         cursor: pointer;
 
+        .rtl & {
+            float: right;
+        }
+
         em span {
             border: @scaled-one-px-value-ie solid @border-color-shading-ie;
             border: @scaled-one-px-value solid @border-color-shading;
@@ -65,5 +69,49 @@
             border:solid @scaled-one-px-value @border-color-shading;
         }
     }
+
+    .palette-inner {
+        padding: 4px 0 0 12px;
+        .rtl & {
+            padding: 4px 12px 0 0;
+        }
+    }
+
+    .palette-color-caption {
+        width:100%;
+        float:left;
+        font-size: 11px;
+        .rtl & {
+            float: right;
+            text-align: right;
+        }
+    }
+
+    .palette-color-spacer {
+        width: 100%;
+        height: 8px;
+        float: left;
+        .rtl & {
+            float: right;
+        }
+    }
+
+    .palette-color-dynamiccolors {
+        padding: 4px 0 0 12px;
+        .rtl & {
+            padding: 4px 12px 0 0;
+        }
+    }
+
+    .divider {
+        width: 100%;
+        float: left;
+    }
+
+    .color-divider {
+        width:100%;
+        height:0;
+        float:left;
+    }
 }