diff --git a/lib/browser-main.tsx b/lib/browser-main.tsx
index fc42110..f641925 100644
--- a/lib/browser-main.tsx
+++ b/lib/browser-main.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import { getBoundingBoxSize } from "./bounding-box";
+import { FILL_REPLACEMENT_COLOR, STROKE_REPLACEMENT_COLOR } from "./colors";
 
 import _SvgVocabulary from "./svg-vocabulary.json";
 import type { SvgSymbolData, SvgSymbolElement } from "./vocabulary";
@@ -11,9 +12,6 @@ const appEl = document.getElementById(APP_ID);
 
 const SvgVocabulary: SvgSymbolData[] = _SvgVocabulary as any;
 
-const STROKE_REPLACEMENT_COLOR = "#000000";
-const FILL_REPLACEMENT_COLOR = "#ffffff";
-
 if (!appEl) {
   throw new Error(`Unable to find #${APP_ID}!`);
 }
diff --git a/lib/colors.ts b/lib/colors.ts
new file mode 100644
index 0000000..568a1f1
--- /dev/null
+++ b/lib/colors.ts
@@ -0,0 +1,19 @@
+export const STROKE_REPLACEMENT_COLOR = "#000000";
+export const FILL_REPLACEMENT_COLOR = "#ffffff";
+
+export const TAIL_ATTACHMENT_COLOR = "#ff0000";
+export const LEGS_ATTACHMENT_COLOR = "#ffff00";
+export const ARMS_ATTACHMENT_COLOR = "#00ff00";
+export const HORNS_ATTACHMENT_COLOR = "#00ffff";
+export const CROWN_ATTACHMENT_COLOR = "#0000ff";
+
+export const NESTING_BOUNDING_BOX_COLOR = "#ff00ff";
+
+export const NON_VISUAL_COLORS = new Set([
+  TAIL_ATTACHMENT_COLOR,
+  LEGS_ATTACHMENT_COLOR,
+  ARMS_ATTACHMENT_COLOR,
+  HORNS_ATTACHMENT_COLOR,
+  CROWN_ATTACHMENT_COLOR,
+  NESTING_BOUNDING_BOX_COLOR,
+]);