diff --git a/js/ui/magnifier.js b/js/ui/magnifier.js
index a3813c3a4..f4440cd86 100644
--- a/js/ui/magnifier.js
+++ b/js/ui/magnifier.js
@@ -1641,14 +1641,14 @@ const MagShaderEffects = new Lang.Class({
     _init: function(uiGroupClone) {
         this._inverse = new Shell.InvertLightnessEffect();
         this._brightnessContrast = new Clutter.BrightnessContrastEffect();
-        this._colorSaturation = new Clutter.DesaturateEffect();
+        this._colorDesaturation = new Clutter.DesaturateEffect();
         this._inverse.set_enabled(false);
         this._brightnessContrast.set_enabled(false);
 
         this._magView = uiGroupClone;
         this._magView.add_effect(this._inverse);
         this._magView.add_effect(this._brightnessContrast);
-        this._magView.add_effect(this._colorSaturation);
+        this._magView.add_effect(this._colorDesaturation);
     },
 
     /**
@@ -1659,7 +1659,7 @@ const MagShaderEffects = new Lang.Class({
      */
     destroyEffects: function() {
         this._magView.clear_effects();
-        this._colorSaturation = null;
+        this._colorDesaturation = null;
         this._brightnessContrast = null;
         this._inverse = null;
         this._magView = null;
@@ -1684,11 +1684,11 @@ const MagShaderEffects = new Lang.Class({
     },
 
     setColorSaturation: function(factor) {
-        this._colorSaturation.set_factor(factor);
+        this._colorDesaturation.set_factor(1.0 - factor);
     },
 
     getColorSaturation: function() {
-        return this._colorSaturation.get_factor();
+        return 1.0 - this._colorDesaturation.get_factor();
     },
 
     /**