How to use the @storybook/addon-knobs.color function in @storybook/addon-knobs

const inputs = (service = 'news') => {
  const options = Object.keys(svgs).filter(key => key !== 'BBC_BLOCKS');
  const svgChoice = select('Service SVG', options, service).toLowerCase();
  const productInput = text('Product', 'BBC News');
  const serviceLocalisedNameInput = text('Localised service name', 'Yoruba');
  const svgRatio = svgs[svgChoice].ratio;
  const svgMaxHeight = 24;
  const svgMinHeight = 16;
  const minWidthInput = number('minimum svg width', svgRatio * svgMinHeight);
  const maxWidthInput = number('maximum svg width', svgRatio * svgMaxHeight);
  const svgHeightInput = number('desired height svg', svgMaxHeight);
  const borderBottom = boolean('Border Bottom', false);
  const borderTop = boolean('Border Top', false);
  const backgroundColour = color('Background colour', `${C_POSTBOX}`);
  const logoColour = color('Logo colour', `${C_WHITE}`);

  return {
    productInput,
    serviceLocalisedNameInput,
    svgChoice,
    svgHeightInput,
    minWidthInput,
    maxWidthInput,
    borderTop,
    borderBottom,
    backgroundColour,
    logoColour,
  };
};

.add('Proportional', () => {
        const containerWidth = number('Container Width', 500)
        const topWidth = number('Top Content Width', 1000)
        const bottomWidth = number('Bottom Content Width', 2000)
        const containerStyle = `height:100px;width:${containerWidth}px;`
        const leftColor = color('Left Color', '#ff0000')
        const centerColor = color('Center Color', '#00ff00')
        const rightColor = color('Right Color', '#0000ff')
        const bg = `linear-gradient(0.25turn, ${leftColor}, ${centerColor}, ${rightColor})`
        return ({
            components: { ScrollSync },
            template: `
            <div>
                
                    <div style="height:100px;width:${topWidth}px;background:${bg};">
                
                
                    <div style="height:100px;width:${bottomWidth}px;background:${bg};">
                
            </div>
        `})
        }</div></div>

.add('with title and subtitle', () => (
		<header color="{color('color',">
			<content>
				<title>{text('title', 'Rocket.Chat')}</title>
				{text('subtitle', 'Livechat')}
			</content>
		</header>
	))
	.add('with picture', () =&gt; (

visible: boolean('linePointVisible', true, 'line'),
          radius: range('linePointRadius', 0, 20, 1, 'line', 0.5),
          fill: color('linePointFill', 'white', 'line'),
          stroke: customizePointStroke ? color('customLinePointStroke', 'red', 'line') : undefined,
          strokeWidth: range('linePointStrokeWidth', 0, 20, 0.5, 'line'),
          opacity: range('linePointOpacity', 0, 1, 1, 'line', 0.01),
        },
      },
      areaSeriesStyle: {
        area: {
          fill: customizeAreaFill ? color('customAreaFill', 'red', 'area') : undefined,
          visible: boolean('aAreaVisible', true, 'area'),
          opacity: range('aAreaOpacity', 0, 1, 1, 'area'),
        },
        line: {
          stroke: customizeAreaLineStroke ? color('customAreaLineStroke', 'red', 'area') : undefined,
          strokeWidth: range('aStrokeWidth', 0, 10, 1, 'area'),
          visible: boolean('aLineVisible', true, 'area'),
        },
        point: {
          visible: boolean('aPointVisible', true, 'area'),
          fill: color('aPointFill', 'white', 'area'),
          radius: range('aPointRadius', 0, 20, 1, 'area'),
          stroke: color('aPointStroke', 'white', 'area'),
          strokeWidth: range('aPointStrokeWidth', 0, 20, 0.5, 'area'),
          opacity: range('aPointOpacity', 0, 1, 0.01, 'area'),
        },
      },
      barSeriesStyle: {
        rect: {
          fill: customizeRectFill ? color('recCustomFull', 'red', 'bar') : undefined,
          opacity: range('rectOpacity', 0, 1, 0.5, 'bar', 0.1),

export default () => ({
  components: { ChapterButton },
  props: {
    color: {
      default: color('color', '#000')
    },
    type: {
      default: select('type', types, 'next')
    }
  },
  template: `
    
    `,
  methods: { action: action('@click') }
})

export const story3 = () => {
  const name = text('Name', 'John Doe');
  const textColor = color('Text color', 'orangered');
  cachedContainer.textContent = name;
  cachedContainer.style.transition = 'color 0.5s ease-out';
  cachedContainer.style.color = textColor;
  return cachedContainer;
};
story3.story = { name: 'CSS transitions' };

storiesOf('UI', module).add('Switch', () => (

  border: 5px dashed ${() => color(name, defaultColor, 'colors')};
  padding: 10px;

lineStroke?: string,
  areaFill?: string,
) {
  return {
    ...generateLineSeriesStyleKnobs(
      groupName,
      tag,
      pointFill,
      pointStroke,
      pointStrokeWidth,
      pointRadius,
      lineStrokeWidth,
      lineStroke,
    ),
    area: {
      fill: areaFill ? color(`area.fill (${tag})`, areaFill, groupName) : undefined,
      visible: boolean(`area.visible (${tag})`, true, groupName),
      opacity: range(`area.opacity (${tag})`, 0, 1, 0.8, groupName, 0.01),
    },
  };
}

)}
        p={text('padding', '', 'Core')}
        paddingTop={text('paddingTop', '', 'Core')}
        paddingRight={text('paddingRight', '', 'Core')}
        paddingBottom={text('paddingBottom', '', 'Core')}
        paddingLeft={text('paddingLeft', '', 'Core')}
        px={text('paddingX', '', 'Core')}
        py={text('paddingY', '', 'Core')}
        m={text('margin', '', 'Core')}
        marginTop={text('marginTop', '', 'Core')}
        marginRight={text('marginRight', '', 'Core')}
        marginBottom={text('marginBottom', '', 'Core')}
        marginLeft={text('marginLeft', '', 'Core')}
        mx={text('marginX', '', 'Core')}
        my={text('marginY', '', 'Core')}
        bg={color('background', '', 'Core')}
        display={select(
          'display',
          {
            block: 'block',
            flex: 'flex',
            inline: 'inline',
            'inline-block': 'inline-block',
            grid: 'grid',
            none: 'none',
          },
          'block',
          'Layout',
        )}
        size={text('size', '', 'Layout')}
        width={text('width', '', 'Layout')}
        minWidth={text('minWidth', '', 'Layout')}