title: Making HSL pallet with selectable gradient problem
body: <p>I am trying to make a color pallet in which the user can click on the gradient and it will show you the RGB and HSL values so far I have printed out all the Hue values and now what I want to do is make the appropriate display of Saturation and Luminesance/lightness values as can be seen here <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool</a></p>
  <p>I have tried to use a double nested loop as a generator such as:</p>
  <pre><code>function * hslGen(hue){  
      for(let s = 0; s &lt; 100; s++){
          for(let l = 100; l &gt; 0; l--){
              yield `hsl(${hue}, ${s}%, ${l}%)`;}
      }
  }
  </code></pre>
  <p>But the result looks the following <a href="https://codepen.io/superpauly/pen/XWMQboe?editors=1010" rel="nofollow noreferrer">https://codepen.io/superpauly/pen/XWMQboe?editors=1010</a> which confivuration should I have the loops to display a collor pallet like shown in the example above?</p>
  <p>So I have got the generator and the rest of the code is as follow:</p>
  <pre><code>const canvasContext = canvRef.current.getContext(&quot;2d&quot;);
      for (let hue = 0; hue &lt; 360; hue++) {
          // Generates Hue Spectrum
          canvasContext.fillStyle = &quot;hsl(&quot; + hue + &quot;, 100%, 50%)&quot;;
          canvasContext.fillRect(5 * hue, 0, 5, 75);
      }
      
      canvRef.current.addEventListener(&quot;click&quot;, (e) =&gt; {
          data = canvasContext.getImageData(e.layerX, e.layerY, 1, 1).data;
          color.rgb = `rgb( ${data[0]}, ${data[1]}, ${data[2]})`;
          color.h = rgbToHue(data);
          color.hsl = `hsl( ${color.h}, 100%, 50%)`;
  
          let pixel = 0;
          for (let m of hslGen(color.h)){
              canvasContext.fillStyle = m; //HSL Generator string
              canvasContext.fillRect(pixel+=1, 75, 1440, 500); // Here is where I try to make the gradient bu it fails.
          }
  </code></pre>
  <p>Thank you.</p>