diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index c15c288bd946b7..d045cdbabc1fcd 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -123,7 +123,22 @@ function WebGLRenderer( parameters = {} ) {
 
 	// physically based shading
 
-	this.outputEncoding = LinearEncoding;
+	let _outputEncoding = LinearEncoding;
+
+	Object.defineProperty( this, 'outputEncoding', {
+
+		get: () => _outputEncoding,
+
+		set: ( encoding ) => {
+
+			_outputEncoding = encoding;
+
+			// Reapply color space conversion.
+			background.setClearColor( background.getClearColor() );
+
+		},
+
+	} );
 
 	// physical lights
 
@@ -1495,7 +1510,7 @@ function WebGLRenderer( parameters = {} ) {
 
 		const fog = scene.fog;
 		const environment = material.isMeshStandardMaterial ? scene.environment : null;
-		const encoding = ( _currentRenderTarget === null ) ? _this.outputEncoding : ( _currentRenderTarget.isXRRenderTarget === true ? _currentRenderTarget.texture.encoding : LinearEncoding );
+		const encoding = ( _currentRenderTarget === null ) ? _outputEncoding : ( _currentRenderTarget.isXRRenderTarget === true ? _currentRenderTarget.texture.encoding : LinearEncoding );
 		const envMap = ( material.isMeshStandardMaterial ? cubeuvmaps : cubemaps ).get( material.envMap || environment );
 		const vertexAlphas = material.vertexColors === true && !! geometry.attributes.color && geometry.attributes.color.itemSize === 4;
 		const vertexTangents = !! material.normalMap && !! geometry.attributes.tangent;
diff --git a/src/renderers/webgl/WebGLBackground.js b/src/renderers/webgl/WebGLBackground.js
index 673b6900211ba5..7c0fc7b4b9e1e7 100644
--- a/src/renderers/webgl/WebGLBackground.js
+++ b/src/renderers/webgl/WebGLBackground.js
@@ -1,4 +1,4 @@
-import { BackSide, FrontSide, CubeUVReflectionMapping } from '../../constants.js';
+import { BackSide, FrontSide, CubeUVReflectionMapping, LinearEncoding, sRGBEncoding, LinearSRGBColorSpace, SRGBColorSpace } from '../../constants.js';
 import { BoxGeometry } from '../../geometries/BoxGeometry.js';
 import { PlaneGeometry } from '../../geometries/PlaneGeometry.js';
 import { ShaderMaterial } from '../../materials/ShaderMaterial.js';
@@ -7,6 +7,8 @@ import { Mesh } from '../../objects/Mesh.js';
 import { ShaderLib } from '../shaders/ShaderLib.js';
 import { cloneUniforms } from '../shaders/UniformsUtils.js';
 
+const _rgb = { r: 0, b: 0, g: 0 };
+
 function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha, premultipliedAlpha ) {
 
 	const clearColor = new Color( 0x000000 );
@@ -191,7 +193,13 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha,
 
 	function setClear( color, alpha ) {
 
-		state.buffers.color.setClear( color.r, color.g, color.b, alpha, premultipliedAlpha );
+		const outputColorSpace = renderer.outputEncoding === sRGBEncoding
+			? SRGBColorSpace
+			: LinearSRGBColorSpace;
+
+		color.getRGB( _rgb, outputColorSpace );
+
+		state.buffers.color.setClear( _rgb.r, _rgb.g, _rgb.b, alpha, premultipliedAlpha );
 
 	}