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

cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);


// Signature tests for HCL

let cHcl: d3Color.HCLColor;

cHcl = d3Color.hcl(120, 40, 50);
cHcl = d3Color.hcl(120, 40, 50, 0.5);
cHcl = d3Color.hcl('steelblue');
cHcl = d3Color.hcl('rgba(20, 100, 200, 0.5)');
cHcl = d3Color.hcl(c);
cHcl = cHcl.brighter();
cHcl = cHcl.brighter(0.2);
cHcl = cHcl.darker();
cHcl = cHcl.darker(0.2);
cRGB = cHcl.rgb();
displayable = cHcl.displayable();
cString = cHcl.toString();
console.log('Channels = (h : %d, c: %d, l: %d)', cHcl.h, cHcl.c, cHcl.l);
console.log('Opacity = %d', cHcl.opacity);

// Signature tests for Cubehelix

let cCubehelix: d3Color.CubehelixColor;

cCubehelix = d3Color.cubehelix(20, 100, 200);
cCubehelix = d3Color.cubehelix(20, 100, 200, 0.5);

iString = d3Interpolate.interpolateRgb.gamma(2.2)('purple', 'orange');

// test interpolateRgbBasis(color) and  interpolateRgbBasisClosed(color) signatures -------------------------

iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Color.rgb('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasisClosed(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);

// test interpolateHsl(a, b) and interpolateHslLong(a, b)----------------------------------------------------------------

iString = d3Interpolate.interpolateHsl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

iString = d3Interpolate.interpolateHslLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

// test interpolateLab(a, b) --------------------------------------------------------------------------------------------

iString = d3Interpolate.interpolateLab('seagreen', 'steelblue');
iString = d3Interpolate.interpolateLab(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateLab(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

// test interpolateHcl(a, b) and interpolateHclLong(a, b) ----------------------------------------------------------------

iString = d3Interpolate.interpolateHcl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHcl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHcl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

iString = d3Interpolate.interpolateHclLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHclLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));

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

const colors = [...Array(count).keys()].map(index => {
    const hue = (index * delta + offset) % 360;
    return hcl(hue, chroma, lightness);
  });
  return colors;

const colors = [...Array(count).keys()].map(index => {
    const hue = (index * delta + offset) % 360;
    return hcl(hue, chroma, lightness);
  });
  return colors;

private getStyle() {
        if (this.view) {
            const {color: {h, c, l}, icon} = this.view.getTypeStyle(this.model.template.types);
            return {
                icon: icon ? icon : 'ontodia-default-icon',
                color: hcl(h, c, l).toString(),
            };
        } else {
            return {icon: 'ontodia-default-icon', color: 'green'};
        }
    }

public updateView() {
        if (this.$div) {
            const template = this.model.template;
            this.$div.text(this.view.getLocalizedText(template.label.values).text);
            this.$el.attr('title', 'Classes: ' + this.view.getElementTypeString(template));
            this.$el.attr('data-presentOnDiagram', this.model.get('presentOnDiagram'));

            const {h, c, l} = this.view.getTypeStyle(template.types).color;
            const frontColor = this.model.get('selectedInFilter')
                ? hcl(h, c, l * 1.2) : hcl('white');
            this.$el.css({ background: hcl(h, c, l) });
            this.$div.css({ background: frontColor });

            if (this.model.get('presentOnDiagram')) {
                this.$el.removeAttr('draggable');
            } else {
                this.$el.attr('draggable', 'true');
            }
        }
    }
}