<div id="box"></div>

* {
  margin: 0;
  padding: 0;
}

#box {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
}

const box = document.querySelector("#box");

class Choid {
  constructor() {
    this.R = 0;
    this.G = 0;
    this.B = 0;
  }

  setup() {
    box.style.background = `rgb(${this.R},${this.G},${this.B})`;
  }
}

const params = new Choid();
const gui = new dat.GUI();
["R", "G", "B"].forEach((val) =>
  gui
    .add(params, val)
    .min(0)
    .max(255)
    .step(0.1)
    .onChange(() => {
      params.setup();
    })
);