How to use the d3-color.hsl function in d3-color

cRGB = d3Color.rgb('steelblue');
cRGB = d3Color.rgb('rgba(20, 100, 200, 0.5)');
cRGB = d3Color.rgb(c);
cRGB = cRGB.brighter();
cRGB = cRGB.brighter(0.2);
cRGB = cRGB.darker();
cRGB = cRGB.darker(0.2);
cRGB = cRGB.rgb();
displayable = cRGB.displayable();
cString = cRGB.toString();
console.log('Channels = (r : %d, g: %d, b: %d)', cRGB.r, cRGB.g, cRGB.b);
console.log('Opacity = %d', cRGB.opacity);

cHSL = d3Color.hsl(60, 1, 0.2);
cHSL = d3Color.hsl(60, 1, 0.2, 0.5);
cHSL = d3Color.hsl('steelblue');
cHSL = d3Color.hsl('rgba(20, 100, 200, 0.5)');
cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);

// Signature tests for Lab

let cLab: d3Color.LabColor;

cRGB = d3Color.rgb(20, 100, 200, 0.5);
cRGB = d3Color.rgb('steelblue');
cRGB = d3Color.rgb('rgba(20, 100, 200, 0.5)');
cRGB = d3Color.rgb(c);
cRGB = cRGB.brighter();
cRGB = cRGB.brighter(0.2);
cRGB = cRGB.darker();
cRGB = cRGB.darker(0.2);
cRGB = cRGB.rgb();
displayable = cRGB.displayable();
cString = cRGB.toString();
console.log('Channels = (r : %d, g: %d, b: %d)', cRGB.r, cRGB.g, cRGB.b);
console.log('Opacity = %d', cRGB.opacity);

cHSL = d3Color.hsl(60, 1, 0.2);
cHSL = d3Color.hsl(60, 1, 0.2, 0.5);
cHSL = d3Color.hsl('steelblue');
cHSL = d3Color.hsl('rgba(20, 100, 200, 0.5)');
cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);

// Signature tests for Lab

let cLab: d3Color.LabColor;

opacity: 0.8;
      pointer-events: none;
    }
  }

  .negative-button {
    color: ${hsl(colors.negativeColor).darker(1)};
    @media (hover), (-moz-touch-enabled: 0) {
      &:hover,
      &:focus {
        background-color: ${colors.negativeBackgroundColorTransparent};
      }
    }

    &:active {
      background-color: ${hsl(colors.negativeBackgroundColorTransparent).darker(1)};
    }

    &[disabled] {
      opacity: 0.8;
      color: ${colors.neutralColor};
      pointer-events: none;
    }
  }

  &.toolbar-hidden {
    opacity: 0;
    pointer-events: none;
  }
`;

export default StyledToolbar;

const getBackgroundColor = node => {
    const parents = node.ancestors();
    const colorStr =
      parents.length === 1
        ? colorParentMap.get(parents[0])
        : colorParentMap.get(parents[parents.length - 2]);

    const hslColor = hsl(colorStr);
    hslColor.l = lightScale(node.depth);

    return hslColor;
  };

export const ArtifactCell = (props: Props): React.ReactElement => {
  const {
    cell: { text },
    color,
    disabled,
    isActive,
    onDisable,
    onEnable,
    onFocus,
    style
  } = props;
  const brighterColor = hsl(color);
  brighterColor.s = 0.2;
  brighterColor.l = 0.8;

  const handleValueChange = (toggled: boolean): void => {
    toggled ? onEnable(text) : onDisable(text);
  };

  const handlePress = React.useCallback(() => {
    onFocus(text);
  }, [onFocus, text]);

  return (

I2DChart.prototype.strokeColor = function (row: any[], column, value): string {
    return d3Hsl(this.fillColor(row, column, value)).darker().toString();
};

return function(start, end) {
    var h = hue((start = colorHsl(start)).h, (end = colorHsl(end)).h),
        s = color(start.s, end.s),
        l = color(start.l, end.l),
        opacity = color(start.opacity, end.opacity);
    return function(t) {
      start.h = h(t);
      start.s = s(t);
      start.l = l(t);
      start.opacity = opacity(t);
      return start + "";
    };
  }
}

protected createIcon(childCount: number, backColor: string, format: (_: any) => any) {
        const borderColor = d3Hsl(backColor);
        borderColor.opacity = 0.5;
        return new DivIcon({
            className: "cluster-circle",
            iconSize: new Point(40, 40),
            html: `<div style="opacity:${this.opacity()};background-color:${borderColor.toString()}"><div style="background-color:${backColor}"><span style="color:${Palette.textColor(backColor)}">${format(childCount)}</span></div></div>`
        });
    }

public static hsv(h: number, s: number, v: number): d3Color.HSLColor {
      const ll = (2.0 - s) * v;
      const ss = (s * v) / (ll <= 1 ? ll : 2.0 - ll);
      return d3Color.hsl(h, ss, ll / 2);
   }