How to use the babylonjs.Color4 function in babylonjs

const onSceneMount = async (e: SceneEventArgs) => {
    scene = e.scene
    engine = e.engine
    canvas = e.canvas

    scene.clearColor = new BABYLON.Color4(0, 0, 0, 2)

    // This creates and positions a free camera (non-mesh)
    const camera = new BABYLON.ArcRotateCamera(
      "camera1",
      -Math.PI / 2,
      Math.PI / 2,
      3000,
      new BABYLON.Vector3(0, 0, 0),
      scene
    );

    camera.maxZ = 20000

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

constructor() {
    super();
    
    this.state = {
      plane: undefined,
      showModal: false,
      clickMeshName: undefined,
      allowedMeshes: [
        'red box',
        'blue box',
        'green box'
      ],
      sceneClearColor: new Color4(0.5, 0.5, 0.5, 0.5)
    }

    this.meshPicked = this.meshPicked.bind(this);
    this.setPlane = this.setPlane.bind(this);
    // TODO: fix that bind() is needed on assignment on button pointerDown handlers
  }

createBox() {
    const box = MeshBuilder.CreateBox(
      'box1',
      {
        size: 2,
        height: 0.2,
        faceColors: Color4(0.16, 0.36, 0.26, 1)
      },
      this._scene
    );
    const boxMaterial = new StandardMaterial('boxMaterial', this._scene);
    box.checkCollisions = true;
    // add Physics properties to this box
    box.physicsImpostor = new PhysicsImpostor(
      box,
      PhysicsImpostor.BoxImpostor,
      { mass: 0, restitution: 0 },
      this._scene
    );
    box.material = boxMaterial;
    box.material.alpha = 0;
    boxMaterial.diffuseColor = Platform.colors[0];
    this.addDroppingEffect(box);

private createScene() {
        this.scene = new Scene(this.engine);
        this.scene.clearColor = new Color4(0, 0, 0, 0);
    }

private createScene() {
        this.scene = new Scene(this.engine);
        this.scene.clearColor = new Color4(0, 0, 0, 0);
    }

this.setState((state) => ({
        ...state,
        showModal: false,
        plane: undefined,
        sceneClearColor: new Color4(0.5, 0.5, 0.5, 0.5)
      }));
    });

meshPicked(mesh) {
    if (this.state.allowedMeshes.indexOf(mesh.name) !== -1) {
      const clickedMeshName = mesh.name
      let clickedMeshColor;
      let sceneClearColor;
      switch(clickedMeshName) {
        case 'red box':
          clickedMeshColor = Color3.Red().toHexString()
          sceneClearColor = new Color4(1, 0, 0, 0.5)
          break;
        case 'blue box':
          clickedMeshColor = Color3.Blue().toHexString()
          sceneClearColor = new Color4(0, 0, 1, 0.5)
          break;
        case 'green box':
        default:
          clickedMeshColor = Color3.Green().toHexString()
          sceneClearColor = new Color4(0, 1, 0, 0.5)
          break;
      }

      this.setState((state) => ({
        ...state,
        showModal: true,
        clickedMeshName,
        clickedMeshColor,
        sceneClearColor
      }))
    } else {