diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 84796b9f..e70103e8 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './../styles/HomepageFeatures.scss';
 import Button from '../components/Button';
+import getColor from '../utils/ui-helpers';
 
 import IconAuth from '../../static/icons/features_authentication.svg';
 import IconCloudSync from '../../static/icons/features_cloud-sync.svg';
@@ -176,17 +177,6 @@ const FeatureList = [
   },
 ];
 
-const getColor = (index) => {
-  const remainder = index % 4;
-  switch (remainder) {
-    case 0: return 'pink';
-    case 1: return 'blue';
-    case 2: return 'green';
-    case 3: return 'yellow';
-    default: return 'white';
-  }
-};
-
 function Feature({ title, description, icon, demo, index }) {
   const side = index % 2 == 0 ? 'left' : 'right';
   const color = getColor(index)
diff --git a/src/utils/ui-helpers.ts b/src/utils/ui-helpers.ts
new file mode 100644
index 00000000..cca11ddf
--- /dev/null
+++ b/src/utils/ui-helpers.ts
@@ -0,0 +1,18 @@
+
+/**
+ * Returns a color class name for elements relative to their position
+ * @param index The position of a given element
+ * @returns A color, relational to position
+ */
+const getColor = (index: number): string => {
+  const remainder = index % 4;
+  switch (remainder) {
+    case 0: return 'pink';
+    case 1: return 'blue';
+    case 2: return 'green';
+    case 3: return 'yellow';
+    default: return 'white';
+  }
+};
+
+export default getColor;
\ No newline at end of file