How to use the polished.toColorString function in polished

export function findClosestAccessibleDarkerColor(
  inputColor: string,
  fixedColor: string,
  contrastRatio: number = AA_CONTRAST,
): string {
  const normalisedInput = toColorString(parseToRgb(inputColor));
  const normalisedFixed = toColorString(parseToRgb(fixedColor));
  const { hue, saturation, lightness } = parseToHsl(normalisedInput);
  let minLightness = 0.02;
  let maxLightness = lightness;
  let maxColor = hslToColorString({ hue, saturation, lightness: minLightness });
  let minColor = hslToColorString({ hue, saturation, lightness });

  // If already meets contrast, return passed value
  if (contrast(normalisedInput, normalisedFixed) >= contrastRatio) {
    return inputColor;
  }

  // If max lightness fails to meet contrast, throw error
  const actualRatio = contrast(maxColor, normalisedFixed);
  if (actualRatio < contrastRatio) {
    throw new Error(

export function findClosestAccessibleLighterColor(
  inputColor: string,
  fixedColor: string,
  contrastRatio: number = AA_CONTRAST,
): string {
  const normalisedInput = toColorString(parseToRgb(inputColor));
  const normalisedFixed = toColorString(parseToRgb(fixedColor));
  const { hue, saturation, lightness } = parseToHsl(normalisedInput);
  let minLightness = lightness;
  let maxLightness = 0.98;
  let maxColor = hslToColorString({ hue, saturation, lightness: maxLightness });
  let minColor = hslToColorString({ hue, saturation, lightness });

  // If already meets contrast, return passed value
  if (contrast(normalisedInput, normalisedFixed) >= contrastRatio) {
    return inputColor;
  }

  // If max lightness fails to meet contrast, throw error
  const actualRatio = contrast(maxColor, normalisedFixed);
  if (actualRatio < contrastRatio) {
    throw new Error(

const convertToRgbString = (color: string) => {
  return toColorString(parseToRgb(color));
};

secondary300: toColorString({
    hue,
    saturation: 225.0000000000002 / 360,
    lightness: 326.11764705882354 / 360,
  }),
  secondary400: toColorString({
    hue,
    saturation: 177.72151898734157 / 360,
    lightness: 304.2352941176471 / 360,
  }),
  secondary500: toColorString({
    hue,
    saturation: 152.2147651006712 / 360,
    lightness: 254.82352941176472 / 360,
  }),
  secondary600: toColorString({
    hue,
    saturation: 115.53488372093027 / 360,
    lightness: 208.23529411764704 / 360,
  }),
  secondary700: toColorString({
    hue,
    saturation: 134.1818181818182 / 360,
    lightness: 155.29411764705884 / 360,
  }),
  secondary800: toColorString({
    hue,
    saturation: 181.0650887573965 / 360,
    lightness: 119.29411764705883 / 360,
  }),
  secondary900: toColorString({
    hue,

secondary400: toColorString({
    hue,
    saturation: 177.72151898734157 / 360,
    lightness: 304.2352941176471 / 360,
  }),
  secondary500: toColorString({
    hue,
    saturation: 152.2147651006712 / 360,
    lightness: 254.82352941176472 / 360,
  }),
  secondary600: toColorString({
    hue,
    saturation: 115.53488372093027 / 360,
    lightness: 208.23529411764704 / 360,
  }),
  secondary700: toColorString({
    hue,
    saturation: 134.1818181818182 / 360,
    lightness: 155.29411764705884 / 360,
  }),
  secondary800: toColorString({
    hue,
    saturation: 181.0650887573965 / 360,
    lightness: 119.29411764705883 / 360,
  }),
  secondary900: toColorString({
    hue,
    saturation: 198.8059701492537 / 360,
    lightness: 94.58823529411765 / 360,
  }),
  secondary: toColorString({
    hue,

const secondaryPaletteGenerator = (hue: number) => ({
  secondary100: toColorString({
    hue,
    saturation: 280.0000000000002 / 360,
    lightness: 353.64705882352945 / 360,
  }),
  secondary200: toColorString({
    hue,
    saturation: 252.0000000000003 / 360,
    lightness: 345.88235294117646 / 360,
  }),
  secondary300: toColorString({
    hue,
    saturation: 225.0000000000002 / 360,
    lightness: 326.11764705882354 / 360,
  }),
  secondary400: toColorString({
    hue,

const secondaryPaletteGenerator = hue => ({
  secondary100: toColorString({
    hue,
    saturation: 280.0000000000002 / 360,
    lightness: 353.64705882352945 / 360,
  }),
  secondary200: toColorString({
    hue,
    saturation: 252.0000000000003 / 360,
    lightness: 345.88235294117646 / 360,
  }),
  secondary300: toColorString({
    hue,
    saturation: 225.0000000000002 / 360,
    lightness: 326.11764705882354 / 360,
  }),
  secondary400: toColorString({
    hue,

secondary200: toColorString({
    hue,
    saturation: 252.0000000000003 / 360,
    lightness: 345.88235294117646 / 360,
  }),
  secondary300: toColorString({
    hue,
    saturation: 225.0000000000002 / 360,
    lightness: 326.11764705882354 / 360,
  }),
  secondary400: toColorString({
    hue,
    saturation: 177.72151898734157 / 360,
    lightness: 304.2352941176471 / 360,
  }),
  secondary500: toColorString({
    hue,
    saturation: 152.2147651006712 / 360,
    lightness: 254.82352941176472 / 360,
  }),
  secondary600: toColorString({
    hue,
    saturation: 115.53488372093027 / 360,
    lightness: 208.23529411764704 / 360,
  }),
  secondary700: toColorString({
    hue,
    saturation: 134.1818181818182 / 360,
    lightness: 155.29411764705884 / 360,
  }),
  secondary800: toColorString({
    hue,

secondary600: toColorString({
    hue,
    saturation: 115.53488372093027 / 360,
    lightness: 208.23529411764704 / 360,
  }),
  secondary700: toColorString({
    hue,
    saturation: 134.1818181818182 / 360,
    lightness: 155.29411764705884 / 360,
  }),
  secondary800: toColorString({
    hue,
    saturation: 181.0650887573965 / 360,
    lightness: 119.29411764705883 / 360,
  }),
  secondary900: toColorString({
    hue,
    saturation: 198.8059701492537 / 360,
    lightness: 94.58823529411765 / 360,
  }),
  secondary: toColorString({
    hue,
    saturation: 152.2147651006712 / 360,
    lightness: 254.82352941176472 / 360,
  }),
});

function rgb2hsl(color: RgbColor) {
	const str = toColorString(color);
	return parseToHsl(str);
}