diff --git a/packages/web-components/fast-components-msft/docs/api-report.md b/packages/web-components/fast-components-msft/docs/api-report.md
index ffa11e37192..f60f7ac3175 100644
--- a/packages/web-components/fast-components-msft/docs/api-report.md
+++ b/packages/web-components/fast-components-msft/docs/api-report.md
@@ -12,6 +12,7 @@ import { BaseProgress } from '@microsoft/fast-foundation';
 import { Button } from '@microsoft/fast-foundation';
 import { Card } from '@microsoft/fast-foundation';
 import { Checkbox } from '@microsoft/fast-foundation';
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { DensityOffset } from '@microsoft/fast-components-styles-msft';
 import { DesignSystem } from '@microsoft/fast-components-styles-msft';
 import { DesignSystemProvider } from '@microsoft/fast-foundation';
@@ -486,6 +487,9 @@ export const neutralOutlineRestBehavior: import("@microsoft/fast-foundation").CS
 // @internal (undocumented)
 export const OutlineButtonStyles: import("@microsoft/fast-element").ElementStyles;
 
+// @public
+export function parseColorString(color: string): ColorRGBA64;
+
 // Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
diff --git a/packages/web-components/fast-components-msft/package.json b/packages/web-components/fast-components-msft/package.json
index a5e6c023edd..a8858076b1c 100644
--- a/packages/web-components/fast-components-msft/package.json
+++ b/packages/web-components/fast-components-msft/package.json
@@ -89,6 +89,7 @@
     "webpack": "^4.43.0"
   },
   "dependencies": {
+    "@microsoft/fast-colors": "^5.0.10",
     "@microsoft/fast-components-styles-msft": "^4.28.13",
     "@microsoft/fast-element": "^0.12.0",
     "@microsoft/fast-foundation": "^1.2.1",
diff --git a/packages/web-components/fast-components-msft/src/color.ts b/packages/web-components/fast-components-msft/src/color.ts
new file mode 100644
index 00000000000..c0d6a39547b
--- /dev/null
+++ b/packages/web-components/fast-components-msft/src/color.ts
@@ -0,0 +1,31 @@
+import { ColorRGBA64, parseColorHexRGB, parseColorWebRGB } from "@microsoft/fast-colors";
+
+const cache = new Map();
+/**
+ * Converts a color string into a ColorRGBA64 instance.
+ * Supports #RRGGBB and rgb(r, g, b) formats
+ *
+ * @public
+ */
+export function parseColorString(color: string): ColorRGBA64 {
+    const cached: ColorRGBA64 | void = cache.get(color);
+
+    if (!cached) {
+        let parsed: ColorRGBA64 | null = parseColorHexRGB(color);
+
+        if (parsed === null) {
+            parsed = parseColorWebRGB(color);
+        }
+
+        if (parsed === null) {
+            throw new Error(
+                `${color} cannot be converted to a ColorRGBA64. Color strings must be one of the following formats: "#RGB", "#RRGGBB", or "rgb(r, g, b)"`
+            );
+        }
+
+        cache.set(color, parsed);
+        return parsed;
+    }
+
+    return cached;
+}
diff --git a/packages/web-components/fast-components-msft/src/index.ts b/packages/web-components/fast-components-msft/src/index.ts
index 90c66f8d4a5..e3a09319c48 100644
--- a/packages/web-components/fast-components-msft/src/index.ts
+++ b/packages/web-components/fast-components-msft/src/index.ts
@@ -20,3 +20,4 @@ export * from "./text-field/";
 
 // export styles and utils
 export * from "./styles";
+export { parseColorString } from "./color";
diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md
index 23218565aae..033d8666035 100644
--- a/packages/web-components/fast-components/docs/api-report.md
+++ b/packages/web-components/fast-components/docs/api-report.md
@@ -12,6 +12,7 @@ import { BaseProgress } from '@microsoft/fast-foundation';
 import { Button } from '@microsoft/fast-foundation';
 import { Card } from '@microsoft/fast-foundation';
 import { Checkbox } from '@microsoft/fast-foundation';
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { DesignSystemProvider } from '@microsoft/fast-foundation';
 import { Dialog } from '@microsoft/fast-foundation';
 import { Divider } from '@microsoft/fast-foundation';
@@ -910,6 +911,9 @@ export enum PaletteType {
     neutral = "neutral"
 }
 
+// @public
+export const parseColorString: (color: string) => ColorRGBA64;
+
 // @public
 export enum StandardLuminance {
     // (undocumented)
diff --git a/packages/web-components/fast-components/src/color/common.ts b/packages/web-components/fast-components/src/color/common.ts
index a077b5ad8c0..0de35221549 100644
--- a/packages/web-components/fast-components/src/color/common.ts
+++ b/packages/web-components/fast-components/src/color/common.ts
@@ -158,7 +158,7 @@ export function swatchFamilyToSwatchRecipeFactory<T extends SwatchFamily>(
  * Converts a color string into a ColorRGBA64 instance.
  * Supports #RRGGBB and rgb(r, g, b) formats
  *
- * @internal
+ * @public
  */
 export const parseColorString: (color: string) => ColorRGBA64 = memoize(
     (color: string): ColorRGBA64 => {
diff --git a/packages/web-components/fast-components/src/color/index.ts b/packages/web-components/fast-components/src/color/index.ts
index bb30e148c32..96044b971c3 100644
--- a/packages/web-components/fast-components/src/color/index.ts
+++ b/packages/web-components/fast-components/src/color/index.ts
@@ -117,3 +117,4 @@ export { neutralFocus, neutralFocusInnerAccent } from "./neutral-focus";
  */
 export { isDarkMode, palette, PaletteType, Palette } from "./palette";
 export { createColorPalette } from "./create-color-palette";
+export { parseColorString } from "./common";
diff --git a/yarn.lock b/yarn.lock
index 142d2143adf..fc24e1082a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5614,7 +5614,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.3.0", "@types/react@^16.4.18", "@types/react@^16.7.17", "@types/react@^16.8.0", "@types/react@^16.8.19", "@types/react@^16.9.17":
+"@types/react@*", "@types/react@^16.3.0", "@types/react@^16.4.18", "@types/react@^16.7.17", "@types/react@^16.8.0", "@types/react@^16.8.19":
   version "16.9.11"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
   integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
@@ -5622,6 +5622,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.9.17":
+  version "16.9.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.38.tgz#868405dace93a4095d3e054f4c4a1de7a1ac0680"
+  integrity sha512-pHAeZbjjNRa/hxyNuLrvbxhhnKyKNiLC6I5fRF2Zr/t/S6zS41MiyzH4+c+1I9vVfvuRt1VS2Lodjr4ZWnxrdA==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"