<h1>If color management is correct, the sphere should be invisible and the color should match CSS #4285f4</h1>
body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  text-align: center;
}
import {
  AxesHelper,
  Color,
  LinearEncoding,
  MeshBasicMaterial,
  Mesh,
  PerspectiveCamera,
  sRGBEncoding,
  SphereGeometry,
  NoToneMapping,
  ACESFilmicToneMapping,
  LinearToneMapping,
  Scene,
  WebGLRenderer,
} from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";
import { OrbitControls } from "https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/OrbitControls.js";

import { EffectComposer } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/postprocessing/ShaderPass.js';

import { GammaCorrectionShader } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/shaders/GammaCorrectionShader.js';

init();

function init() {
    const renderer = new WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
  
    document.body.appendChild( renderer.domElement );
  
    const scene = new Scene();
    scene.background = new Color(0x4285f4)

    const camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    new OrbitControls(camera, renderer.domElement);
    
    scene.add( new AxesHelper( 20 ) );

    var geometry = new SphereGeometry( 5, 12, 8 );

    const material = new MeshBasicMaterial( {
        color: 0x4285f4, 
    } );
    
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);
  
    setupColorCorrection(material, renderer, scene);
    const composer = setupPost(camera, renderer,scene);
  
    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
      // composer.render();
    });
}

function setupColorCorrection(material,renderer,scene) {
  // note: textures/fog settings omitted here

  // always required
  material.color.convertSRGBToLinear()
  
  // SETTINGS FOR STANDARD RENDER
  
  // renderer output encoding will be ignored when 
  // using EffectComposer
  // so you might as well always set it
  renderer.outputEncoding = sRGBEncoding;

  // scene.background does not need to be converted to linear space for non-post render

  // SETTINGS FOR EffectComposer
  // scene.background.convertSRGBToLinear();
  
  // when matching CSS colors, you must use either no tonemapping or linear 
  // tone mapping with exposure = 1.0
  renderer.toneMapping = NoToneMapping;
  // renderer.toneMapping = LinearToneMapping; // default
  
  // Other tone mapping operators are applied to materials
  // but not scene background colors 
  // renderer.toneMapping = ACESFilmicToneMapping;

}

function setupPost(camera, renderer,scene) {
  const renderScene = new RenderPass(scene, camera);
  const gammaCorrection = new ShaderPass( GammaCorrectionShader );
  const composer = new EffectComposer(renderer);
  composer.addPass(renderScene);
  composer.addPass(gammaCorrection);
  return composer
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.