BPP and createArrayBuffer changing colours

I have had this exact problem on imageclock while working with 4 bit. Copying over my solution from there yields the correct result, but it seems a bit complicated. It essentially uses a palette to force the colors to be correct. I suspect there is an easier way.

    let colormap={
      "#000":0,
      "#00f":1,
      "#0f0":2,
      "#0ff":3,
      "#f00":4,
      "#f0f":5,
      "#ff0":6,
      "#fff":7
    };

    let palette = new Uint16Array([
      0x0000, //black #000
      0x001f, //blue [#00f](http://forum.espruino.com/search/­?q=%2300f)
      0x07e0, //green [#0f0](http://forum.espruino.com/search/­?q=%230f0)
      0x07ff, //cyan [#0ff](http://forum.espruino.com/search/­?q=%230ff)
      0xf800, //red [#f00](http://forum.espruino.com/search/­?q=%23f00)
      0xf81f, //magenta [#f0f](http://forum.espruino.com/search/­?q=%23f0f)
      0xffe0, //yellow [#ff0](http://forum.espruino.com/search/­?q=%23ff0)
      0xffff, //white [#fff](http://forum.espruino.com/search/­?q=%23fff)
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
      0xffff, //white
    ]);

    let g2 = Graphics.createArrayBuffer(g.getWidth() * 2, g.getHeight(), 4, {msb:true});
    let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:4, buffer:g2.buffer, palette: palette };
    let R = Bangle.appRect;
    let x = R.w / 2;
    let y = R.y + R.h / 2;
    let animInterval;
    let animate = function(step) {
      if (animInterval) clearInterval(animInterval);
      slideX = -g2.getWidth()/2;
      animInterval = setInterval(function() {
        slideX += step;
        let stop = false;
        if (slideX>=0) {
          slideX=0;
          stop = true;
        }
        g.drawImage(g2img, slideX, 0);
        if (stop) {
          clearInterval(animInterval);
          animInterval=undefined;
        }
      }, 50);
    };
    g.reset().setBgColor("#0f0").clearRect(R­); // clear whole background
    g.setFontAlign(0, 0).setFont("Vector:30").drawString("WIBB­LE", g.getWidth()/2, g.getHeight()/2);
    let screengrab = g.asImage();
    // Draw to offscreen buffer
    g2.setColor(colormap["#f00"]).fillRect(0­,0,g2.getWidth(),g2.getHeight());
    g2.setColor(colormap["#fff"]).setFontAli­gn(0, 0).setFont("Vector:30").drawString("FLIB­BLE", g2.getWidth()/4, g2.getHeight()/2);
    g2.drawImage(screengrab, g2.getWidth()/2, 0);
    animate(3);

Edit: The forum search links in the comments are somehow autogenerated from the #colorvalues