#smallCrosshair {

         background: url(/colorpick_crosshair_small.svg);

         /* this can't be too tall, or chrome will cull it in the 

            second column if its top goes above the top of the columns */

         width: 400px; 

         height: 60px;

     }

     #largeCrosshair {

         background: url(/colorpick_crosshair_large.svg);

         width: 1000px; 

         height: 1000px;

     }

     #smallRainbowComp {

         margin-right: 3px;

     }

     #largeRainbowComp {

         display: none;

         position: absolute;

         border: 4px solid #545454;

         box-shadow: 8px 11px 40px 0px rgba(0, 0, 0, 0.74);

         z-index: 10;

         left: -50px;

         top: -110px;

     }

    </style>

    <div id="smallRainbowComp">

      <div id="smallRainbow" on-mouseenter="onEnterSmall"></div>

      <div id="smallCrosshair"></div>

    </div>

    <span>V:</span>

    <paper-slider min="0"

                  max="255"

                  step="1"

                  value="{{sliderWriteValue}}"

                  immediate-value="{{value}}"></paper-slider>

    <div id="largeRainbowComp">

      <div id="largeRainbow"

           on-mousemove="onCanvasMove"

           on-mouseup="hideLarge"

           on-mouseleave="hideLarge"></div>

      <div id="largeCrosshair"></div>

    </div>

  </template>

  <script src="/lib/color/one-color.js"></script>

  <script>

   class RainbowCanvas {

       constructor(url, size, onReady) {

           this.size = size;