diff --git a/client/js/components/nonprofit-branding.js b/client/js/components/nonprofit-branding.js
index c7f2c639..bd921207 100644
--- a/client/js/components/nonprofit-branding.js
+++ b/client/js/components/nonprofit-branding.js
@@ -1,16 +1,5 @@
 // License: LGPL-3.0-or-later
-const color = require('color')
+import nonprofitBranding from '../../../javascripts/src/lib/nonprofitBranding.ts';
 
-var brandColor = app.nonprofit.brand_color || '#5FB88D'
-
-module.exports = {
-  lightest: color(brandColor).lighten(0.8).hexString()
-, lighter: color(brandColor).lighten(0.7).hexString()
-, light: color(brandColor).lighten(0.5).hexString()
-, base: brandColor
-, dark: color(brandColor).darken(0.1).hexString()
-, darker: color(brandColor).darken(0.3).hexString()
-, grey: "#636363"
-, light_grey: "rgb(248, 248, 248)"
-}
+export default nonprofitBranding(app.nonprofit.brand_color)
 
diff --git a/client/js/recurring_donations/edit/custom-nonprofit-branding.es6 b/client/js/recurring_donations/edit/custom-nonprofit-branding.es6
index 1cab953c..aa2ad97e 100644
--- a/client/js/recurring_donations/edit/custom-nonprofit-branding.es6
+++ b/client/js/recurring_donations/edit/custom-nonprofit-branding.es6
@@ -1,16 +1,4 @@
 // License: LGPL-3.0-or-later
-const color = require('color')
+import nonprofitBranding from '../../../../javascripts/src/lib/nonprofitBranding.ts';
 
-module.exports = (brand_color = null) => {
-    let brandColor = brand_color || '#5FB88D'
-    return {
-        lightest: color(brandColor).lighten(0.8).hexString()
-        , lighter: color(brandColor).lighten(0.7).hexString()
-        , light: color(brandColor).lighten(0.5).hexString()
-        , base: brandColor
-        , dark: color(brandColor).darken(0.1).hexString()
-        , darker: color(brandColor).darken(0.3).hexString()
-        , grey: "#636363"
-        , light_grey: "rgb(248, 248, 248)"
-    }
-}
+export default nonprofitBranding
diff --git a/javascripts/src/lib/nonprofitBranding.ts b/javascripts/src/lib/nonprofitBranding.ts
new file mode 100644
index 00000000..b05f5d43
--- /dev/null
+++ b/javascripts/src/lib/nonprofitBranding.ts
@@ -0,0 +1,30 @@
+// License: LGPL-3.0-or-later
+import color = require('color')
+import { Color } from 'csstype';
+
+interface CustomBrandColors {
+  lightest: Color,
+  lighter: Color,
+  light: Color,
+  base: Color,
+  dark: Color,
+  darker: Color,
+  grey: Color,
+  light_grey: Color
+}
+
+export default (brandColor?: Color): CustomBrandColors => {
+  if (!brandColor) {
+    brandColor = '#5FB88D'
+  }
+  return {
+    lightest: color(brandColor).lighten(0.8).hex()
+    , lighter: color(brandColor).lighten(0.7).hex()
+    , light: color(brandColor).lighten(0.5).hex()
+    , base: brandColor
+    , dark: color(brandColor).darken(0.1).hex()
+    , darker: color(brandColor).darken(0.3).hex()
+    , grey: "#636363"
+    , light_grey: "rgb(248, 248, 248)"
+  }
+}
\ No newline at end of file