diff --git a/src/components/generic-tracked-controller-controls.js b/src/components/generic-tracked-controller-controls.js
index 11562e51b63..f9c50f7aa2b 100644
--- a/src/components/generic-tracked-controller-controls.js
+++ b/src/components/generic-tracked-controller-controls.js
@@ -67,7 +67,6 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     this.controllerPresent = false;
     this.wasControllerConnected = false;
     this.lastControllerCheck = 0;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
 
     // generic-tracked-controller-controls has the lowest precedence.
diff --git a/src/components/hp-mixed-reality-controls.js b/src/components/hp-mixed-reality-controls.js
index ffbde34b627..5848745a3ae 100644
--- a/src/components/hp-mixed-reality-controls.js
+++ b/src/components/hp-mixed-reality-controls.js
@@ -61,7 +61,6 @@ module.exports.Component = registerComponent('hp-mixed-reality-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self, self.data.hand); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self, self.data.hand); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },
diff --git a/src/components/light.js b/src/components/light.js
index 6c6286b1c91..0f387ed3f86 100644
--- a/src/components/light.js
+++ b/src/components/light.js
@@ -56,7 +56,6 @@ module.exports.Component = registerComponent('light', {
     var el = this.el;
     this.light = null;
     this.defaultTarget = null;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.system.registerLight(el);
   },
 
@@ -67,7 +66,6 @@ module.exports.Component = registerComponent('light', {
     var data = this.data;
     var diffData = diff(data, oldData);
     var light = this.light;
-    var rendererSystem = this.rendererSystem;
     var self = this;
 
     // Existing light.
@@ -80,13 +78,11 @@ module.exports.Component = registerComponent('light', {
         switch (key) {
           case 'color': {
             light.color.set(value);
-            rendererSystem.applyColorCorrection(light.color);
             break;
           }
 
           case 'groundColor': {
             light.groundColor.set(value);
-            rendererSystem.applyColorCorrection(light.groundColor);
             break;
           }
 
@@ -281,12 +277,10 @@ module.exports.Component = registerComponent('light', {
   getLight: function (data) {
     var angle = data.angle;
     var color = new THREE.Color(data.color);
-    this.rendererSystem.applyColorCorrection(color);
     color = color.getHex();
     var decay = data.decay;
     var distance = data.distance;
     var groundColor = new THREE.Color(data.groundColor);
-    this.rendererSystem.applyColorCorrection(groundColor);
     groundColor = groundColor.getHex();
     var intensity = data.intensity;
     var type = data.type;
diff --git a/src/components/line.js b/src/components/line.js
index 452af93a090..3696e7e54d1 100644
--- a/src/components/line.js
+++ b/src/components/line.js
@@ -16,7 +16,6 @@ module.exports.Component = registerComponent('line', {
     var data = this.data;
     var geometry;
     var material;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     material = this.material = new THREE.LineBasicMaterial({
       color: data.color,
       opacity: data.opacity,
@@ -26,7 +25,6 @@ module.exports.Component = registerComponent('line', {
     geometry = this.geometry = new THREE.BufferGeometry();
     geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
 
-    this.rendererSystem.applyColorCorrection(material.color);
     this.line = new THREE.Line(geometry, material);
     this.el.setObject3D(this.attrName, this.line);
   },
@@ -59,7 +57,6 @@ module.exports.Component = registerComponent('line', {
     }
 
     material.color.setStyle(data.color);
-    this.rendererSystem.applyColorCorrection(material.color);
     material.opacity = data.opacity;
     material.transparent = data.opacity < 1;
     material.visible = data.visible;
diff --git a/src/components/magicleap-controls.js b/src/components/magicleap-controls.js
index ee926f58cfe..6e0b687ac58 100644
--- a/src/components/magicleap-controls.js
+++ b/src/components/magicleap-controls.js
@@ -56,7 +56,6 @@ module.exports.Component = registerComponent('magicleap-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },
diff --git a/src/components/obj-model.js b/src/components/obj-model.js
index dcf4642c9a4..55ae9f6facc 100644
--- a/src/components/obj-model.js
+++ b/src/components/obj-model.js
@@ -64,9 +64,7 @@ module.exports.Component = registerComponent('obj-model', {
           self.model.traverse(function (object) {
             if (object.isMesh) {
               var material = object.material;
-              if (material.color) rendererSystem.applyColorCorrection(material.color);
               if (material.map) rendererSystem.applyColorCorrection(material.map);
-              if (material.emissive) rendererSystem.applyColorCorrection(material.emissive);
               if (material.emissiveMap) rendererSystem.applyColorCorrection(material.emissiveMap);
             }
           });
diff --git a/src/components/oculus-go-controls.js b/src/components/oculus-go-controls.js
index 2798253e273..5f5ee9b62ff 100644
--- a/src/components/oculus-go-controls.js
+++ b/src/components/oculus-go-controls.js
@@ -83,7 +83,6 @@ module.exports.Component = registerComponent('oculus-go-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.controllerPresent = false;
     this.lastControllerCheck = 0;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
   },
 
@@ -197,6 +196,5 @@ module.exports.Component = registerComponent('oculus-go-controls', {
     }
     button = buttonMeshes[buttonName];
     button.material.color.set(color);
-    this.rendererSystem.applyColorCorrection(button.material.color);
   }
 });
diff --git a/src/components/oculus-touch-controls.js b/src/components/oculus-touch-controls.js
index 476f75eefcf..16ff5b65386 100644
--- a/src/components/oculus-touch-controls.js
+++ b/src/components/oculus-touch-controls.js
@@ -197,7 +197,6 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.controllerPresent = false;
     this.lastControllerCheck = 0;
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
     this.triggerEuler = new THREE.Euler();
   },
@@ -498,7 +497,6 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     if (buttonMeshes && buttonMeshes[buttonName]) {
       button = buttonMeshes[buttonName];
       button.material.color.set(color);
-      this.rendererSystem.applyColorCorrection(button.material.color);
     }
   }
 });
diff --git a/src/components/valve-index-controls.js b/src/components/valve-index-controls.js
index d1bbbc82e4f..dab3b9ef016 100644
--- a/src/components/valve-index-controls.js
+++ b/src/components/valve-index-controls.js
@@ -73,7 +73,6 @@ module.exports.Component = registerComponent('valve-index-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },
diff --git a/src/components/vive-controls.js b/src/components/vive-controls.js
index dd3dbc2854d..72bd9789174 100644
--- a/src/components/vive-controls.js
+++ b/src/components/vive-controls.js
@@ -77,7 +77,6 @@ module.exports.Component = registerComponent('vive-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },
@@ -241,7 +240,6 @@ module.exports.Component = registerComponent('vive-controls', {
 
   setButtonColor: function (buttonName, color) {
     var buttonMeshes = this.buttonMeshes;
-    var rendererSystem = this.rendererSystem;
 
     if (!buttonMeshes) { return; }
 
@@ -249,11 +247,8 @@ module.exports.Component = registerComponent('vive-controls', {
     if (buttonName === 'grip') {
       buttonMeshes.grip.left.material.color.set(color);
       buttonMeshes.grip.right.material.color.set(color);
-      rendererSystem.applyColorCorrection(buttonMeshes.grip.left.material.color);
-      rendererSystem.applyColorCorrection(buttonMeshes.grip.right.material.color);
       return;
     }
     buttonMeshes[buttonName].material.color.set(color);
-    rendererSystem.applyColorCorrection(buttonMeshes[buttonName].material.color);
   }
 });
diff --git a/src/shaders/flat.js b/src/shaders/flat.js
index 72cd9887cbc..73df91aeaac 100755
--- a/src/shaders/flat.js
+++ b/src/shaders/flat.js
@@ -24,11 +24,9 @@ module.exports.Shader = registerShader('flat', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.materialData = {color: new THREE.Color()};
     this.textureSrc = null;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     this.material = new THREE.MeshBasicMaterial(this.materialData);
   },
 
@@ -45,7 +43,6 @@ module.exports.Shader = registerShader('flat', {
   updateMaterial: function (data) {
     var key;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     for (key in this.materialData) {
       this.material[key] = this.materialData[key];
     }
diff --git a/src/shaders/phong.js b/src/shaders/phong.js
index 924f6fc767e..14054c0b95c 100644
--- a/src/shaders/phong.js
+++ b/src/shaders/phong.js
@@ -52,11 +52,9 @@ module.exports.Shader = registerShader('phong', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.materialData = { color: new THREE.Color(), specular: new THREE.Color(), emissive: new THREE.Color() };
     this.textureSrc = null;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     this.material = new THREE.MeshPhongMaterial(this.materialData);
     utils.material.updateMap(this, data);
   },
@@ -79,7 +77,6 @@ module.exports.Shader = registerShader('phong', {
   updateMaterial: function (data) {
     var key;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     for (key in this.materialData) {
       this.material[key] = this.materialData[key];
     }
diff --git a/src/shaders/shadow.js b/src/shaders/shadow.js
index 09ffcc883a5..d6ff730a45e 100644
--- a/src/shaders/shadow.js
+++ b/src/shaders/shadow.js
@@ -16,7 +16,6 @@ module.exports.Shader = registerShader('shadow', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.material = new THREE.ShadowMaterial();
   },
 
diff --git a/src/shaders/standard.js b/src/shaders/standard.js
index 9a08dd827ff..1b4cb61d278 100755
--- a/src/shaders/standard.js
+++ b/src/shaders/standard.js
@@ -61,11 +61,8 @@ module.exports.Shader = registerShader('standard', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.materialData = {color: new THREE.Color(), emissive: new THREE.Color()};
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
-    this.rendererSystem.applyColorCorrection(this.materialData.emissive);
     this.material = new THREE.MeshStandardMaterial(this.materialData);
   },
 
@@ -90,8 +87,6 @@ module.exports.Shader = registerShader('standard', {
     var key;
     var material = this.material;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
-    this.rendererSystem.applyColorCorrection(this.materialData.emissive);
     for (key in this.materialData) {
       material[key] = this.materialData[key];
     }
diff --git a/src/systems/renderer.js b/src/systems/renderer.js
index 7f946b6daac..8f6f0fc00dd 100644
--- a/src/systems/renderer.js
+++ b/src/systems/renderer.js
@@ -38,6 +38,7 @@ module.exports.System = registerSystem('renderer', {
 
     if (data.colorManagement || data.gammaOutput) {
       renderer.outputEncoding = THREE.sRGBEncoding;
+      THREE.ColorManagement.legacyMode = false;
       if (data.gammaOutput) {
         warn('Property `gammaOutput` is deprecated. Use `renderer="colorManagement: true;"` instead.');
       }
@@ -62,13 +63,11 @@ module.exports.System = registerSystem('renderer', {
     renderer.xr.setFoveation(data.foveationLevel);
   },
 
-  applyColorCorrection: function (colorOrTexture) {
-    if (!this.data.colorManagement || !colorOrTexture) {
+  applyColorCorrection: function (texture) {
+    if (!this.data.colorManagement || !texture) {
       return;
-    } else if (colorOrTexture.isColor) {
-      colorOrTexture.convertSRGBToLinear();
-    } else if (colorOrTexture.isTexture) {
-      colorOrTexture.encoding = THREE.sRGBEncoding;
+    } else if (texture.isTexture) {
+      texture.encoding = THREE.sRGBEncoding;
     }
   }
 });
diff --git a/tests/__init.test.js b/tests/__init.test.js
index 6c34250033f..db120e96a00 100644
--- a/tests/__init.test.js
+++ b/tests/__init.test.js
@@ -77,6 +77,8 @@ teardown(function (done) {
   this.sinon.restore();
   delete AFRAME.components.test;
   delete AFRAME.systems.test;
+  // Reset global legacyMode flag in THREE
+  AFRAME.THREE.ColorManagement.legacyMode = true;
 
   // Allow detachedCallbacks to clean themselves up.
   setTimeout(function () {