diff --git a/js/skinParser.js b/js/skinParser.js
index ef2f0d32..ceb666d3 100644
--- a/js/skinParser.js
+++ b/js/skinParser.js
@@ -1,7 +1,7 @@
 import SKIN_SPRITES from "./skinSprites";
 import regionParser from "./regionParser";
 import { LETTERS, DEFAULT_SKIN } from "./constants";
-import { parseViscolors, objectMap } from "./utils";
+import { parseViscolors } from "./utils";
 import * as SkinParserUtils from "./skinParserUtils";
 
 const shallowMerge = objs =>
@@ -138,76 +138,7 @@ async function genGenTextSprites(zip) {
   return [letterWidths, SkinParserUtils.getSpriteUrisFromImg(img, sprites)];
 }
 
-async function genGenExColors(zip) {
-  const img = await SkinParserUtils.getImgFromFilename(zip, "GENEX");
-  if (img == null) {
-    return null;
-  }
-
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  canvas.width = img.width;
-  canvas.height = img.height;
-  context.drawImage(img, 0, 0);
-
-  const getColorAt = x =>
-    `rgb(${context
-      .getImageData(x, 0, 1, 1)
-      // Discard the alpha channel
-      .data.slice(0, 3)
-      .join(",")})`;
-
-  const colors = {
-    // (1) x=48: item background (background to edits, listviews, etc.)
-    itemBackground: 48,
-    // (2) x=50: item foreground (text colour of edits, listviews, etc.)
-    itemForeground: 50,
-    // (3) x=52: window background (used to set the bg color for the dialog)
-    windowBackground: 52,
-    // (4) x=54: button text colour
-    buttonText: 54,
-    // (5) x=56: window text colour
-    windowText: 56,
-    // (6) x=58: colour of dividers and sunken borders
-    divider: 58,
-    // (7) x=60: selection colour for entries inside playlists (nothing else yet)
-    playlistSelection: 60,
-    // (8) x=62: listview header background colour
-    listHeaderBackground: 62,
-    // (9) x=64: listview header text colour
-    listHeaderText: 64,
-    // (10) x=66: listview header frame top and left colour
-    listHeaderFrameTopAndLeft: 66,
-    // (11) x=68: listview header frame bottom and right colour
-    listHeaderFrameBottomAndRight: 68,
-    // (12) x=70: listview header frame colour, when pressed
-    listHeaderFramePressed: 70,
-    // (13) x=72: listview header dead area colour
-    listHeaderDeadArea: 72,
-    // (14) x=74: scrollbar colour #1
-    scrollbarOne: 74,
-    // (15) x=76: scrollbar colour #2
-    scrollbarTwo: 76,
-    // (16) x=78: pressed scrollbar colour #1
-    pressedScrollbarOne: 78,
-    // (17) x=80: pressed scrollbar colour #2
-    pressedScrollbarTwo: 80,
-    // (18) x=82: scrollbar dead area colour
-    scrollbarDeadArea: 82,
-    // (19) x=84 List view text colour highlighted
-    listTextHighlighted: 84,
-    // (20) x=86 List view background colour highlighted
-    listTextHighlightedBackground: 86,
-    // (21) x=88 List view text colour selected
-    listTextSelected: 88,
-    // (22) x=90 List view background colour selected
-    listTextSelectedBackground: 90,
-  };
-
-  return objectMap(colors, getColorAt);
-}
-
-// A promise that, given an array buffer  returns a skin style object
+// A promise that, given an array buffer returns a skin style object
 async function skinParser(zipFileBuffer, JSZip) {
   const zip = await JSZip.loadAsync(zipFileBuffer);
 
@@ -226,7 +157,7 @@ async function skinParser(zipFileBuffer, JSZip) {
     genCursors(zip),
     genRegion(zip),
     genGenTextSprites(zip),
-    genGenExColors(zip),
+    SkinParserUtils.getGenExColors(zip),
   ]);
 
   const [genLetterWidths, genTextImages] = genTextSprites || [null, {}];
diff --git a/js/skinParserUtils.ts b/js/skinParserUtils.ts
index b1238759..83aaa02f 100644
--- a/js/skinParserUtils.ts
+++ b/js/skinParserUtils.ts
@@ -1,5 +1,5 @@
 import JSZip from "jszip";
-import { PlaylistStyle } from "./types";
+import { PlaylistStyle, SkinGenExColors } from "./types";
 import SKIN_SPRITES, { Sprite } from "./skinSprites";
 import { DEFAULT_SKIN } from "./constants";
 import * as Utils from "./utils";
@@ -156,3 +156,79 @@ export async function getPlaylistStyle(zip: JSZip): Promise<PlaylistStyle> {
 
   return { ...DEFAULT_SKIN.playlistStyle, ...data };
 }
+
+export async function getGenExColors(
+  zip: JSZip
+): Promise<null | SkinGenExColors> {
+  const img = await getImgFromFilename(zip, "GENEX");
+  if (img == null) {
+    return null;
+  }
+
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (context == null) {
+    return null;
+  }
+  canvas.width = img.width;
+  canvas.height = img.height;
+  context.drawImage(img, 0, 0);
+
+  const getColorAt = (x: number): string =>
+    `rgb(${context
+      .getImageData(x, 0, 1, 1)
+      // Discard the alpha channel
+      .data.slice(0, 3)
+      .join(",")})`;
+
+  // Ideally we would just have a map from key to the x value and map over
+  // that with getColorAt, but I don't know a great way to make that type
+  // safe. So, we'll just do this for now, where we explicitly call getColorAt
+  // for each key.
+  return {
+    // (1) x=48: item background (background to edits, listviews, etc.)
+    itemBackground: getColorAt(48),
+    // (2) x=50: item foreground (text colour of edits, listviews, etc.)
+    itemForeground: getColorAt(50),
+    // (3) x=52: window background (used to set the bg color for the dialog)
+    windowBackground: getColorAt(52),
+    // (4) x=54: button text colour
+    buttonText: getColorAt(54),
+    // (5) x=56: window text colour
+    windowText: getColorAt(56),
+    // (6) x=58: colour of dividers and sunken borders
+    divider: getColorAt(58),
+    // (7) x=60: selection colour for entries inside playlists (nothing else yet)
+    playlistSelection: getColorAt(60),
+    // (8) x=62: listview header background colour
+    listHeaderBackground: getColorAt(62),
+    // (9) x=64: listview header text colour
+    listHeaderText: getColorAt(64),
+    // (10) x=66: listview header frame top and left colour
+    listHeaderFrameTopAndLeft: getColorAt(66),
+    // (11) x=68: listview header frame bottom and right colour
+    listHeaderFrameBottomAndRight: getColorAt(68),
+    // (12) x=70: listview header frame colour, when pressed
+    listHeaderFramePressed: getColorAt(70),
+    // (13) x=72: listview header dead area colour
+    listHeaderDeadArea: getColorAt(72),
+    // (14) x=74: scrollbar colour #1
+    scrollbarOne: getColorAt(74),
+    // (15) x=76: scrollbar colour #2
+    scrollbarTwo: getColorAt(76),
+    // (16) x=78: pressed scrollbar colour #1
+    pressedScrollbarOne: getColorAt(78),
+    // (17) x=80: pressed scrollbar colour #2
+    pressedScrollbarTwo: getColorAt(80),
+    // (18) x=82: scrollbar dead area colour
+    scrollbarDeadArea: getColorAt(82),
+    // (19) x=84 List view text colour highlighted
+    listTextHighlighted: getColorAt(84),
+    // (20) x=86 List view background colour highlighted
+    listTextHighlightedBackground: getColorAt(86),
+    // (21) x=88 List view text colour selected
+    listTextSelected: getColorAt(88),
+    // (22) x=90 List view background colour selected
+    listTextSelectedBackground: getColorAt(90),
+  };
+}