How to use the @microsoft/fast-colors.parseColor function in @microsoft/fast-colors

private getNeutralPallete(colorSource: string): string[] {
        const color: ColorRGBA64 = parseColor(colorSource);
        const hslColor: ColorHSL = rgbToHSL(color);
        const augmentedHSLColor: ColorHSL = ColorHSL.fromObject({
            h: hslColor.h,
            s: hslColor.s,
            l: 0.5,
        });
        return createColorPalette(hslToRGB(augmentedHSLColor));
    }

import React from "react";
import { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
import { ColorRGBA64, parseColor } from "@microsoft/fast-colors";
import {
    createColorPalette,
    DesignSystem,
    DesignSystemDefaults,
} from "@microsoft/fast-components-styles-msft";
import Explorer from "./explorer";
import { StandardLuminance } from "@microsoft/fast-components-styles-msft";

const accent: string = "#FB356D";
const accentPaletteSource: ColorRGBA64 | null = parseColor(accent);
let creatorDesignSystem: DesignSystem = DesignSystemDefaults;

if (accentPaletteSource !== null) {
    const palette: string[] = createColorPalette(accentPaletteSource);
    creatorDesignSystem = Object.assign({}, DesignSystemDefaults, {
        density: -2,
        accentBaseColor: accent,
        accentPalette: palette,
        baseLayerLuminance: StandardLuminance.DarkMode,
    });
}

class ExplorerRegion extends React.Component<{}, {}> {
    public render(): React.ReactNode {
        return (

const updates: Partial = { ...config };

        if (config.backgroundColor !== this.state.backgroundColor) {
            if (this.state.theme !== ThemeName.custom) {
                updates.theme = ThemeName.custom;
            }

            updates.designSystem = Object.assign({}, this.state.designSystem, {
                neutralPalette: this.getNeutralPallete(config.backgroundColor),
            });
            updates.designSystem.backgroundColor = config.backgroundColor;
        }

        if (config.accentColor !== this.state.accentColor) {
            updates.designSystem = Object.assign({}, this.state.designSystem, {
                accentPalette: createColorPalette(parseColor(config.accentColor)),
                accentBaseColor: config.accentColor,
            });
        }

        this.setState(updates as AppState);
    };

constructor(props: {}) {
        super(props);

        this.state = {
            accentColor: accent,
            designSystem: Object.assign({}, DesignSystemDefaults, {
                accentPalette: createColorPalette(parseColor(accent)),
                accentBaseColor: accent,
                neutralPalette: createColorPalette(parseColor("#808080")),
                direction: Direction.ltr,
            }),
            backgroundColor: DesignSystemDefaults.backgroundColor,
            theme: ThemeName.light,
        };
    }

private handleAccentBaseChange(
        e: React.ChangeEvent
    ): Partial {
        const value: string = e.target.value;
        const parsed: ColorRGBA64 | null = parseColor(value);

        return parsed !== null
            ? {
                  accentBaseColor: value,
                  accentPalette: createColorPalette(parsed),
              }
            : {};
    }
}

constructor(props: {}) {
        super(props);

        this.state = {
            accentColor: accent,
            designSystem: Object.assign({}, DesignSystemDefaults, {
                accentPalette: createColorPalette(parseColor(accent)),
                accentBaseColor: accent,
                neutralPalette: createColorPalette(parseColor("#808080")),
                direction: Direction.ltr,
            }),
            backgroundColor: DesignSystemDefaults.backgroundColor,
            theme: ThemeName.light,
        };
    }