for (var y = 0; y < this.size.y; y += 1) {

      for (var x = 0; x < this.size.x; x += 1) {

        var base = (y * this.size.x + x) * 4;

        let px = [data[base + 0], data[base + 1], data[base + 2], 255];

        if (px[0] == 0 && px[1] == 0 && px[2] == 0) {

          // (there's no black on the rainbow images)

          throw new Error(`color picker canvas (${this.size.x}) returns 0,0,0`);

        }

        var c = color(px).hex();

        this.colorPos[c] = new RainbowCoord(x, y);

      }

    }

  }

  colorAt(pos: RainbowCoord) {

    var data = this.ctx.getImageData(pos.x, pos.y, 1, 1).data;

    return color([data[0], data[1], data[2], 255]).hex();

  }

  posFor(col: string): RainbowCoord {

    if (col == "#000000") {

      throw new Error("no match");

    }

    let bright = color(col).value(1).hex();

    let r = parseInt(bright.slice(1, 3), 16),

      g = parseInt(bright.slice(3, 5), 16),

      b = parseInt(bright.slice(5, 7), 16);

    // We may not have a match for this color exactly (e.g. on

    // the small image), so we have to search for a near one.

    // 0, 1, -1, 2, -2, ...

    let walk = function (x: number): number {

      return -x + (x > 0 ? 0 : 1);

    };

    var radius = 8;

    for (var dr = 0; dr < radius; dr = walk(dr)) {

      for (var dg = 0; dg < radius; dg = walk(dg)) {

        for (var db = 0; db < radius; db = walk(db)) {

          // Don't need bounds check- out of range

          // corrupt colors just won't match.

          const color2 = color([r + dr, g + dg, b + db, 255]);

          const pos = this.colorPos[color2.hex()];

          if (pos !== undefined) {

            return pos;

          }