How to use the chroma-js.hsl function in chroma-js

// TODO: Remove this and its references and use chromaPallete directly
    shades: {
      // Shades of gray
      white: chromaPalette.Neutral0,
      gray95: chromaPalette.Neutral10,
      gray90: chromaPalette.Neutral20,
      gray85: chromaPalette.Neutral30,
      gray50: chromaPalette.Neutral50,
      gray20: chromaPalette.Neutral80,
      black: chromaPalette.Neutral90,
      transparent: chroma.hsl(0, 0, 0, 0),

      // Shades of blue
      lightBlue: chromaPalette.Azure80,
      blue40: chroma.hsl(205, 0.85, 0.4),
      blue50: chroma.hsl(216, 1, 0.5),
    },

    // Properties
    lineHeight: "2rem",
    borderRadius: `${multiply(0.4, baseUnit)}px`,
    defaultPadding: `${multiply(0.4, baseUnit)}px ${baseUnit}px`,
    defaultTextPadding: "1.4rem",
    defaultBorderWidth: "0.1",

    // input
    inputFocusOutline: "none",
    inputBgDefault: "hsl(0, 0%, 95%)",
    inputColor: "hsl(0, 0%, 5%)",
    inputPlaceholderColor: "hsl(0, 0%, 60%)",
    inputPlaceholderColorActive: "hsl(0, 0%, 80%)",

// TODO: Remove this and its references and use chromaPallete directly
    shades: {
      // Shades of gray
      white: chromaPalette.Neutral0,
      gray95: chromaPalette.Neutral10,
      gray90: chromaPalette.Neutral20,
      gray85: chromaPalette.Neutral30,
      gray50: chromaPalette.Neutral50,
      gray20: chromaPalette.Neutral80,
      black: chromaPalette.Neutral90,
      transparent: chroma.hsl(0, 0, 0, 0),

      // Shades of blue
      lightBlue: chromaPalette.Azure80,
      blue40: chroma.hsl(205, 0.85, 0.4),
      blue50: chroma.hsl(216, 1, 0.5),
    },

    // Properties
    lineHeight: "2rem",
    borderRadius: `${multiply(0.4, baseUnit)}px`,
    defaultPadding: `${multiply(0.4, baseUnit)}px ${baseUnit}px`,
    defaultTextPadding: "1.4rem",
    defaultBorderWidth: "0.1",

    // input
    inputFocusOutline: "none",
    inputBgDefault: "hsl(0, 0%, 95%)",
    inputColor: "hsl(0, 0%, 5%)",
    inputPlaceholderColor: "hsl(0, 0%, 60%)",
    inputPlaceholderColorActive: "hsl(0, 0%, 80%)",
    inputBgHover: "hsl(0, 0%, 90%)",

render () {
    const { h, s, l } = this.state
    const bg = chroma.hsl([ h, s, l ]).css()

    const colors = {
      bg
    }

    return (
      
        
          
          Theming
          
          <div>
            
              </div>

handleMouseMove(event) {
    this.setState({
      color: chroma.hsl(
        0,
        0,
        Math.min(Math.max(event.pageY / event.target.clientHeight, 0.2), 0.8)
      )
    });
  }

render() {
    return (
      <div style="{{">
        </div>

hues.forEach(h => {
    const c = chroma.hsl(h, sat, lte)
    const key = keyword(c)
    colors.push({
      key,
      value: createShades('' + c.hex())
    })
  })

export const col = (...args) => chroma.hsl([
  hues[args[0]],
  sats[args[1]],
  sats[args[2]]
]).hex()

export const hslToHex = hsl => isHsl(hsl) ? chroma.hsl(hsl).hex() : '#808080'

render() {
    const { hue, saturation, lightness, xAxis, yAxis, scroll } = this.state;

    return (
      <div> (this.container = ref)}
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: chroma.hsl(hue, saturation, lightness)
        }}
        onMouseMove={this.handleMouseMove}
        onClick={this.handleClick}
      &gt;
        <div style="{{">
          </div></div>

export const isHsl = hsl => {
  try {
    const color = chroma.hsl(hsl)
    return !!color
  } catch (e) {
    return false
  }
}