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

const MIN_ANGLE_FOR_LABELS = 0.15;

const StyledLayout = glamorous(Layout)({
  overflow: 'hidden',
});

const margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 20,
};

const PI2 = 2 * Math.PI;
const emptyColor = Theme.lightGray;
const darkEmptyColor = d3color(emptyColor).darker();

const sortArcsByStartAngle = (a, b) => a.startAngle > b.startAngle ? -1 : 1;

const PieTopPath = ({
  color,
  path, // eslint-disable-line no-shadow
}) => (

import Visualizer from '../util/visualizer'
import { interpolateBasis, interpolateNumber } from 'd3-interpolate'
import ease from '../util/easing'
import { color } from 'd3-color'
import { randomNumber } from '../util/numbers'

const TWO_PI = Math.PI * 2
const THEME = [
  color('#FF8360'), // yellow
  color('#00FFF5'), // turqoise
  color('#D84797'), // red
  color('#292F36') // black
]

function getColor (index, alpha = 1) {
  const { r, g, b } = THEME[index]
  return `rgba(${r}, ${g}, ${b}, ${alpha})`
}

class Blob {
  constructor (interval, self, color) {
    const volume = self.sync.getVolumeQueue('blobs')
    this.self = self
    this.interval = interval
    this.birth = window.performance.now()
    this.lifespan = interval.duration
    this.color = color
    this.width = window.innerWidth/5 * volume

function isColor(value) {
  return value && color(value) != null;
}

.on("mouseover", function() {
				const hoveredElement = select(this);
				hoveredElement.classed("hovered", true);
				hoveredElement.transition(self.services.transitions.getTransition("graph_element_mouseover_fill_update"))
					.attr("fill", color(hoveredElement.attr("fill")).darker(0.7).toString());

				self.services.events.dispatchEvent("show-tooltip", {
					hoveredElement,
					type: TooltipTypes.DATAPOINT
				});
			})
			.on("mouseout", function() {

isColorRange() {
    const { range } = this.props;
    return color(range && range[0]) != null;
  }

      .attr('fill', () => d3Color(BASE_COLOR).darker(0.6).toString());
  });

draw() {
    const globalMinRectWidth = typeof this.options.minRectWidth !== 'undefined'
      ? this.options.minRectWidth
      : 10;

    const globalFill = typeof this.options.fill !== 'undefined'
      ? color(this.options.fill)
      : this.defaultColor;

    const globalFillOpacity = typeof this.options.fillOpacity !== 'undefined'
      ? +this.options.fillOpacity
      : 0.2;

    const globalStroke = typeof this.options.stroke !== 'undefined'
      ? color(this.options.stroke)
      : this.defaultColor;

    const globalStrokeWidth = typeof this.options.strokeWidth !== 'undefined'
      ? +this.options.strokeWidth
      : 1;

    const globalStrokeOpacity = typeof this.options.strokeOpacity !== 'undefined'
      ? +this.options.strokeOpacity

export function colorToHex(colorValue) {
    /**
     * Convert a regular color value (e.g. 'red', '#FF0000', 'rgb(255,0,0)') to a
     * hex value which is legible by PIXI
     */
    let c = color(colorValue);
    let hex = PIXI.utils.rgb2hex([c.r / 255., c.g / 255., c.b / 255.]);

    return hex
}

compCssGrad(color, def, id = 0) {
    const colorId = `${color.toString()}.${id}`;
    if (this.cssGrads[colorId]) return this.cssGrads[colorId];

    const _color = d3Color(color);
    const colors = [];
    Object.keys(def)
      .map(percent => +percent)
      .sort()
      .forEach((percent) => {
        _color.opacity = def[percent];
        colors.push(`${_color.toString()} ${percent * 100}%`);
      });

    this.cssGrads[colorId] = `linear-gradient(to right, ${colors.join(', ')})`;

    return this.cssGrads[colorId];
  }

const {scenarioPlotted} = this.state
    const noComparison =
      !comparisonProjectName && comparisonProjectName !== UNDEFINED_PROJECT_NAME

    const commaFormat = format(',d')

    const projectColor =
      disabled || stale
        ? colors.STALE_PERCENTILE_COLOR
        : colors.PROJECT_PERCENTILE_COLOR
    const comparisonColor =
      disabled || stale
        ? colors.STALE_PERCENTILE_COLOR
        : colors.COMPARISON_PERCENTILE_COLOR

    const colorBar = color(projectColor)
    colorBar.opacity = 0.3
    const comparisonColorBar = color(comparisonColor)
    comparisonColorBar.opacity = 0.3

    return (
      <>
        {!stale && (
          <p>
            {message('analysis.accessibilityTo')}{' '}
            <strong>
              {opportunityDatasetName ||
                `[${message('analysis.selectOpportunityDataset')}]`}
            </strong>{' '}
            in <strong>{isochroneCutoff}</strong> minutes (travel time
            percentile: <strong>{nearestPercentile}</strong>th)
          </p>