diff --git a/web/src/components/subnav/PageNavTab.svelte b/web/src/components/subnav/PageNavTab.svelte
index a7d112c2..d1e060c4 100644
--- a/web/src/components/subnav/PageNavTab.svelte
+++ b/web/src/components/subnav/PageNavTab.svelte
@@ -6,7 +6,7 @@
     export let path: string;
     export let title: string;
     export let icon: ConstructorOfATypedSvelteComponent;
-    export let iconColor: "gray" | "blue" | "green" = "gray";
+    export let iconColor: "gray" | "blue" | "green" | "magenta" | "purple" | "orange" = "gray";
 
     $: isActive = $page.url.pathname === path;
 </script>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 9497df0a..2e49ac88 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -113,6 +113,9 @@
         --dark-red: #d61c2e;
         --green: #30bd1b;
         --blue: #2f8af9;
+        --magenta: #eb445a;
+        --purple: #5857d4;
+        --orange: #f19a38;
 
         --focus-ring: 0 0 0 2px var(--blue) inset;