diff --git a/apps/common/mobile/lib/component/HsbColorPicker.js b/apps/common/mobile/lib/component/HsbColorPicker.js
new file mode 100644
index 000000000..22d461934
--- /dev/null
+++ b/apps/common/mobile/lib/component/HsbColorPicker.js
@@ -0,0 +1,327 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  HsbColorPicker.js
+ *
+ *  Created by Julia Svinareva on 02/10/19
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+Common.UI = Common.UI || {};
+
+define([
+    'jquery',
+    'underscore',
+    'backbone'
+], function ($, _, Backbone) {
+    'use strict';
+
+    Common.UI.HsbColorPicker = Backbone.View.extend(_.extend({
+        options: {
+            color: '#000000'
+        },
+        template: _.template([
+            '<div class="custom-colors <% if (phone) { %> phone <% } %>">',
+                '<div class="color-picker-wheel">',
+                    '<svg id="id-wheel" viewBox="0 0 300 300" width="300" height="300"><%=circlesColors%></svg>',
+                    '<div class="color-picker-wheel-handle"></div>',
+                    '<div class="color-picker-sb-spectrum" style="background-color: hsl(0, 100%, 50%)">',
+                        '<div class="color-picker-sb-spectrum-handle"></div>',
+                    '</div>',
+                '</div>',
+                '<div class="right-block">',
+                    '<div class="color-hsb-preview">',
+                        '<div class="new-color-hsb-preview" style=""></div>',
+                        '<div class="current-color-hsb-preview" style=""></div>',
+                    '</div>',
+                    '<a href="#" class="button button-round" id="add-new-color"><i class="icon icon-plus" style="height: 30px;width: 30px;"></i></a>',
+                '</div>',
+            '</div>'
+        ].join('')),
+
+        initialize : function(options) {
+            var me = this,
+                el = $(me.el);
+            me.currentColor = options.color;
+            if(_.isObject(me.currentColor)) {
+                me.currentColor = me.currentColor.color;
+            }
+            if (!me.currentColor) {
+                me.currentColor = me.options.color;
+            }
+            if (me.currentColor === 'transparent') {
+                me.currentColor = 'ffffff';
+            }
+            var colorRgb = me.colorHexToRgb(me.currentColor);
+            me.currentHsl = me.colorRgbToHsl(colorRgb[0],colorRgb[1],colorRgb[2]);
+            me.currentHsb = me.colorHslToHsb(me.currentHsl[0],me.currentHsl[1],me.currentHsl[2]);
+            me.currentHue = [];
+
+            me.options = _({}).extend(me.options, options);
+            me.render();
+        },
+
+        render: function () {
+            var me = this;
+
+            var total = 256,
+                circles = '';
+            for (var i = total; i > 0; i -= 1) {
+                var angle = i * Math.PI / (total / 2);
+                var hue = 360 / total * i;
+                circles += '<circle cx="' + (150 - Math.sin(angle) * 125) + '" cy="' + (150 - Math.cos(angle) * 125) + '" r="25" fill="hsl( ' + hue + ', 100%, 50%)"></circle>';
+            }
+
+            (me.$el || $(me.el)).html(me.template({
+                circlesColors: circles,
+                scope: me,
+                phone: Common.SharedSettings.get('phone'),
+                android: Common.SharedSettings.get('android')
+            }));
+
+            $('.current-color-hsb-preview').css({'background-color': '#' + me.currentColor});
+
+            this.afterRender();
+
+            return me;
+        },
+
+        afterRender: function () {
+            this.$colorPicker = $('.color-picker-wheel');
+            this.$colorPicker.on({
+                'touchstart': this.handleTouchStart.bind(this),
+                'touchmove': this.handleTouchMove.bind(this),
+                'touchend': this.handleTouchEnd.bind(this)
+            });
+            $('#add-new-color').single('click', _.bind(this.onClickAddNewColor, this));
+            this.updateCustomColor();
+        },
+
+        colorHexToRgb: function(hex) {
+            var h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function(m, r, g, b) { return (r + r + g + g + b + b)});
+            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
+            return result
+                ? result.slice(1).map(function (n) { return parseInt(n, 16)})
+                : null;
+        },
+
+        colorRgbToHsl: function(r, g, b) {
+            r /= 255;
+            g /= 255;
+            b /= 255;
+            var max = Math.max(r, g, b);
+            var min = Math.min(r, g, b);
+            var d = max - min;
+            var h;
+            if (d === 0) h = 0;
+            else if (max === r) h = ((g - b) / d) % 6;
+            else if (max === g) h = (b - r) / d + 2;
+            else if (max === b) h = (r - g) / d + 4;
+            var l = (min + max) / 2;
+            var s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+            if (h < 0) h = 360 / 60 + h;
+            return [h * 60, s, l];
+        },
+
+        colorHslToHsb: function(h, s, l) {
+            var HSB = {h: h, s: 0, b: 0};
+            var HSL = {h: h, s: s, l: l};
+            var t = HSL.s * (HSL.l < 0.5 ? HSL.l : 1 - HSL.l);
+            HSB.b = HSL.l + t;
+            HSB.s = HSL.l > 0 ? 2 * t / HSB.b : HSB.s;
+            return [HSB.h, HSB.s, HSB.b];
+        },
+
+        colorHsbToHsl: function(h, s, b) {
+            var HSL = {h: h, s: 0, l: 0};
+            var HSB = { h: h, s: s, b: b };
+            HSL.l = (2 - HSB.s) * HSB.b / 2;
+            HSL.s = HSL.l && HSL.l < 1 ? HSB.s * HSB.b / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s;
+            return [HSL.h, HSL.s, HSL.l];
+        },
+
+        colorHslToRgb: function(h, s, l) {
+            var c = (1 - Math.abs(2 * l - 1)) * s;
+            var hp = h / 60;
+            var x = c * (1 - Math.abs((hp % 2) - 1));
+            var rgb1;
+            if (Number.isNaN(h) || typeof h === 'undefined') {
+                rgb1 = [0, 0, 0];
+            } else if (hp <= 1) rgb1 = [c, x, 0];
+            else if (hp <= 2) rgb1 = [x, c, 0];
+            else if (hp <= 3) rgb1 = [0, c, x];
+            else if (hp <= 4) rgb1 = [0, x, c];
+            else if (hp <= 5) rgb1 = [x, 0, c];
+            else if (hp <= 6) rgb1 = [c, 0, x];
+            var m = l - (c / 2);
+            var result = rgb1.map(function (n) {
+                return Math.max(0, Math.min(255, Math.round(255 * (n + m))));
+            });
+            return result;
+        },
+
+        colorRgbToHex: function(r, g, b) {
+            var result = [r, g, b].map( function (n) {
+                var hex = n.toString(16);
+                return hex.length === 1 ? ('0' + hex) : hex;
+            }).join('');
+            return ('#' + result);
+        },
+
+        setHueFromWheelCoords: function (x, y) {
+            var wheelCenterX = this.wheelRect.left + this.wheelRect.width / 2;
+            var wheelCenterY = this.wheelRect.top + this.wheelRect.height / 2;
+            var angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX);
+            var angleDeg = angleRad * 180 / Math.PI + 90;
+            if (angleDeg < 0) angleDeg += 360;
+            angleDeg = 360 - angleDeg;
+            this.currentHsl[0] = angleDeg;
+            this.updateCustomColor();
+        },
+
+        setSBFromSpecterCoords: function (x, y) {
+            var s = (x - this.specterRect.left) / this.specterRect.width;
+            var b = (y - this.specterRect.top) / this.specterRect.height;
+            s = Math.max(0, Math.min(1, s));
+            b = 1 - Math.max(0, Math.min(1, b));
+
+            this.currentHsb = [this.currentHsl[0], s, b];
+            this.currentHsl = this.colorHsbToHsl(this.currentHsl[0], s, b);
+            this.updateCustomColor();
+        },
+
+        handleTouchStart: function (e) {
+            if (this.isMoved || this.isTouched) return;
+            this.touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+            this.touchCurrentX = this.touchStartX;
+            this.touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+            this.touchCurrentY = this.touchStartY;
+            var $targetEl = $(e.target);
+            this.wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0;
+            this.wheelIsTouched = $targetEl.closest('circle').length > 0;
+            this.specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0;
+            if (!this.specterHandleIsTouched) {
+                this.specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0;
+            }
+            if (this.wheelIsTouched) {
+                this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect();
+                this.setHueFromWheelCoords(this.touchStartX, this.touchStartY);
+            }
+            if (this.specterIsTouched) {
+                this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
+                this.setSBFromSpecterCoords(this.touchStartX, this.touchStartY);
+            }
+            if (this.specterHandleIsTouched || this.specterIsTouched) {
+                this.$el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed');
+            }
+        },
+
+        handleTouchMove: function (e) {
+            if (!(this.wheelIsTouched || this.wheelHandleIsTouched) && !(this.specterIsTouched || this.specterHandleIsTouched)) return;
+            this.touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+            this.touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+            e.preventDefault();
+            if (!this.isMoved) {
+                // First move
+                this.isMoved = true;
+                if (this.wheelHandleIsTouched) {
+                    this.wheelRect = this.$el.find('.color-picker-wheel')[0].getBoundingClientRect();
+                }
+                if (this.specterHandleIsTouched) {
+                    this.specterRect = this.$el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect();
+                }
+            }
+            if (this.wheelIsTouched || this.wheelHandleIsTouched) {
+                this.setHueFromWheelCoords(this.touchCurrentX, this.touchCurrentY);
+            }
+            if (this.specterIsTouched || this.specterHandleIsTouched) {
+                this.setSBFromSpecterCoords(this.touchCurrentX, this.touchCurrentY);
+            }
+        },
+
+        handleTouchEnd: function () {
+            this.isMoved = false;
+            if (this.specterIsTouched || this.specterHandleIsTouched) {
+                this.$el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed');
+            }
+            this.wheelIsTouched = false;
+            this.wheelHandleIsTouched = false;
+            this.specterIsTouched = false;
+            this.specterHandleIsTouched = false;
+        },
+
+        updateCustomColor: function (first) {
+            var specterWidth = this.$el.find('.color-picker-sb-spectrum')[0].offsetWidth,
+                specterHeight = this.$el.find('.color-picker-sb-spectrum')[0].offsetHeight,
+                wheelSize = this.$el.find('.color-picker-wheel')[0].offsetWidth,
+                wheelHalfSize = wheelSize / 2,
+                angleRad = this.currentHsl[0] * Math.PI / 180,
+                handleSize = wheelSize / 6,
+                handleHalfSize = handleSize / 2,
+                tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize,
+                tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize;
+            this.$el.find('.color-picker-wheel-handle')
+                .css({'background-color':  'hsl(' + this.currentHsl[0] + ', 100%, 50%)'})
+                .css({transform: 'translate(' + tX + 'px,' + tY + 'px)'});
+
+            this.$el.find('.color-picker-sb-spectrum')
+                .css({'background-color':  'hsl(' + this.currentHsl[0] + ', 100%, 50%)'});
+
+            if (this.currentHsb && this.currentHsl) {
+                this.$el.find('.color-picker-sb-spectrum-handle')
+                    .css({'background-color': 'hsl(' + this.currentHsl[0] + ', ' + (this.currentHsl[1] * 100) + '%,' + (this.currentHsl[2] * 100) + '%)'})
+                    .css({transform: 'translate(' + specterWidth * this.currentHsb[1] + 'px, ' + specterHeight * (1 - this.currentHsb[2]) + 'px)'});
+            }
+            var color = this.colorHslToRgb(this.currentHsl[0], this.currentHsl[1], this.currentHsl[2]);
+            this.currentColor = this.colorRgbToHex(color[0], color[1], color[2]);
+            $('.new-color-hsb-preview').css({'background-color': this.currentColor});
+
+        },
+
+        onClickAddNewColor: function() {
+            var color = this.currentColor;
+            if (color) {
+                if (color.charAt(0) === '#') {
+                    color = color.substr(1);
+                }
+                this.trigger('addcustomcolor', this, color);
+            }
+        }
+
+    }, Common.UI.HsbColorPicker || {}));
+});
\ No newline at end of file
diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.js b/apps/common/mobile/lib/component/ThemeColorPalette.js
index f183868ba..81476d4f6 100644
--- a/apps/common/mobile/lib/component/ThemeColorPalette.js
+++ b/apps/common/mobile/lib/component/ThemeColorPalette.js
@@ -97,6 +97,21 @@ define([
                             '</div>',
                         '</div>',
                     '</li>',
+                    '<li class="dynamic-colors">',
+                        '<div style="padding: 15px 0 0 15px;"><%= me.textCustomColors %></div>',
+                        '<div class="item-content">',
+                            '<div class="item-inner">',
+                                '<% _.each(dynamicColors, function(color, index) { %>',
+                                    '<a data-color="<%=color%>" style="background:#<%=color%>"></a>',
+                                '<% }); %>',
+                                '<% if (dynamicColors.length < me.options.dynamiccolors) { %>',
+                                '<% for(var i = dynamicColors.length; i < me.options.dynamiccolors; i++) { %>',
+                                    '<a data-color="empty" style="background:#ffffff"></a>',
+                                '<% } %>',
+                                '<% } %>',
+                            '</div>',
+                        '</div>',
+                    '</li>',
                 '</ul>',
             '</div>'
         ].join('')),
@@ -133,9 +148,15 @@ define([
                 themeColors[row].push(effect);
             });
 
+            // custom color
+            this.dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
+            this.dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : [];
+
+
             $(me.el).append(me.template({
                 themeColors: themeColors,
-                standartColors: standartColors
+                standartColors: standartColors,
+                dynamicColors: me.dynamicColors
             }));
 
             return me;
@@ -157,29 +178,26 @@ define([
                 el = $(me.el),
                 $target = $(e.currentTarget);
 
-            el.find('.color-palette a').removeClass('active');
-            $target.addClass('active');
-
             var color = $target.data('color').toString(),
                 effectId = $target.data('effectid');
 
-            me.currentColor = color;
-
-            if (effectId) {
-                me.currentColor = {color: color, effectId: effectId};
+            if (color !== 'empty') {
+                el.find('.color-palette a').removeClass('active');
+                $target.addClass('active');
+                me.currentColor = color;
+                if (effectId) {
+                    me.currentColor = {color: color, effectId: effectId};
+                }
+                me.trigger('select', me, me.currentColor);
+            } else {
+                me.fireEvent('customcolor', me);
             }
-
-            me.trigger('select', me, me.currentColor);
         },
 
         select: function(color) {
             var me = this,
                 el = $(me.el);
 
-            if (color == me.currentColor) {
-                return;
-            }
-
             me.currentColor = color;
 
             me.clearSelection();
@@ -195,11 +213,10 @@ define([
                     color = /#?([a-fA-F0-9]{6})/.exec(color)[1];
                 }
 
-                if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1) {
-                    el.find('.standart-colors a[data-color=' + color + ']').addClass('active');
-                } else {
-                    el.find('.custom-colors a[data-color=' + color + ']').addClass('active');
+                if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1 || _.indexOf(this.dynamicColors, color) > -1) {
+                    el.find('.color-palette a[data-color=' + color + ']').first().addClass('active');
                 }
+
             }
         },
 
@@ -208,7 +225,43 @@ define([
             $(this.el).find('.color-palette a').removeClass('active');
         },
 
+        saveDynamicColor: function(color) {
+            var key_name = 'asc.'+Common.localStorage.getId()+'.colors.custom';
+            var colors = Common.localStorage.getItem(key_name);
+            colors = colors ? colors.split(',') : [];
+            if (colors.push(color) > this.options.dynamiccolors) colors.shift();
+            this.dynamicColors = colors;
+            Common.localStorage.setItem(key_name, colors.join().toUpperCase());
+        },
+
+        updateDynamicColors: function() {
+            var me = this;
+            var dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
+            dynamicColors = dynamicColors ? dynamicColors.toLowerCase().split(',') : [];
+            var templateColors = '';
+            _.each(dynamicColors, function(color) {
+                templateColors += '<a data-color="' + color + '" style="background:#' + color + '"></a>';
+            });
+            if (dynamicColors.length < this.options.dynamiccolors) {
+                for (var i = dynamicColors.length; i < this.options.dynamiccolors; i++) {
+                    templateColors += '<a data-color="empty" style="background-color: #ffffff;"></a>';
+                }
+            }
+            $(this.el).find('.dynamic-colors .item-inner').html(_.template(templateColors));
+            $(this.el).find('.color-palette .dynamic-colors a').on('click', _.bind(this.onColorClick, this));
+        },
+
+        addNewDynamicColor: function(colorPicker, color) {
+            if (color) {
+                this.saveDynamicColor(color);
+                this.updateDynamicColors();
+                this.trigger('select', this, color);
+                this.select(color);
+            }
+        },
+
         textThemeColors: 'Theme Colors',
-        textStandartColors: 'Standard Colors'
+        textStandartColors: 'Standard Colors',
+        textCustomColors: 'Custom Colors'
     }, Common.UI.ThemeColorPalette || {}));
 });
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less
index 2fa543df4..f243b1ef6 100644
--- a/apps/common/mobile/resources/less/ios/_color-palette.less
+++ b/apps/common/mobile/resources/less/ios/_color-palette.less
@@ -35,9 +35,132 @@
     }
   }
 
-  .standart-colors {
+  .standart-colors, .dynamic-colors {
     .item-inner {
       overflow: visible;
     }
   }
-}
\ No newline at end of file
+}
+
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+  &.phone {
+    max-width: 300px;
+    margin: 0 auto;
+    margin-top: 4px;
+    .button-round {
+      margin-top: 20px;
+    }
+  }
+  .right-block {
+    margin-left: 20px;
+  }
+  .button-round {
+    height: 72px;
+    width: 72px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100px;
+    background-color: #ffffff;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-color: transparent;
+    margin-top: 25px;
+    &.active-state {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+  .color-hsb-preview {
+    width: 72px;
+    height: 72px;
+    border-radius: 100px;
+    overflow: hidden;
+    border: 1px solid #c4c4c4;
+  }
+  .new-color-hsb-preview {
+    width: 100%;
+    height: 36px;
+  }
+  .current-color-hsb-preview {
+    width: 100%;
+    height: 36px;
+  }
+  .list-block ul:before, .list-block ul:after {
+    content: none;
+  }
+  .list-block ul li {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+  }
+  .color-picker-wheel {
+    position: relative;
+    width: 290px;
+    max-width: 100%;
+    height: auto;
+    font-size: 0;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+
+    .color-picker-wheel-handle {
+      width: calc(100% / 6);
+      height: calc(100% / 6);
+      position: absolute;
+      box-sizing: border-box;
+      border: 2px solid #fff;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+      background: red;
+      border-radius: 50%;
+      left: 0;
+      top: 0;
+    }
+
+    .color-picker-sb-spectrum {
+      background-color: #000;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+      position: relative;
+      width: 45%;
+      height: 45%;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      position: absolute;
+    }
+
+    .color-picker-sb-spectrum-handle {
+      width: 4px;
+      height: 4px;
+      position: absolute;
+      left: -2px;
+      top: -2px;
+      z-index: 1;
+
+      &:after {
+        background-color: inherit;
+        content: '';
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+        box-sizing: border-box;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        transition: 150ms;
+        transition-property: transform;
+        transform-origin: center;
+      }
+
+      &.color-picker-sb-spectrum-handle-pressed:after {
+        transform: scale(1.5) translate(-33.333%, -33.333%);
+      }
+    }
+  }
+}
diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less
index 49fa72501..511765221 100644
--- a/apps/common/mobile/resources/less/material/_color-palette.less
+++ b/apps/common/mobile/resources/less/material/_color-palette.less
@@ -35,7 +35,7 @@
     }
   }
 
-  .standart-colors {
+  .standart-colors, .dynamic-colors {
     .item-inner {
       overflow: visible;
     }
@@ -44,4 +44,128 @@
   &.list-block:last-child li:last-child a {
     border-radius: 0;
   }
+
+}
+
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+  &.phone {
+    max-width: 300px;
+    margin: 0 auto;
+    margin-top: 4px;
+    .button-round {
+      margin-top: 20px;
+    }
+  }
+  .right-block {
+    margin-left: 20px;
+  }
+  .button-round {
+    height: 72px;
+    width: 72px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100px;
+    background-color: @themeColor;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-color: transparent;
+    margin-top: 25px;
+    &.active-state {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+  .color-hsb-preview {
+    width: 72px;
+    height: 72px;
+    border-radius: 100px;
+    overflow: hidden;
+    border: 1px solid #ededed;
+  }
+  .new-color-hsb-preview {
+    width: 100%;
+    height: 36px;
+  }
+  .current-color-hsb-preview {
+    width: 100%;
+    height: 36px;
+  }
+  .list-block ul:before, .list-block ul:after {
+    content: none;
+  }
+  .list-block ul li {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+  }
+  .color-picker-wheel {
+    position: relative;
+    width: 290px;
+    max-width: 100%;
+    height: auto;
+    font-size: 0;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+
+    .color-picker-wheel-handle {
+      width: calc(100% / 6);
+      height: calc(100% / 6);
+      position: absolute;
+      box-sizing: border-box;
+      border: 2px solid #fff;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+      background: red;
+      border-radius: 50%;
+      left: 0;
+      top: 0;
+    }
+
+    .color-picker-sb-spectrum {
+      background-color: #000;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+      position: relative;
+      width: 45%;
+      height: 45%;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      position: absolute;
+    }
+
+    .color-picker-sb-spectrum-handle {
+      width: 4px;
+      height: 4px;
+      position: absolute;
+      left: -2px;
+      top: -2px;
+      z-index: 1;
+
+      &:after {
+        background-color: inherit;
+        content: '';
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+        box-sizing: border-box;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        transition: 150ms;
+        transition-property: transform;
+        transform-origin: center;
+      }
+
+      &.color-picker-sb-spectrum-handle-pressed:after {
+        transform: scale(1.5) translate(-33.333%, -33.333%);
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/template/EditChart.template b/apps/documenteditor/mobile/app/template/EditChart.template
index 538bb8d1e..c420cb543 100644
--- a/apps/documenteditor/mobile/app/template/EditChart.template
+++ b/apps/documenteditor/mobile/app/template/EditChart.template
@@ -371,4 +371,20 @@
             <!--Color palette-->
         </div>
     </div>
+</div>
+
+<!-- Custom color view -->
+<div id="edit-chart-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-chart-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-chart-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/template/EditParagraph.template b/apps/documenteditor/mobile/app/template/EditParagraph.template
index 5abd3fcf1..b655baa3b 100644
--- a/apps/documenteditor/mobile/app/template/EditParagraph.template
+++ b/apps/documenteditor/mobile/app/template/EditParagraph.template
@@ -184,4 +184,20 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- Custom color view -->
+<div id="edit-paragraph-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-paragraph-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-paragraph-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/template/EditShape.template b/apps/documenteditor/mobile/app/template/EditShape.template
index f9bb94f59..06c6c5dee 100644
--- a/apps/documenteditor/mobile/app/template/EditShape.template
+++ b/apps/documenteditor/mobile/app/template/EditShape.template
@@ -448,4 +448,20 @@
             <!--Color palette-->
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<!-- Custom color view -->
+<div id="edit-shape-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-shape-custom-color">
+            <div class="left sliding back-fill"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-shape-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
diff --git a/apps/documenteditor/mobile/app/template/EditTable.template b/apps/documenteditor/mobile/app/template/EditTable.template
index 7347774d9..825b2fdff 100644
--- a/apps/documenteditor/mobile/app/template/EditTable.template
+++ b/apps/documenteditor/mobile/app/template/EditTable.template
@@ -450,4 +450,20 @@
             <!--Color palette-->
         </div>
     </div>
+</div>
+
+<!-- Custom color view -->
+<div id="edit-table-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-table-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-table-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/template/EditText.template b/apps/documenteditor/mobile/app/template/EditText.template
index 75c5898ef..76080e08e 100644
--- a/apps/documenteditor/mobile/app/template/EditText.template
+++ b/apps/documenteditor/mobile/app/template/EditText.template
@@ -408,3 +408,19 @@
         </div>
     </div>
 </div>
+
+<!-- Custom color view -->
+<div id="edit-text-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-text-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/view/edit/EditChart.js b/apps/documenteditor/mobile/app/view/edit/EditChart.js
index 001a33c7c..e134d9128 100644
--- a/apps/documenteditor/mobile/app/view/edit/EditChart.js
+++ b/apps/documenteditor/mobile/app/view/edit/EditChart.js
@@ -220,6 +220,24 @@ define([
                     el: $('#tab-chart-fill'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-chart-fill').append(template({scope: this}));
+                $('#edit-chart-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 
                 this.fireEvent('page:show', [this, selector]);
@@ -236,16 +254,71 @@ define([
             },
 
             showBorderColor: function () {
+                var me = this;
                 var selector = '#edit-chart-border-color-view';
                 this.showPage(selector, true);
 
                 this.paletteBorderColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-chart-border-color] .page-content')
                 });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-chart-border-color] .page-content').append(template({scope: this}));
+                $('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
 
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomFillColor: function() {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showCustomBorderColor: function() {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             textStyle: 'Style',
             textWrap: 'Wrap',
             textReorder: 'Reorder',
@@ -270,7 +343,9 @@ define([
             textFill: 'Fill',
             textBorder: 'Border',
             textSize: 'Size',
-            textColor: 'Color'
+            textColor: 'Color',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), DE.Views.EditChart || {}))
 });
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/view/edit/EditParagraph.js b/apps/documenteditor/mobile/app/view/edit/EditParagraph.js
index dde7c7158..b1b163da7 100644
--- a/apps/documenteditor/mobile/app/view/edit/EditParagraph.js
+++ b/apps/documenteditor/mobile/app/view/edit/EditParagraph.js
@@ -150,6 +150,24 @@ define([
                     el: $('.page[data-page=edit-paragraph-color] .page-content'),
                     transparent: true
                 });
+                this.paletteBackgroundColor.on('customcolor', function () {
+                    me.showCustomColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-paragraph-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-paragraph-color] .page-content').append(template({scope: this}));
+                $('#edit-paragraph-add-custom-color').single('click', _.bind(this.showCustomColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-paragraph-color]', '.page[data-page=edit-paragraph-color] .page-content');
                 this.fireEvent('page:show', [this, '#edit-paragraph-color']);
@@ -160,6 +178,23 @@ define([
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-paragraph-advanced]', '.page[data-page=edit-paragraph-advanced] .page-content');
             },
 
+            showCustomColor: function () {
+                var me = this,
+                    selector = '#edit-paragraph-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-paragraph-custom-color] .page-content'),
+                    color: me.paletteBackgroundColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             textBackground: 'Background',
             textAdvSettings: 'Advanced settings',
             textPrgStyles: 'Paragraph styles',
@@ -174,7 +209,9 @@ define([
             textPageBreak: 'Page Break Before',
             textOrphan: 'Orphan Control',
             textKeepLines: 'Keep Lines Together',
-            textKeepNext: 'Keep with Next'
+            textKeepNext: 'Keep with Next',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), DE.Views.EditParagraph || {}))
 });
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/view/edit/EditShape.js b/apps/documenteditor/mobile/app/view/edit/EditShape.js
index 85f601b0e..2e54952ff 100644
--- a/apps/documenteditor/mobile/app/view/edit/EditShape.js
+++ b/apps/documenteditor/mobile/app/view/edit/EditShape.js
@@ -44,7 +44,8 @@ define([
     'text!documenteditor/mobile/app/template/EditShape.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -144,6 +145,7 @@ define([
             },
 
             showStyle: function () {
+                var me = this;
                 var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill';
                 this.showPage(selector, true);
 
@@ -154,8 +156,25 @@ define([
                     el: $('#tab-shape-fill'),
                     transparent: true
                 });
-
-                // Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                        '<li>',
+                            '<a id="edit-shape-add-custom-color" class="item-link">',
+                            '<div class="item-content">',
+                            '<div class="item-inner">',
+                                '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                            '</div>',
+                            '</div>',
+                            '</a>',
+                        '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-shape-fill').append(template({scope: this}));
+                $('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
+                Common.Utils.addScrollIfNeed('.page.shape-style', '.page.shape-style .page-content');
                 this.fireEvent('page:show', [this, selector]);
             },
 
@@ -181,10 +200,64 @@ define([
                 this.paletteBorderColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-shape-border-color] .page-content')
                 });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-shape-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-shape-border-color] .page-content').append(template({scope: this}));
+                $('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
 
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomFillColor: function() {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showCustomBorderColor: function() {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             textStyle: 'Style',
             textWrap: 'Wrap',
             textReplace: 'Replace',
@@ -211,7 +284,9 @@ define([
             textEffects: 'Effects',
             textSize: 'Size',
             textColor: 'Color',
-            textOpacity: 'Opacity'
+            textOpacity: 'Opacity',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), DE.Views.EditShape || {}))
 });
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/view/edit/EditTable.js b/apps/documenteditor/mobile/app/view/edit/EditTable.js
index 046579be0..ea5045f15 100644
--- a/apps/documenteditor/mobile/app/view/edit/EditTable.js
+++ b/apps/documenteditor/mobile/app/view/edit/EditTable.js
@@ -190,12 +190,31 @@ define([
             },
 
             showTableStyle: function () {
+                var me = this;
                 this.showPage('#edit-table-style', true);
 
                 this.paletteFillColor = new Common.UI.ThemeColorPalette({
                     el: $('#tab-table-fill'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-table-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-table-fill').append(template({scope: this}));
+                $('#edit-table-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-table-style']);
             },
@@ -206,6 +225,24 @@ define([
                 this.paletteBorderColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-table-border-color] .page-content')
                 });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-table-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-table-border-color] .page-content').append(template({scope: this}));
+                $('#edit-table-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
             },
@@ -218,6 +255,42 @@ define([
                 this.showPage('#edit-table-style-options-view');
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-table-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-table-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showCustomBorderColor: function() {
+                var me = this,
+                    selector = '#edit-table-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-table-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             textRemoveTable: 'Remove Table',
             textTableOptions: 'Table Options',
             textStyle: 'Style',
@@ -242,7 +315,9 @@ define([
             textBandedRow: 'Banded Row',
             textFirstColumn: 'First Column',
             textLastColumn: 'Last Column',
-            textBandedColumn: 'Banded Column'
+            textBandedColumn: 'Banded Column',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), DE.Views.EditTable || {}))
 });
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/view/edit/EditText.js b/apps/documenteditor/mobile/app/view/edit/EditText.js
index bc299bd80..d131843ed 100644
--- a/apps/documenteditor/mobile/app/view/edit/EditText.js
+++ b/apps/documenteditor/mobile/app/view/edit/EditText.js
@@ -200,11 +200,46 @@ define([
                 this.paletteTextColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-text-font-color] .page-content')
                 });
+                this.paletteTextColor.on('customcolor', function () {
+                    me.showCustomFontColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-text-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-text-font-color] .page-content').append(template({scope: this}));
+                $('#edit-text-add-custom-color').single('click', _.bind(this.showCustomFontColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
                 this.fireEvent('page:show', [this, '#edit-text-color']);
             },
 
+            showCustomFontColor: function () {
+                var me = this,
+                    selector = '#edit-text-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
+                    color: me.paletteTextColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteTextColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showBackgroundColor: function () {
                 this.showPage('#edit-text-background', true);
 
@@ -212,11 +247,46 @@ define([
                     el: $('.page[data-page=edit-text-font-background] .page-content'),
                     transparent: true
                 });
+                this.paletteBackgroundColor.on('customcolor', function () {
+                    me.showCustomBackgroundColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-text-add-custom-background-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-text-font-background] .page-content').append(template({scope: this}));
+                $('#edit-text-add-custom-background-color').single('click', _.bind(this.showCustomBackgroundColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-background]', '.page[data-page=edit-text-font-background] .page-content');
                 this.fireEvent('page:show', [this, '#edit-text-background']);
             },
 
+            showCustomBackgroundColor: function () {
+                var me = this,
+                    selector = '#edit-text-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBackgroundColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
+                    color: me.paletteBackgroundColor.currentColor
+                });
+                me.customBackgroundColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
+                    DE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showAdditional: function () {
                 this.showPage('#edit-text-additional');
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-additional]', '.page[data-page=edit-text-additional] .page-content');
@@ -259,7 +329,9 @@ define([
             textCharacterBold: 'B',
             textCharacterItalic: 'I',
             textCharacterUnderline: 'U',
-            textCharacterStrikethrough: 'S'
+            textCharacterStrikethrough: 'S',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), DE.Views.EditText || {}))
 });
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 96ecafa44..97469cecc 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -60,6 +60,7 @@
   "Common.Controllers.Collaboration.textWidow": "Widow control",
   "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
   "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
+  "Common.UI.ThemeColorPalette.textCustomColors": "Custom Colors",
   "Common.Utils.Metric.txtCm": "cm",
   "Common.Utils.Metric.txtPt": "pt",
   "Common.Views.Collaboration.textAcceptAllChanges": "Accept All Changes",
@@ -318,6 +319,8 @@
   "DE.Views.EditChart.textTopBottom": "Top and Bottom",
   "DE.Views.EditChart.textType": "Type",
   "DE.Views.EditChart.textWrap": "Wrap",
+  "DE.Views.EditChart.textAddCustomColor": "Add Custom Color",
+  "DE.Views.EditChart.textCustomColor": "Custom Color",
   "DE.Views.EditHeader.textDiffFirst": "Different first page",
   "DE.Views.EditHeader.textDiffOdd": "Different odd and even pages",
   "DE.Views.EditHeader.textFrom": "Start at",
@@ -371,6 +374,8 @@
   "DE.Views.EditParagraph.textPageBreak": "Page Break Before",
   "DE.Views.EditParagraph.textPrgStyles": "Paragraph styles",
   "DE.Views.EditParagraph.textSpaceBetween": "Space Between Paragraphs",
+  "DE.Views.EditParagraph.textAddCustomColor": "Add Custom Color",
+  "DE.Views.EditParagraph.textCustomColor": "Custom Color",
   "DE.Views.EditShape.textAlign": "Align",
   "DE.Views.EditShape.textBack": "Back",
   "DE.Views.EditShape.textBackward": "Move Backward",
@@ -398,6 +403,8 @@
   "DE.Views.EditShape.textTopAndBottom": "Top and Bottom",
   "DE.Views.EditShape.textWithText": "Move with Text",
   "DE.Views.EditShape.textWrap": "Wrap",
+  "DE.Views.EditShape.textAddCustomColor": "Add Custom Color",
+  "DE.Views.EditShape.textCustomColor": "Custom Color",
   "DE.Views.EditTable.textAlign": "Align",
   "DE.Views.EditTable.textBack": "Back",
   "DE.Views.EditTable.textBandedColumn": "Banded Column",
@@ -423,6 +430,8 @@
   "DE.Views.EditTable.textTotalRow": "Total Row",
   "DE.Views.EditTable.textWithText": "Move with Text",
   "DE.Views.EditTable.textWrap": "Wrap",
+  "DE.Views.EditTable.textAddCustomColor": "Add Custom Color",
+  "DE.Views.EditTable.textCustomColor": "Custom Color",
   "DE.Views.EditText.textAdditional": "Additional",
   "DE.Views.EditText.textAdditionalFormat": "Additional Formatting",
   "DE.Views.EditText.textAllCaps": "All Caps",
@@ -448,6 +457,8 @@
   "DE.Views.EditText.textSmallCaps": "Small Caps",
   "DE.Views.EditText.textStrikethrough": "Strikethrough",
   "DE.Views.EditText.textSubscript": "Subscript",
+  "DE.Views.EditText.textAddCustomColor": "Add Custom Color",
+  "DE.Views.EditText.textCustomColor": "Custom Color",
   "DE.Views.Search.textCase": "Case sensitive",
   "DE.Views.Search.textDone": "Done",
   "DE.Views.Search.textFind": "Find",
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css
index 409d688e1..974bae797 100644
--- a/apps/documenteditor/mobile/resources/css/app-ios.css
+++ b/apps/documenteditor/mobile/resources/css/app-ios.css
@@ -6218,9 +6218,127 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   display: inline-block;
   overflow: visible;
 }
-.color-palette .standart-colors .item-inner {
+.color-palette .standart-colors .item-inner,
+.color-palette .dynamic-colors .item-inner {
   overflow: visible;
 }
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+}
+.custom-colors.phone {
+  max-width: 300px;
+  margin: 0 auto;
+  margin-top: 4px;
+}
+.custom-colors.phone .button-round {
+  margin-top: 20px;
+}
+.custom-colors .right-block {
+  margin-left: 20px;
+}
+.custom-colors .button-round {
+  height: 72px;
+  width: 72px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: transparent;
+  margin-top: 25px;
+}
+.custom-colors .button-round.active-state {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.custom-colors .color-hsb-preview {
+  width: 72px;
+  height: 72px;
+  border-radius: 100px;
+  overflow: hidden;
+  border: 1px solid #c4c4c4;
+}
+.custom-colors .new-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .current-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .list-block ul:before,
+.custom-colors .list-block ul:after {
+  content: none;
+}
+.custom-colors .list-block ul li {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.custom-colors .color-picker-wheel {
+  position: relative;
+  width: 290px;
+  max-width: 100%;
+  height: auto;
+  font-size: 0;
+}
+.custom-colors .color-picker-wheel svg {
+  width: 100%;
+  height: auto;
+}
+.custom-colors .color-picker-wheel .color-picker-wheel-handle {
+  width: calc(16.66666667%);
+  height: calc(16.66666667%);
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+  background: red;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  position: relative;
+  width: 45%;
+  height: 45%;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
+  background-color: inherit;
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 150ms;
+  transition-property: transform;
+  transform-origin: center;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
+  transform: scale(1.5) translate(-33.333%, -33.333%);
+}
 .about .page-content {
   text-align: center;
 }
@@ -7081,7 +7199,6 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
-
 .doc-placeholder {
   background: #fbfbfb;
   width: 100%;
@@ -7097,7 +7214,6 @@ html.pixel-ratio-3 .numbers li {
   background: #e2e2e2;
   overflow: hidden;
   position: relative;
-
   -webkit-animation: flickerAnimation 2s infinite ease-in-out;
   -moz-animation: flickerAnimation 2s infinite ease-in-out;
   -o-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css
index b89e0c23f..450682feb 100644
--- a/apps/documenteditor/mobile/resources/css/app-material.css
+++ b/apps/documenteditor/mobile/resources/css/app-material.css
@@ -5809,12 +5809,130 @@ html.phone .document-menu .list-block .item-link {
   display: inline-block;
   overflow: visible;
 }
-.color-palette .standart-colors .item-inner {
+.color-palette .standart-colors .item-inner,
+.color-palette .dynamic-colors .item-inner {
   overflow: visible;
 }
 .color-palette.list-block:last-child li:last-child a {
   border-radius: 0;
 }
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+}
+.custom-colors.phone {
+  max-width: 300px;
+  margin: 0 auto;
+  margin-top: 4px;
+}
+.custom-colors.phone .button-round {
+  margin-top: 20px;
+}
+.custom-colors .right-block {
+  margin-left: 20px;
+}
+.custom-colors .button-round {
+  height: 72px;
+  width: 72px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: #446995;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: transparent;
+  margin-top: 25px;
+}
+.custom-colors .button-round.active-state {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.custom-colors .color-hsb-preview {
+  width: 72px;
+  height: 72px;
+  border-radius: 100px;
+  overflow: hidden;
+  border: 1px solid #ededed;
+}
+.custom-colors .new-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .current-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .list-block ul:before,
+.custom-colors .list-block ul:after {
+  content: none;
+}
+.custom-colors .list-block ul li {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.custom-colors .color-picker-wheel {
+  position: relative;
+  width: 290px;
+  max-width: 100%;
+  height: auto;
+  font-size: 0;
+}
+.custom-colors .color-picker-wheel svg {
+  width: 100%;
+  height: auto;
+}
+.custom-colors .color-picker-wheel .color-picker-wheel-handle {
+  width: calc(16.66666667%);
+  height: calc(16.66666667%);
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+  background: red;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  position: relative;
+  width: 45%;
+  height: 45%;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
+  background-color: inherit;
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 150ms;
+  transition-property: transform;
+  transform-origin: center;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
+  transform: scale(1.5) translate(-33.333%, -33.333%);
+}
 .about .page-content {
   text-align: center;
 }
@@ -6867,7 +6985,6 @@ html.pixel-ratio-3 .numbers li {
   background: #e2e2e2;
   overflow: hidden;
   position: relative;
-
   -webkit-animation: flickerAnimation 2s infinite ease-in-out;
   -moz-animation: flickerAnimation 2s infinite ease-in-out;
   -o-animation: flickerAnimation 2s infinite ease-in-out;
diff --git a/apps/presentationeditor/mobile/app/template/EditChart.template b/apps/presentationeditor/mobile/app/template/EditChart.template
index e157fd443..6c9ec42f5 100644
--- a/apps/presentationeditor/mobile/app/template/EditChart.template
+++ b/apps/presentationeditor/mobile/app/template/EditChart.template
@@ -302,3 +302,19 @@
         </div>
     </div>
 </div>
+
+<!-- Custom color view -->
+<div id="edit-chart-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-chart-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-chart-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
diff --git a/apps/presentationeditor/mobile/app/template/EditShape.template b/apps/presentationeditor/mobile/app/template/EditShape.template
index 16ed68947..e8a7579af 100644
--- a/apps/presentationeditor/mobile/app/template/EditShape.template
+++ b/apps/presentationeditor/mobile/app/template/EditShape.template
@@ -379,3 +379,19 @@
         </div>
     </div>
 </div>
+
+<!-- Custom color view -->
+<div id="edit-shape-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-shape-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-shape-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
diff --git a/apps/presentationeditor/mobile/app/template/EditSlide.template b/apps/presentationeditor/mobile/app/template/EditSlide.template
index 9e14876a9..88d2f351a 100644
--- a/apps/presentationeditor/mobile/app/template/EditSlide.template
+++ b/apps/presentationeditor/mobile/app/template/EditSlide.template
@@ -321,3 +321,19 @@
         </div>
     </div>
 </div>
+
+<!-- Custom color view -->
+<div id="edit-slide-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-slide-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-slide-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/app/template/EditTable.template b/apps/presentationeditor/mobile/app/template/EditTable.template
index ec812ba73..8b6d3b379 100644
--- a/apps/presentationeditor/mobile/app/template/EditTable.template
+++ b/apps/presentationeditor/mobile/app/template/EditTable.template
@@ -473,3 +473,19 @@
         </div>
     </div>
 </div>
+
+<!-- Custom color view -->
+<div id="edit-table-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-table-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-table-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/app/template/EditText.template b/apps/presentationeditor/mobile/app/template/EditText.template
index dfecf30b2..adaa89127 100644
--- a/apps/presentationeditor/mobile/app/template/EditText.template
+++ b/apps/presentationeditor/mobile/app/template/EditText.template
@@ -407,3 +407,19 @@
         </div>
     </div>
 </div>
+
+<!-- Custom color view -->
+<div id="edit-text-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-text-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/app/view/edit/EditChart.js b/apps/presentationeditor/mobile/app/view/edit/EditChart.js
index 15cf6af1e..c9569baa2 100644
--- a/apps/presentationeditor/mobile/app/view/edit/EditChart.js
+++ b/apps/presentationeditor/mobile/app/view/edit/EditChart.js
@@ -45,7 +45,9 @@ define([
     'text!presentationeditor/mobile/app/template/EditChart.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -220,6 +222,7 @@ define([
             },
 
             showStyle: function () {
+                var me = this;
                 var selector = '#edit-chart-style';
                 this.showPage(selector, true);
 
@@ -227,16 +230,52 @@ define([
                     el: $('#tab-chart-fill'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-chart-fill').append(template({scope: this}));
+                $('#edit-chart-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showReorder: function () {
                 this.showPage('#edit-chart-reorder');
                 Common.Utils.addScrollIfNeed('.page.chart-reorder', '.page.chart-reorder .page-content');
             },
 
             showBorderColor: function () {
+                var me = this;
                 var selector = '#edit-chart-border-color-view';
                 this.showPage(selector, true);
 
@@ -244,9 +283,47 @@ define([
                     el: $('.page[data-page=edit-chart-border-color] .page-content')
                 });
 
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-chart-border-color] .page-content').append(template({scope: this}));
+                $('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
+
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomBorderColor: function() {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showAlign: function () {
                 this.showPage('#edit-chart-align');
                 Common.Utils.addScrollIfNeed('.page.chart-align', '.page.chart-align .page-content');
@@ -273,7 +350,9 @@ define([
             textAlignBottom:   'Align Bottom',
             textAlignMiddle:   'Align Middle',
             txtDistribHor:     'Distribute Horizontally',
-            txtDistribVert:    'Distribute Vertically'
+            txtDistribVert:    'Distribute Vertically',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditChart || {}))
 });
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/app/view/edit/EditShape.js b/apps/presentationeditor/mobile/app/view/edit/EditShape.js
index b34f11112..532e581bc 100644
--- a/apps/presentationeditor/mobile/app/view/edit/EditShape.js
+++ b/apps/presentationeditor/mobile/app/view/edit/EditShape.js
@@ -44,7 +44,9 @@ define([
     'text!presentationeditor/mobile/app/template/EditShape.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -144,6 +146,7 @@ define([
             },
 
             showStyle: function () {
+                var me = this;
                 var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill';
                 this.showPage(selector, true);
 
@@ -154,11 +157,46 @@ define([
                     el: $('#tab-shape-fill'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-shape-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-shape-fill').append(template({scope: this}));
+                $('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showReplace: function () {
                 this.showPage('#edit-shape-replace');
                 Common.Utils.addScrollIfNeed('.page.shape-replace', '.page.shape-replace .page-content');
@@ -175,16 +213,54 @@ define([
             },
 
             showBorderColor: function () {
+                var me = this;
                 var selector = '#edit-shape-border-color-view';
                 this.showPage(selector, true);
 
                 this.paletteBorderColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-shape-border-color] .page-content')
                 });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-shape-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-shape-border-color] .page-content').append(template({scope: this}));
+                $('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
 
                 this.fireEvent('page:show', [this, selector]);
             },
 
+            showCustomBorderColor: function () {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             textStyle: 'Style',
             textReplace: 'Replace',
             textReorder: 'Reorder',
@@ -208,7 +284,9 @@ define([
             textAlignBottom:   'Align Bottom',
             textAlignMiddle:   'Align Middle',
             txtDistribHor:     'Distribute Horizontally',
-            txtDistribVert:    'Distribute Vertically'
+            txtDistribVert:    'Distribute Vertically',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditShape || {}))
 });
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/app/view/edit/EditSlide.js b/apps/presentationeditor/mobile/app/view/edit/EditSlide.js
index ed2d90c24..d311e7b91 100644
--- a/apps/presentationeditor/mobile/app/view/edit/EditSlide.js
+++ b/apps/presentationeditor/mobile/app/view/edit/EditSlide.js
@@ -44,7 +44,9 @@ define([
     'text!presentationeditor/mobile/app/template/EditSlide.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -173,16 +175,52 @@ define([
             },
 
             showStyle: function () {
+                var me = this;
                 this.showPage('#edit-slide-style', true);
 
                 this.paletteFillColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-slide-style] .page-content'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomSlideColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-slide-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-slide-style] .page-content').append(template({scope: this}));
+                $('#edit-slide-add-custom-color').single('click', _.bind(this.showCustomSlideColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-slide-style']);
             },
 
+            showCustomSlideColor: function () {
+                var me = this,
+                    selector = '#edit-slide-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-slide-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showLayout: function () {
                 this.showPage('#edit-slide-layout', true);
 
@@ -397,7 +435,9 @@ define([
             textZoomRotate: 'Zoom and Rotate',
             textStartOnClick: 'Start On Click',
             textDelay: 'Delay',
-            textApplyAll: 'Apply to All Slides'
+            textApplyAll: 'Apply to All Slides',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditSlide || {}))
 });
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/app/view/edit/EditTable.js b/apps/presentationeditor/mobile/app/view/edit/EditTable.js
index 6ab8913c7..98c3345f7 100644
--- a/apps/presentationeditor/mobile/app/view/edit/EditTable.js
+++ b/apps/presentationeditor/mobile/app/view/edit/EditTable.js
@@ -45,7 +45,8 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -193,26 +194,100 @@ define([
             },
 
             showTableStyle: function () {
+                var me = this;
                 this.showPage('#edit-table-style', true);
 
                 this.paletteFillColor = new Common.UI.ThemeColorPalette({
                     el: $('#tab-table-fill'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-table-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-table-fill').append(template({scope: this}));
+                $('#edit-table-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-table-style']);
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-table-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-table-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showBorderColor: function () {
+                var me = this;
                 this.showPage('#edit-table-border-color-view', true);
 
                 this.paletteBorderColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-table-border-color] .page-content')
                 });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-table-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-table-border-color] .page-content').append(template({scope: this}));
+                $('#edit-table-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
 
                 this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
             },
 
+            showCustomBorderColor: function() {
+                var me = this,
+                    selector = '#edit-table-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-table-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showTableStyleOptions: function () {
                 this.showPage('#edit-table-style-options-view');
             },
@@ -257,7 +332,9 @@ define([
             textAlignBottom:   'Align Bottom',
             textAlignMiddle:   'Align Middle',
             txtDistribHor:     'Distribute Horizontally',
-            txtDistribVert:    'Distribute Vertically'
+            txtDistribVert:    'Distribute Vertically',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditTable || {}))
 });
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/app/view/edit/EditText.js b/apps/presentationeditor/mobile/app/view/edit/EditText.js
index b142eae7e..6fb609736 100644
--- a/apps/presentationeditor/mobile/app/view/edit/EditText.js
+++ b/apps/presentationeditor/mobile/app/view/edit/EditText.js
@@ -45,7 +45,8 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -196,16 +197,52 @@ define([
             },
 
             showFontColor: function () {
+                var me = this;
                 this.showPage('#edit-text-color', true);
 
                 this.paletteTextColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-text-font-color] .page-content')
                 });
+                this.paletteTextColor.on('customcolor', function () {
+                    me.showCustomFontColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-text-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-text-font-color] .page-content').append(template({scope: this}));
+                $('#edit-text-add-custom-color').single('click', _.bind(this.showCustomFontColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
                 this.fireEvent('page:show', [this, '#edit-text-color']);
             },
 
+            showCustomFontColor: function () {
+                var me = this,
+                    selector = '#edit-text-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
+                    color: me.paletteTextColor.currentColor
+                });
+                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteTextColor.addNewDynamicColor(colorPicker, color);
+                    PE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showAdditional: function () {
                 this.showPage('#edit-text-additional');
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-additional]', '.page[data-page=edit-text-additional] .page-content');
@@ -249,7 +286,9 @@ define([
             textCharacterBold: 'B',
             textCharacterItalic: 'I',
             textCharacterUnderline: 'U',
-            textCharacterStrikethrough: 'S'
+            textCharacterStrikethrough: 'S',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), PE.Views.EditText || {}))
 });
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json
index d55aa3c0a..42ca143eb 100644
--- a/apps/presentationeditor/mobile/locale/en.json
+++ b/apps/presentationeditor/mobile/locale/en.json
@@ -2,6 +2,7 @@
   "Common.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
   "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
   "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
+  "Common.UI.ThemeColorPalette.textCustomColors": "Custom Colors",
   "Common.Utils.Metric.txtCm": "cm",
   "Common.Utils.Metric.txtPt": "pt",
   "Common.Views.Collaboration.textBack": "Back",
@@ -275,6 +276,8 @@
   "PE.Views.EditChart.textType": "Type",
   "PE.Views.EditChart.txtDistribHor": "Distribute Horizontally",
   "PE.Views.EditChart.txtDistribVert": "Distribute Vertically",
+  "PE.Views.EditChart.textAddCustomColor": "Add Custom Color",
+  "PE.Views.EditChart.textCustomColor": "Custom Color",
   "PE.Views.EditImage.textAddress": "Address",
   "PE.Views.EditImage.textAlign": "Align",
   "PE.Views.EditImage.textAlignBottom": "Align Bottom",
@@ -338,6 +341,8 @@
   "PE.Views.EditShape.textToForeground": "Bring to Foreground",
   "PE.Views.EditShape.txtDistribHor": "Distribute Horizontally",
   "PE.Views.EditShape.txtDistribVert": "Distribute Vertically",
+  "PE.Views.EditShape.textAddCustomColor": "Add Custom Color",
+  "PE.Views.EditShape.textCustomColor": "Custom Color",
   "PE.Views.EditSlide.textApplyAll": "Apply to All Slides",
   "PE.Views.EditSlide.textBack": "Back",
   "PE.Views.EditSlide.textBlack": "Through Black",
@@ -383,6 +388,8 @@
   "PE.Views.EditSlide.textZoomIn": "Zoom In",
   "PE.Views.EditSlide.textZoomOut": "Zoom Out",
   "PE.Views.EditSlide.textZoomRotate": "Zoom and Rotate",
+  "PE.Views.EditSlide.textAddCustomColor": "Add Custom Color",
+  "PE.Views.EditSlide.textCustomColor": "Custom Color",
   "PE.Views.EditTable.textAlign": "Align",
   "PE.Views.EditTable.textAlignBottom": "Align Bottom",
   "PE.Views.EditTable.textAlignCenter": "Align Center",
@@ -414,6 +421,8 @@
   "PE.Views.EditTable.textTotalRow": "Total Row",
   "PE.Views.EditTable.txtDistribHor": "Distribute Horizontally",
   "PE.Views.EditTable.txtDistribVert": "Distribute Vertically",
+  "PE.Views.EditTable.textAddCustomColor": "Add Custom Color",
+  "PE.Views.EditTable.textCustomColor": "Custom Color",
   "PE.Views.EditText.textAdditional": "Additional",
   "PE.Views.EditText.textAdditionalFormat": "Additional Formatting",
   "PE.Views.EditText.textAfter": "After",
@@ -440,6 +449,8 @@
   "PE.Views.EditText.textSmallCaps": "Small Caps",
   "PE.Views.EditText.textStrikethrough": "Strikethrough",
   "PE.Views.EditText.textSubscript": "Subscript",
+  "PE.Views.EditText.textAddCustomColor": "Add Custom Color",
+  "PE.Views.EditText.textCustomColor": "Custom Color",
   "PE.Views.Search.textCase": "Case sensitive",
   "PE.Views.Search.textDone": "Done",
   "PE.Views.Search.textFind": "Find",
diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css
index 7196cae65..648310e5a 100644
--- a/apps/presentationeditor/mobile/resources/css/app-ios.css
+++ b/apps/presentationeditor/mobile/resources/css/app-ios.css
@@ -6218,9 +6218,127 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   display: inline-block;
   overflow: visible;
 }
-.color-palette .standart-colors .item-inner {
+.color-palette .standart-colors .item-inner,
+.color-palette .dynamic-colors .item-inner {
   overflow: visible;
 }
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+}
+.custom-colors.phone {
+  max-width: 300px;
+  margin: 0 auto;
+  margin-top: 4px;
+}
+.custom-colors.phone .button-round {
+  margin-top: 20px;
+}
+.custom-colors .right-block {
+  margin-left: 20px;
+}
+.custom-colors .button-round {
+  height: 72px;
+  width: 72px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: transparent;
+  margin-top: 25px;
+}
+.custom-colors .button-round.active-state {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.custom-colors .color-hsb-preview {
+  width: 72px;
+  height: 72px;
+  border-radius: 100px;
+  overflow: hidden;
+  border: 1px solid #c4c4c4;
+}
+.custom-colors .new-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .current-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .list-block ul:before,
+.custom-colors .list-block ul:after {
+  content: none;
+}
+.custom-colors .list-block ul li {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.custom-colors .color-picker-wheel {
+  position: relative;
+  width: 290px;
+  max-width: 100%;
+  height: auto;
+  font-size: 0;
+}
+.custom-colors .color-picker-wheel svg {
+  width: 100%;
+  height: auto;
+}
+.custom-colors .color-picker-wheel .color-picker-wheel-handle {
+  width: calc(16.66666667%);
+  height: calc(16.66666667%);
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+  background: red;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  position: relative;
+  width: 45%;
+  height: 45%;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
+  background-color: inherit;
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 150ms;
+  transition-property: transform;
+  transform-origin: center;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
+  transform: scale(1.5) translate(-33.333%, -33.333%);
+}
 .about .page-content {
   text-align: center;
 }
diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css
index 732875ea3..bf66cece5 100644
--- a/apps/presentationeditor/mobile/resources/css/app-material.css
+++ b/apps/presentationeditor/mobile/resources/css/app-material.css
@@ -5809,12 +5809,130 @@ html.phone .document-menu .list-block .item-link {
   display: inline-block;
   overflow: visible;
 }
-.color-palette .standart-colors .item-inner {
+.color-palette .standart-colors .item-inner,
+.color-palette .dynamic-colors .item-inner {
   overflow: visible;
 }
 .color-palette.list-block:last-child li:last-child a {
   border-radius: 0;
 }
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+}
+.custom-colors.phone {
+  max-width: 300px;
+  margin: 0 auto;
+  margin-top: 4px;
+}
+.custom-colors.phone .button-round {
+  margin-top: 20px;
+}
+.custom-colors .right-block {
+  margin-left: 20px;
+}
+.custom-colors .button-round {
+  height: 72px;
+  width: 72px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: #aa5252;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: transparent;
+  margin-top: 25px;
+}
+.custom-colors .button-round.active-state {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.custom-colors .color-hsb-preview {
+  width: 72px;
+  height: 72px;
+  border-radius: 100px;
+  overflow: hidden;
+  border: 1px solid #ededed;
+}
+.custom-colors .new-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .current-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .list-block ul:before,
+.custom-colors .list-block ul:after {
+  content: none;
+}
+.custom-colors .list-block ul li {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.custom-colors .color-picker-wheel {
+  position: relative;
+  width: 290px;
+  max-width: 100%;
+  height: auto;
+  font-size: 0;
+}
+.custom-colors .color-picker-wheel svg {
+  width: 100%;
+  height: auto;
+}
+.custom-colors .color-picker-wheel .color-picker-wheel-handle {
+  width: calc(16.66666667%);
+  height: calc(16.66666667%);
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+  background: red;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  position: relative;
+  width: 45%;
+  height: 45%;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
+  background-color: inherit;
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 150ms;
+  transition-property: transform;
+  transform-origin: center;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
+  transform: scale(1.5) translate(-33.333%, -33.333%);
+}
 .about .page-content {
   text-align: center;
 }
diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js
index 204c4be27..b34602d99 100644
--- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js
@@ -215,11 +215,9 @@ define([
             },
 
             initBorderColorPage: function () {
-                var me = this,
-                    palette = new Common.UI.ThemeColorPalette({
-                        el: $('.page[data-page=edit-border-color] .page-content')
-                    });
-
+                var me = this;
+                me.getView('EditCell').showBorderColorPage();
+                var palette = me.getView('EditCell').paletteBorderColor;
                 if (palette) {
                     palette.select(_borderInfo.color);
                     palette.on('select', _.bind(function (palette, color) {
diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
index 7c396b240..dcdcfccf9 100644
--- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
@@ -204,10 +204,7 @@ define([
 
                 // Fill
 
-                var paletteFillColor = new Common.UI.ThemeColorPalette({
-                    el: $('#tab-chart-fill'),
-                    transparent: true
-                });
+                var paletteFillColor = this.getView('EditChart').paletteFillColor;
 
                 paletteFillColor.on('select', _.bind(me.onFillColor, me));
 
@@ -533,9 +530,7 @@ define([
 
             initBorderColorPage: function () {
                 var me = this,
-                    palette = new Common.UI.ThemeColorPalette({
-                        el: $('.page[data-page=edit-chart-border-color] .page-content')
-                    });
+                    palette = me.getView('EditChart').paletteBorderColor;
 
                 if (palette) {
                     palette.select(_borderInfo.color);
diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js
index d5b0afd6d..292e98b35 100644
--- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js
@@ -161,11 +161,7 @@ define([
 
                 // Fill
 
-                var paletteFillColor = new Common.UI.ThemeColorPalette({
-                    el: $('#tab-shape-fill'),
-                    transparent: true
-                });
-
+                var paletteFillColor = me.getView('EditShape').paletteFillColor;
                 paletteFillColor.on('select', _.bind(me.onFillColor, me));
 
                 var fill = shapeProperties.asc_getFill(),
@@ -223,9 +219,7 @@ define([
 
             initBorderColorPage: function () {
                 var me = this,
-                    palette = new Common.UI.ThemeColorPalette({
-                        el: $('.page[data-page=edit-shape-border-color-view] .page-content')
-                    });
+                    palette = me.getView('EditShape').paletteBorderColor;
 
                 if (palette) {
                     palette.select(_borderInfo.color);
diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js
index d9befaa83..cdd296b61 100644
--- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js
@@ -197,9 +197,7 @@ define([
             initTextColorPage: function () {
                 var me = this,
                     color = me._sdkToThemeColor(_fontInfo.color),
-                    palette = new Common.UI.ThemeColorPalette({
-                        el: $('.page[data-page=edit-text-color] .page-content')
-                    });
+                    palette = me.getView('EditText').paletteTextColor;
 
                 if (palette) {
                     palette.select(color);
diff --git a/apps/spreadsheeteditor/mobile/app/template/EditCell.template b/apps/spreadsheeteditor/mobile/app/template/EditCell.template
index 93435f351..765b5be16 100644
--- a/apps/spreadsheeteditor/mobile/app/template/EditCell.template
+++ b/apps/spreadsheeteditor/mobile/app/template/EditCell.template
@@ -845,4 +845,21 @@
             </div>
         </div>
     </div>
+</div>
+
+
+<!-- Custom color view -->
+<div id="edit-cell-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-cell-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-cell-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/app/template/EditChart.template b/apps/spreadsheeteditor/mobile/app/template/EditChart.template
index 264e72092..54c2da199 100644
--- a/apps/spreadsheeteditor/mobile/app/template/EditChart.template
+++ b/apps/spreadsheeteditor/mobile/app/template/EditChart.template
@@ -623,4 +623,20 @@
             </div>
         </div>
     </div>
+</div>
+
+<!-- Custom color view -->
+<div id="edit-chart-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-chart-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-chart-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/app/template/EditShape.template b/apps/spreadsheeteditor/mobile/app/template/EditShape.template
index c99a04526..30844ae54 100644
--- a/apps/spreadsheeteditor/mobile/app/template/EditShape.template
+++ b/apps/spreadsheeteditor/mobile/app/template/EditShape.template
@@ -266,4 +266,20 @@
             <!--Color palette-->
         </div>
     </div>
+</div>
+
+<!-- Custom color view -->
+<div id="edit-shape-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-shape-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-shape-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/app/template/EditText.template b/apps/spreadsheeteditor/mobile/app/template/EditText.template
index 006a81b32..9191abcdc 100644
--- a/apps/spreadsheeteditor/mobile/app/template/EditText.template
+++ b/apps/spreadsheeteditor/mobile/app/template/EditText.template
@@ -117,3 +117,20 @@
         </div>
     </div>
 </div>
+
+
+<!-- Custom color view -->
+<div id="edit-text-custom-color-view">
+    <div class="navbar">
+        <div class="navbar-inner" data-page="edit-text-custom-color">
+            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textCustomColor %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-custom-color">
+        <div class="page-content">
+            <!--Color HSB palette-->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js
index 9cd75d3a9..4d31ef663 100644
--- a/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js
+++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js
@@ -45,7 +45,8 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -234,28 +235,142 @@ define([
             },
 
             showTextColor: function () {
+                var me = this;
                 this.showPage('#edit-text-color', true);
 
                 this.paletteTextColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-text-color] .page-content')
                 });
+                this.paletteTextColor.on('customcolor', function () {
+                    me.showCustomTextColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-cell-add-custom-text-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-text-color] .page-content').append(template({scope: this}));
+                $('#edit-cell-add-custom-text-color').single('click', _.bind(this.showCustomTextColor, this));
                 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-color]', '.page[data-page=edit-text-color] .page-content');
                 this.fireEvent('page:show', [this, '#edit-text-color']);
             },
 
+            showCustomTextColor: function () {
+                var me = this,
+                    selector = '#edit-cell-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customTextColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-cell-custom-color] .page-content'),
+                    color: me.paletteTextColor.currentColor
+                });
+                me.customTextColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteTextColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showFillColor: function () {
+                var me = this;
                 this.showPage('#edit-fill-color', true);
 
                 this.paletteFillColor = new Common.UI.ThemeColorPalette({
                     el: $('.page[data-page=edit-fill-color] .page-content'),
                     transparent: true
                 });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-cell-add-custom-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-fill-color] .page-content').append(template({scope: this}));
+                $('#edit-cell-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-fill-color]', '.page[data-page=edit-fill-color] .page-content');
                 this.fireEvent('page:show', [this, '#edit-fill-color']);
             },
 
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-cell-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customFillColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-cell-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showBorderColorPage: function () {
+                var me = this;
+                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-border-color] .page-content')
+                });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-cell-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-border-color] .page-content').append(template({scope: this}));
+                $('#edit-cell-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
+            },
+
+            showCustomBorderColor: function () {
+                var me = this,
+                    selector = '#edit-cell-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-cell-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             textBack: 'Back',
             textFonts: 'Fonts',
             textTextColor: 'Text Color',
@@ -305,7 +420,9 @@ define([
             textYen: 'Yen',
             textCharacterBold: 'B',
             textCharacterItalic: 'I',
-            textCharacterUnderline: 'U'
+            textCharacterUnderline: 'U',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
     }
     })(), SSE.Views.EditCell || {}))
 });
diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js
index b8b89edd1..782889856 100644
--- a/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js
+++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js
@@ -45,7 +45,8 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -179,6 +180,8 @@ define([
                 }).join(', ');
 
                 $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+                $('#chart-style').single('click', _.bind(this.showStyle, this));
+                $('#edit-chart-bordercolor').single('click', _.bind(this.showBorderColor, this));
 
                 $('.edit-chart-style.subnavbar.categories a').single('click', function () {
                     $('.page[data-page=edit-chart-style]').find('.list-block.inputs-list').removeClass('inputs-list');
@@ -206,6 +209,104 @@ define([
                 }
             },
 
+            showStyle: function () {
+                var me = this;
+                var page = '#edit-chart-style';
+                this.showPage(page, true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('#tab-chart-fill'),
+                    transparent: true
+                });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-add-custom-fill-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-chart-fill').append(template({scope: this}));
+                $('#edit-chart-add-custom-fill-color').single('click', _.bind(this.showCustomFillColor, this));
+
+                Common.Utils.addScrollIfNeed('.page[data-page=edit-chart-style]', '.page[data-page=edit-chart-style] .page-content');
+                this.fireEvent('page:show', [this, page]);
+            },
+
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customFillColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showBorderColor: function () {
+                var me = this;
+                var selector = '#edit-chart-border-color-view';
+                this.showPage(selector, true);
+
+                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-chart-border-color] .page-content')
+                });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-chart-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-chart-border-color] .page-content').append(template({scope: this}));
+                $('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
+
+                this.fireEvent('page:show', [this, selector]);
+            },
+
+            showCustomBorderColor: function () {
+                var me = this,
+                    selector = '#edit-chart-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             onItemClick: function (e) {
                 var $target = $(e.currentTarget),
                     page = $target.data('page');
@@ -266,7 +367,9 @@ define([
             textLabelPos: 'Label Position',
             textAxisPosition: 'Axis Position',
             textNone: 'None',
-            textGridlines: 'Gridlines'
+            textGridlines: 'Gridlines',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), SSE.Views.EditChart || {}))
 });
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js
index 2912ca048..f05651271 100644
--- a/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js
+++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditShape.js
@@ -43,7 +43,9 @@ define([
     'text!spreadsheeteditor/mobile/app/template/EditShape.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -61,17 +63,18 @@ define([
             initialize: function () {
                 Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
                 Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-                this.on('page:show', _.bind(this.updateItemHandlers, this));
+                //this.on('page:show', _.bind(this.updateItemHandlers, this));
                 this.isShapeCanFill = true;
             },
 
             initEvents: function () {
                 var me = this;
 
+                me.updateItemHandlers();
+
                 $('.edit-shape-style .categories a').single('click', _.bind(me.showStyleCategory, me));
 
                 Common.Utils.addScrollIfNeed('#edit-shape .pages', '#edit-shape .page');
-                me.updateItemHandlers();
                 me.initControls();
             },
 
@@ -121,6 +124,8 @@ define([
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-border-color-view]', '.page[data-page=edit-shape-border-color-view] .page-content');
                 $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+                $('#shape-style').single('click', _.bind(this.showStyle, this));
+                $('#edit-shape-bordercolor').single('click', _.bind(this.showBorderColor, this));
             },
 
             showPage: function (templateId, suspendEvent) {
@@ -146,6 +151,111 @@ define([
                 }
             },
 
+            showStyle: function () {
+                var me = this;
+                var page = '#edit-shape-style';
+                if (!this.isShapeCanFill) {
+                    page = '#edit-shape-style-nofill';
+                }
+                this.showPage(page, true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('#tab-shape-fill'),
+                    transparent: true
+                });
+                this.paletteFillColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-cell-add-custom-fill-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('#tab-shape-fill').append(template({scope: this}));
+                $('#edit-cell-add-custom-fill-color').single('click', _.bind(this.showCustomFillColor, this));
+
+                if (!this.isShapeCanFill)
+                    this.showStyleCategory();
+
+                Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
+                this.fireEvent('page:show', [this, page]);
+            },
+
+            showCustomFillColor: function () {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customFillColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteFillColor.currentColor
+                });
+                me.customFillColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
+            showBorderColor: function () {
+                var me = this;
+                var selector = '#edit-shape-border-color-view';
+                this.showPage(selector, true);
+
+                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-shape-border-color-view] .page-content')
+                });
+                this.paletteBorderColor.on('customcolor', function () {
+                    me.showCustomBorderColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-shape-add-custom-border-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-shape-border-color-view] .page-content').append(template({scope: this}));
+                $('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
+
+                this.fireEvent('page:show', [this, selector]);
+
+            },
+
+            showCustomBorderColor: function () {
+                var me = this,
+                    selector = '#edit-shape-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
+                    color: me.paletteBorderColor.currentColor
+                });
+                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
+                    me.paletteFillColor.updateDynamicColors();
+                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             showStyleCategory: function (e) {
                 // remove android specific style
                 $('.page[data-page=edit-shape-style] .list-block.inputs-list').removeClass('inputs-list');
@@ -156,13 +266,9 @@ define([
                     page = $target.data('page');
 
                 if (page && page.length > 0 ) {
-                    if (page == '#edit-shape-style' && !this.isShapeCanFill)
-                        page = '#edit-shape-style-nofill';
 
                     this.showPage(page);
 
-                    if (!this.isShapeCanFill)
-                        this.showStyleCategory();
                 }
 
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-shape-style]', '.page[data-page=edit-shape-style] .page-content');
@@ -184,7 +290,9 @@ define([
             textEffects: 'Effects',
             textSize: 'Size',
             textColor: 'Color',
-            textOpacity: 'Opacity'
+            textOpacity: 'Opacity',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), SSE.Views.EditShape || {}))
 });
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js b/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js
index 459bf5d92..9db866c27 100644
--- a/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js
+++ b/apps/spreadsheeteditor/mobile/app/view/edit/EditText.js
@@ -44,7 +44,9 @@ define([
     'text!spreadsheeteditor/mobile/app/template/EditText.template',
     'jquery',
     'underscore',
-    'backbone'
+    'backbone',
+    'common/mobile/lib/component/ThemeColorPalette',
+    'common/mobile/lib/component/HsbColorPicker'
 ], function (editTemplate, $, _, Backbone) {
     'use strict';
 
@@ -62,7 +64,6 @@ define([
             initialize: function () {
                 Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
                 Common.NotificationCenter.on('fonts:load', _.bind(this.onApiFontsLoad, this));
-                this.on('page:show', _.bind(this.updateItemHandlers, this));
             },
 
             initEvents: function () {
@@ -105,6 +106,7 @@ define([
                 }).join(', ');
 
                 $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
+                $('#font-color').single('click', _.bind(this.showFontColor, this));
             },
 
             showPage: function (templateId, suspendEvent) {
@@ -130,6 +132,55 @@ define([
                 }
             },
 
+            showFontColor: function () {
+                var me = this;
+                var page = '#edit-text-color';
+                this.showPage(page, true);
+
+                this.paletteTextColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-text-color] .page-content'),
+                    transparent: true
+                });
+                this.paletteTextColor.on('customcolor', function () {
+                    me.showCustomFillColor();
+                });
+                var template = _.template(['<div class="list-block">',
+                    '<ul>',
+                    '<li>',
+                    '<a id="edit-text-add-custom-fill-color" class="item-link">',
+                    '<div class="item-content">',
+                    '<div class="item-inner">',
+                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
+                    '</div>',
+                    '</div>',
+                    '</a>',
+                    '</li>',
+                    '</ul>',
+                    '</div>'].join(''));
+                $('.page[data-page=edit-text-color] .page-content').append(template({scope: this}));
+                $('#edit-text-add-custom-fill-color').single('click', _.bind(this.showCustomTextColor, this));
+
+                Common.Utils.addScrollIfNeed('.page[data-page=edit-text]', '.page[data-page=edit-text] .page-content');
+                this.fireEvent('page:show', [this, page]);
+            },
+
+            showCustomTextColor: function () {
+                var me = this,
+                    selector = '#edit-text-custom-color-view';
+                me.showPage(selector, true);
+
+                me.customTextColorPicker = new Common.UI.HsbColorPicker({
+                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
+                    color: me.paletteTextColor.currentColor
+                });
+                me.customTextColorPicker.on('addcustomcolor', function (colorPicker, color) {
+                    me.paletteTextColor.addNewDynamicColor(colorPicker, color);
+                    SSE.getController('EditContainer').rootView.router.back();
+                });
+
+                me.fireEvent('page:show', [me, selector]);
+            },
+
             renderFonts: function () {
                 var me = this,
                     $template = $(
@@ -180,7 +231,9 @@ define([
             textSize: 'Size',
             textCharacterBold: 'B',
             textCharacterItalic: 'I',
-            textCharacterUnderline: 'U'
+            textCharacterUnderline: 'U',
+            textAddCustomColor: 'Add Custom Color',
+            textCustomColor: 'Custom Color'
         }
     })(), SSE.Views.EditText || {}))
 });
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index 138513d20..a2dfeeeb3 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -2,6 +2,7 @@
   "Common.Controllers.Collaboration.textEditUser": "Document is currently being edited by several users.",
   "Common.UI.ThemeColorPalette.textStandartColors": "Standard Colors",
   "Common.UI.ThemeColorPalette.textThemeColors": "Theme Colors",
+  "Common.UI.ThemeColorPalette.textCustomColors": "Custom Colors",
   "Common.Utils.Metric.txtCm": "cm",
   "Common.Utils.Metric.txtPt": "pt",
   "Common.Views.Collaboration.textBack": "Back",
@@ -395,6 +396,8 @@
   "SSE.Views.EditCell.textTopBorder": "Top Border",
   "SSE.Views.EditCell.textWrapText": "Wrap Text",
   "SSE.Views.EditCell.textYen": "Yen",
+  "SSE.Views.EditCell.textAddCustomColor": "Add Custom Color",
+  "SSE.Views.EditCell.textCustomColor": "Custom Color",
   "SSE.Views.EditChart.textAuto": "Auto",
   "SSE.Views.EditChart.textAxisCrosses": "Axis Crosses",
   "SSE.Views.EditChart.textAxisOptions": "Axis Options",
@@ -447,6 +450,8 @@
   "SSE.Views.EditChart.textValReverseOrder": "Values in Reverse Order",
   "SSE.Views.EditChart.textVerAxis": "Vertical Axis",
   "SSE.Views.EditChart.textVertical": "Vertical",
+  "SSE.Views.EditChart.textAddCustomColor": "Add Custom Color",
+  "SSE.Views.EditChart.textCustomColor": "Custom Color",
   "SSE.Views.EditHyperlink.textBack": "Back",
   "SSE.Views.EditHyperlink.textDisplay": "Display",
   "SSE.Views.EditHyperlink.textEditLink": "Edit Link",
@@ -488,6 +493,8 @@
   "SSE.Views.EditShape.textStyle": "Style",
   "SSE.Views.EditShape.textToBackground": "Send to Background",
   "SSE.Views.EditShape.textToForeground": "Bring to Foreground",
+  "SSE.Views.EditShape.textAddCustomColor": "Add Custom Color",
+  "SSE.Views.EditShape.textCustomColor": "Custom Color",
   "SSE.Views.EditText.textBack": "Back",
   "SSE.Views.EditText.textCharacterBold": "B",
   "SSE.Views.EditText.textCharacterItalic": "I",
@@ -496,6 +503,8 @@
   "SSE.Views.EditText.textFonts": "Fonts",
   "SSE.Views.EditText.textSize": "Size",
   "SSE.Views.EditText.textTextColor": "Text Color",
+  "SSE.Views.EditText.textAddCustomColor": "Add Custom Color",
+  "SSE.Views.EditText.textCustomColor": "Custom Color",
   "SSE.Views.FilterOptions.textClearFilter": "Clear Filter",
   "SSE.Views.FilterOptions.textDeleteFilter": "Delete Filter",
   "SSE.Views.FilterOptions.textFilter": "Filter Options",
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
index 74b26d6ad..fd37673e5 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
@@ -6218,9 +6218,127 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   display: inline-block;
   overflow: visible;
 }
-.color-palette .standart-colors .item-inner {
+.color-palette .standart-colors .item-inner,
+.color-palette .dynamic-colors .item-inner {
   overflow: visible;
 }
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+}
+.custom-colors.phone {
+  max-width: 300px;
+  margin: 0 auto;
+  margin-top: 4px;
+}
+.custom-colors.phone .button-round {
+  margin-top: 20px;
+}
+.custom-colors .right-block {
+  margin-left: 20px;
+}
+.custom-colors .button-round {
+  height: 72px;
+  width: 72px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: transparent;
+  margin-top: 25px;
+}
+.custom-colors .button-round.active-state {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.custom-colors .color-hsb-preview {
+  width: 72px;
+  height: 72px;
+  border-radius: 100px;
+  overflow: hidden;
+  border: 1px solid #c4c4c4;
+}
+.custom-colors .new-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .current-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .list-block ul:before,
+.custom-colors .list-block ul:after {
+  content: none;
+}
+.custom-colors .list-block ul li {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.custom-colors .color-picker-wheel {
+  position: relative;
+  width: 290px;
+  max-width: 100%;
+  height: auto;
+  font-size: 0;
+}
+.custom-colors .color-picker-wheel svg {
+  width: 100%;
+  height: auto;
+}
+.custom-colors .color-picker-wheel .color-picker-wheel-handle {
+  width: calc(16.66666667%);
+  height: calc(16.66666667%);
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+  background: red;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  position: relative;
+  width: 45%;
+  height: 45%;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
+  background-color: inherit;
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 150ms;
+  transition-property: transform;
+  transform-origin: center;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
+  transform: scale(1.5) translate(-33.333%, -33.333%);
+}
 .about .page-content {
   text-align: center;
 }
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
index dd99508dd..61264eaf2 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
@@ -5819,12 +5819,130 @@ html.phone .document-menu .list-block .item-link {
   display: inline-block;
   overflow: visible;
 }
-.color-palette .standart-colors .item-inner {
+.color-palette .standart-colors .item-inner,
+.color-palette .dynamic-colors .item-inner {
   overflow: visible;
 }
 .color-palette.list-block:last-child li:last-child a {
   border-radius: 0;
 }
+.custom-colors {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 15px;
+}
+.custom-colors.phone {
+  max-width: 300px;
+  margin: 0 auto;
+  margin-top: 4px;
+}
+.custom-colors.phone .button-round {
+  margin-top: 20px;
+}
+.custom-colors .right-block {
+  margin-left: 20px;
+}
+.custom-colors .button-round {
+  height: 72px;
+  width: 72px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: #40865c;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: transparent;
+  margin-top: 25px;
+}
+.custom-colors .button-round.active-state {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.custom-colors .color-hsb-preview {
+  width: 72px;
+  height: 72px;
+  border-radius: 100px;
+  overflow: hidden;
+  border: 1px solid #ededed;
+}
+.custom-colors .new-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .current-color-hsb-preview {
+  width: 100%;
+  height: 36px;
+}
+.custom-colors .list-block ul:before,
+.custom-colors .list-block ul:after {
+  content: none;
+}
+.custom-colors .list-block ul li {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.custom-colors .color-picker-wheel {
+  position: relative;
+  width: 290px;
+  max-width: 100%;
+  height: auto;
+  font-size: 0;
+}
+.custom-colors .color-picker-wheel svg {
+  width: 100%;
+  height: auto;
+}
+.custom-colors .color-picker-wheel .color-picker-wheel-handle {
+  width: calc(16.66666667%);
+  height: calc(16.66666667%);
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+  background: red;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  position: relative;
+  width: 45%;
+  height: 45%;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  position: absolute;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle:after {
+  background-color: inherit;
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 150ms;
+  transition-property: transform;
+  transform-origin: center;
+}
+.custom-colors .color-picker-wheel .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after {
+  transform: scale(1.5) translate(-33.333%, -33.333%);
+}
 .about .page-content {
   text-align: center;
 }