diff --git a/css/app.css b/css/app.css
index feaddb8b9..dba54c198 100644
--- a/css/app.css
+++ b/css/app.css
@@ -482,7 +482,7 @@ button.save.has-count .count::before {
     bottom: 0;
     border-top:    6px solid transparent;
     border-bottom: 6px solid transparent;
-    border-right:  6px solid rgba(255,255,255,.5);
+    border-right:  6px solid rgba(255,255,255,.9);
 }
 
 /* Icons */
@@ -3228,4 +3228,4 @@ div.full-screen > button:hover {
     width: 100px;
     background: rgba(0, 0, 0, 0) url(img/iD-sprite.svg) no-repeat -300px -460px;
     margin: auto;
-}
+}
\ No newline at end of file
diff --git a/js/id/ui/save.js b/js/id/ui/save.js
index 212e5c85b..2c06c08a1 100644
--- a/js/id/ui/save.js
+++ b/js/id/ui/save.js
@@ -1,6 +1,11 @@
 iD.ui.Save = function(context) {
     var history = context.history(),
-        key = iD.ui.cmd('⌘S');
+        key = iD.ui.cmd('⌘S'),
+        prevNumchange = 0 ,
+        color = 255 ,
+        saveBtnBackground = '';
+       
+       
 
     function saving() {
         return context.mode().id === 'save';
@@ -13,6 +18,35 @@ iD.ui.Save = function(context) {
         }
     }
 
+    function getBackground(numChanges) {
+        var step = parseInt(255 / 50);
+        var background = '';
+        if(numChanges < 50) {
+            prevNumchange = numChanges;
+            return 'rgba(255,255,255)';
+           }
+        else if(numChanges === 50) {
+            prevNumchange = numChanges;
+            return 'rgb(255 , 255 , 136)';
+        }
+        else if(numChanges > 50 && numChanges < 100) {
+            if(prevNumchange < numChanges) {
+                color = color - step;
+                background = 'rgb(255, ' + color + ' , 0)';
+                }
+            else if(prevNumchange > numChanges) {
+                color = color +  step;
+                background = 'rgb(255 , '+ color + ' , 0)';
+                }
+            prevNumchange = numChanges;  
+            return background;
+         }
+         else {
+            prevNumchange = numChanges;
+            return 'rgb(255 , 0 , 0 )';
+         }
+    }
+
     return function(selection) {
         var tooltip = bootstrap.tooltip()
             .placement('bottom')
@@ -49,13 +83,16 @@ iD.ui.Save = function(context) {
 
             tooltip.title(iD.ui.tooltipHtml(t(numChanges > 0 ?
                     'save.help' : 'save.no_changes'), key));
-
+            saveBtnBackground =  getBackground(numChanges);
             button
                 .classed('disabled', numChanges === 0)
-                .classed('has-count', numChanges > 0);
-
+                .classed('has-count', numChanges > 0)
+                .style('background' , saveBtnBackground);
             button.select('span.count')
-                .text(numChanges);
+                .text(numChanges)
+                .style('background' , saveBtnBackground)
+                .style('opacity' ,  '0.5' );
+               
         });
 
         context.on('enter.save', function() {