Webgl2: How to set different colours in one buffer in one drawArrays call

I am trying to render 100K to 1M rectangles using webg2 and javascript. For this, I am making one buffer and giving one drawArray call with one RGBA colour array only. I will attach my drawSHape Function snippet below.

// This function is used to draw any shape provided coordinates, colour and drawing mode.

const drawShape = (coords, color, drawingMode) => {
  let numberOfDies = 0;
  renderingdata = coords;
  numberOfDies = renderingdata.length / 12;
  console.log("DieWidth:", dieWidth, "DieHeight", dieHeight);
  console.log("Rendering Dies:", numberOfDies);

  // Step 3
  let data = new Float32Array(renderingdata);
  let buffer = utils.createAndBindBuffer(
    gl,
    gl.ARRAY_BUFFER,
    gl.STATIC_DRAW,
    data
  );

  // Step 4
  gl.useProgram(program);
  utils.linkGPUAndCPU(
    {
      program: program,
      buffer: buffer,
      dims: 2,
      gpuVariable: "position",
    },
    gl
  );

  let reticleColor = gl.getUniformLocation(program, "reticleColor");
  gl.uniform4fv(reticleColor, color);

  // Step 5
  gl.drawArrays(drawingMode, 0, renderingdata.length / 2);
};

The problem is that I cannot draw 100k to 1M rectangles in different colours. How am I supposed to set/provide different colours for rectangles/targets in the most optimized way?

For reference, I am attaching a screenshot. Rectangles in different colours