diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js
index 3a2b00366..d4bf91a62 100644
--- a/apps/common/main/lib/component/MultiSliderGradient.js
+++ b/apps/common/main/lib/component/MultiSliderGradient.js
@@ -146,6 +146,43 @@ define([
             return recalc_indexes;
         },
 
+        findLeftThumb: function(pos) {
+            var me = this,
+                leftThumb = 100,
+                index = 0,
+                len = this.thumbs.length,
+                dist;
+
+            for (var i=0; i<len; i++) {
+                dist = pos - me.thumbs[i].position;
+                if (dist > 0 && dist <= leftThumb) {
+                    var above = me.thumbs[i + 1];
+                    var below = me.thumbs[i - 1];
+
+                    if (below !== undefined && pos < below.position) {
+                        continue;
+                    }
+                    if (above !== undefined && pos > above.position) {
+                        continue;
+                    }
+                    index = i;
+                    leftThumb = dist;
+                }
+            }
+            return index;
+        },
+
+        calculationNewColor: function(color1, color2, ratio) {
+            var w1 = ratio ? ratio/100 : 0.5;
+            var w2 = 1 - w1;
+            var rgbColor1 = Common.Utils.ThemeColor.getRgbColor(color1),
+                rgbColor2 = Common.Utils.ThemeColor.getRgbColor(color2);
+            var rgb = [Math.round(rgbColor1.get_r() * w2 + rgbColor2.get_r() * w1),
+                Math.round(rgbColor1.get_g() * w2 + rgbColor2.get_g() * w1),
+                Math.round(rgbColor1.get_b() * w2 + rgbColor2.get_b() * w1)];
+            return Common.Utils.ThemeColor.getHexColor(rgb[0], rgb[1], rgb[2]);
+        },
+
         addThumb: function() {
             Common.UI.MultiSlider.prototype.addThumb.call(this);
 
@@ -159,23 +196,29 @@ define([
             me.changeSliderStyle();
         },
 
-        addNewThumb: function(index, color, pos, curIndex) {
-            var me = this;
-            var color = color;
-            var index = index;
-            if (!_.isUndefined(pos) && !_.isUndefined(curIndex)) {
+        addNewThumb: function(index, pos, curIndex) {
+            var me = this,
+                indexLeftThumb = this.findLeftThumb(pos),
+                index = index,
+                color;
+            if (!_.isUndefined(curIndex)) {
                 this.addThumb();
                 index = this.thumbs.length - 1;
-                color = this.thumbs[curIndex].colorValue;
+                color = this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue);
                 this.setThumbPosition(index, pos);
-                var value = pos/me.delta + me.minValue;
-                me.thumbs[index].value = value;
+                var value = pos/this.delta + this.minValue;
+                this.thumbs[index].value = value;
+            } else {
+                var ratio = (pos - this.thumbs[indexLeftThumb].value) * 100 / (this.thumbs[indexLeftThumb + 1].value - this.thumbs[indexLeftThumb].value);
+                color = ratio < 0 ? this.thumbs[indexLeftThumb].colorValue : this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue, ratio);
             }
             me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
-            (index>0) && this.setColorValue(color, index);
+            (index>0) && this.setColorValue('#' + color, index);
             me.sortThumbs();
             me.changeSliderStyle();
             me.changeGradientStyle();
+
+            return color;
         },
 
         removeThumb: function(index) {
diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 6565a72a7..f6f110811 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -432,7 +432,7 @@ define([
                 var index = me.thumbs.length - 1;
                 me.setThumbPosition(index, pos);
                 me.thumbs[index].value = value;
-                me.trigger('addthumb', me, index, nearIndex, thumbColor);
+                me.trigger('addthumb', me, index, pos);
 
                 me.trigger('change', me);
                 me.trigger('changecomplete', me);
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 33349941d..ecaa59708 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1380,10 +1380,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1892,7 +1893,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index 853a16886..32e00e1c1 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -945,10 +945,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1226,7 +1227,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index d0f90602a..eff763f08 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1292,10 +1292,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1763,7 +1764,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index ba1a31eed..d88b075d1 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -837,10 +837,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1563,7 +1564,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index be2c49807..1eb97c4b2 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -1252,10 +1252,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1657,7 +1658,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 998627e17..8eef682fb 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -278,10 +278,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1250,7 +1251,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 75822f0fd..18ea5de33 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1318,10 +1318,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1794,7 +1795,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index dd00417c2..f5416e3bf 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -1256,10 +1256,11 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
@@ -1660,7 +1661,8 @@ define([
 
             this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
             this.GradColor.currentIdx = this.GradColor.colors.length - 1;
-            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
 
             this.sldrGradient.trigger('change', this.sldrGradient);
             this.sldrGradient.trigger('changecomplete', this.sldrGradient);