if (!window.pickerCanvases) {

         window.pickerCanvases = {

           large: new RainbowCanvas(

             '/colorpick_rainbow_large.png', [400, 200]),

           small: new RainbowCanvas(

             '/colorpick_rainbow_small.png', [150, 30]),

         };

       }

       this.large = window.pickerCanvases.large;

       this.small = window.pickerCanvases.small;

       this.small.onLoad(function() {

         // color may have been set before our image came

         this._updateSmallCrosshair();

       }.bind(this));

       this.$.large.onCanvasMove = this.onCanvasMove.bind(this);

       this.$.large.hideLarge = this.hideLarge.bind(this);

       document.body.append(this.$.large);

       this.$.large.style.display = 'none';

     }

     disconnectedCallback() {

       super.disconnectedCallback();

       document.body.removeChild(this.$.large);

     }

     onValue(value) {

       let neverBlack = .1 + .9 * value / 255;

       this.$.smallRainbow.style.filter = `brightness(${neverBlack})`;

     }

     writeColor(hueSatColor, value) {

       if (hueSatColor === null || this.pauseWrites) { return; }

       this.color = one.color(hueSatColor).value(value / 255).hex();

     }

     readColor(color) {

       if (this.$.large.style.display == 'block') {

         // for performance, don't do color searches on covered widget

         return;

       }

       this.pauseWrites = true;

       var colorValue = one.color(color).value() * 255;

       // writing back to immediate-value doesn't work on paper-slider

       this.sliderWriteValue = colorValue;

       // don't update this if only the value changed, or we desaturate

       this.hueSatColor = one.color(color).value(1).hex();

       this._updateSmallCrosshair();

       this.pauseWrites = false;

     }