How to use the color.hsl function in color

module.exports = function getThemes(passed) {
  var mainColorTone = passed ? color(passed) : color.hsl(210, 100, 100);

  var bgDark = mainColorTone.desaturate(0.5).darken(0.9).string();
  var bgLight = 'hsl(255, 0%, 100%)';
  var main = mainColorTone.darken(0.4).string();

  var common = {
    active: main,
    error: 'rgba(205, 63, 69, 1)', // Errors, alpha, deprecated
    warning: 'rgba(255, 189, 46, 1)', // Warnings, beta
    info: 'rgba(80, 179, 221, 1)', // Rc
    success: 'rgba(74, 165, 74, 1)', // Stable
    dark: 'rgba(15, 15, 15, 1)',
    light: 'rgba(220, 220, 220, 1)',
    fontWeight: '100',
    fontSize: '14px'
  };

const createPalette = (hueVal, satVal, lgtVal) => {
  const starter = Color.hsl(hueVal, satVal, lgtVal)
  const steps = 10
  const [hue, sat] = starter.hsl().array()

  const darkest = calcDarkest(hue, sat)
  const middle = calcMiddle(hue, sat)
  const lightest = calcLightest(hue, sat)

  console.log(darkest, middle)

  const darkestToMiddle = calcStepValues(darkest, middle, steps / 2)
  const middleToLightest = calcStepValues(middle, lightest, steps / 2)

  const hslArray = [...darkestToMiddle, ...middleToLightest]

  return uniq(
    hslArray.map(hsl =>

module.exports = function getThemes(passed) {
  const mainColorTone = passed ? color(passed) : color.hsl(210, 100, 100);
  const grayBaseTone = color.hsl(0, 0, 100);

  const colorGroups = {
    lightBlue: {
      300: mainColorTone.darken(0.3),
      600: mainColorTone.darken(0.4)
    },
    marine: {
      500: mainColorTone.desaturate(0.5).darken(0.5),
      700: mainColorTone.desaturate(0.5).darken(0.8),
      800: mainColorTone.desaturate(0.5).darken(0.85),
      900: mainColorTone.desaturate(0.5).darken(0.9)
    },
    gray: {
      50: grayBaseTone.darken(0.05),
      100: grayBaseTone.darken(0.15),
      400: grayBaseTone.darken(0.4),

handleMouseEvent(e, eventType) {
        const {saturation, lightness} = this.calculateVal(e);
        if (
            saturation === this.state.color.object().s &&
            lightness === this.state.color.object().l
        ) {
            return;
        }
        const newColor = Color.hsl(
            this.state.color.object().h,
            saturation,
            lightness,
        );
        this.setState({color: newColor});
        this.props.onColorChange(newColor, eventType);
    }

return range(steps).map(step =>
    Color.hsl(dark).lightness(darkLum + step * stepDiff)
  )

calcBackgroundColor() {
        return Color.hsl(this.state.color.object().h, 100, 50).string();
    }

handleMouseEvent(e, eventType) {
        const newHue = this.calculateVal(e);
        if (newHue === this.state.color.object().h) {
            return;
        }
        const newColor = Color.hsl(
            newHue,
            this.state.color.object().s,
            this.state.color.object().l,
        );
        this.setState({color: newColor});
        this.props.onColorChange(newColor, eventType);
    }

const calcDarkest = (hue, sat) => {
  const doesColorContrastWithWhite = color => {
    const contrastScore = color.contrast(Color("white"))
    return inRange(contrastScore, 16.13, 16.56)
  }

  const doesColorMergeWithBlack = color => {
    const contrastScore = color.contrast(Color("black"))
    return inRange(contrastScore, 1.27, 1.31)
  }

  const light = range(101).filter(light => {
    const C = Color.hsl(hue, sat, light)
    return doesColorMergeWithBlack(C) && doesColorContrastWithWhite(C)
  })
  return Color.hsl(hue, sat, light[0])
}