Algorithmic Color Palette with chroma.js and Hue Shifting

I’m using chroma.js to generate color palettes for a specific hue and saturation value. i.e. it vaires lightness according to the number passed in the colors(10) chained function call and travels through the color space as specified by the mode() chained function call.

In my research, it’s important to hue shift colors as they approach different lightness levels.

Where my knowledge falls short is how to determine in which direction the hue should shift? Does it depend on the original hue, or is there some procedure to always add/subtract hue value as lightness goes up and likewise subtract/add as lightness goes down?

I’d like to add another parameter here hueShiftAmount or even startingHue and endingHue but I’m not sure what logical defaults might be for those.

  function generateColorPalette(hue: number, saturation: number) {
    const colors = chroma
      .scale([
        chroma.hsl(hue, saturation / 100, 0.9), // lighter
        chroma.hsl(hue, saturation / 100, 0.1), // darker
      ])
      // .padding([0.1, 0.1])
      .correctLightness()
      .mode(colorSpaceStore.value)
      .colors(10);

    return colors.map((hex) => {
      const hslColor = chroma(hex).hsl();

      // round
      hslColor[0] = Math.round(hslColor[0]);
      hslColor[1] = Math.round(hslColor[1] * 100);
      hslColor[2] = Math.round(hslColor[2] * 100);

      return {
        hex,
        hsl: hslColor,
      };
    });
  }

Here’s one idea that I had:

  function generateColorPalette(hue: number, saturation: number) {
    const HUE_SHIFT = 10; // example of hue shifting.
    const colors = chroma
      .scale([
        chroma.hsl(hue + HUE_SHIFT, saturation / 100, 0.9), // lighter
        chroma.hsl(hue - HUE_SHIFT, saturation / 100, 0.1), // darker
      ])
      // .padding([0.1, 0.1])
      .correctLightness()
      .mode(colorSpaceStore.value)
      .colors(10);

    return colors.map((hex) => {
      const hslColor = chroma(hex).hsl();

      // round
      hslColor[0] = Math.round(hslColor[0]);
      hslColor[1] = Math.round(hslColor[1] * 100);
      hslColor[2] = Math.round(hslColor[2] * 100);

      return {
        hex,
        hsl: hslColor,
      };
    });
  }

Any body with a strong background in color theory can advise me?

I have been enjoying this article about algorithmic color palette generation at stripe but not sure exactly how I should implement the hue shifting.