Color.hsl doesn't function as expected

[sudomakecoffee]

When trying to set the initial background color for a CanvasSpace via Pts.quickstart, I created a Color variable using Color.hsl(268, 0.37, 0.51), which should be purple. However, the color is a vivid red. When logging the value of the color to console, it shows as hsl(127,84,176,1).

Am I misunderstanding how the hsl factory function works? The documentation seems pretty clear on the expected values, but the internal value does not match the expected.

[sudomakecoffee]

Code sample, modified from guide.op_closest_2:

(function() {
  // This should be purple
  let bgColor = Color.hsl(268, 0.37, 0.51);
  // Creating the same color as RGB works
  // let bgColor = Color.rgb(127, 84, 176);
  // It also works if you convert to rgb
  // let bgColor = Color.hsl(268, 0.37, 0.51).toMode('rgb', true);
  let strokeColor = Color.fromHex("FFFFFF");

  console.table(bgColor.toString(), strokeColor.toString());
  let run = Pts.quickStart( "#pt", bgColor );
  let pts;
  let count = parseInt(window.innerWidth * 0.2);

  run( (time, ftime)  => {
    if (!pts) pts = Create.distributeRandom( space.innerBound, count );

    let t = space.pointer;
    pts.sort( (a,b) => a.$subtract(t).magnitudeSq() - b.$subtract(t).magnitudeSq() );
    
    form.strokeOnly(strokeColor, 1);
    pts.forEach( (p, i) => form.point( p, 20 - 20*i/pts.length, "circle" ) )
  });

  //// ----  

  space.bindMouse().bindTouch().play();

[williamngan]

Hi @sudomakecoffee, sorry for the late response. I missed the Github notification.

Since the color is still in HSL mode, it will need to convert back to RGB when you want to use it for rendering. Eg:

let run = Pts.quickStart( "#pt", Color.HSLtoRGB(bgColor) );

The documentation probably needs some improvement to make this clear. I'll keep this issue open. Thanks for reporting!