diff --git a/frontend/src/Settings/Subtitles/options.ts b/frontend/src/Settings/Subtitles/options.ts
index e24e59e85..5d04b3c43 100644
--- a/frontend/src/Settings/Subtitles/options.ts
+++ b/frontend/src/Settings/Subtitles/options.ts
@@ -35,7 +35,7 @@ export const colorOptions: SelectorOption<string>[] = [
   },
   {
     label: "Light Gray",
-    value: buildColor("lightgray"),
+    value: buildColor("light-gray"),
   },
   {
     label: "Red",
@@ -67,30 +67,30 @@ export const colorOptions: SelectorOption<string>[] = [
   },
   {
     label: "Dark Red",
-    value: buildColor("darkred"),
+    value: buildColor("dark-red"),
   },
   {
     label: "Dark Green",
-    value: buildColor("darkgreen"),
+    value: buildColor("dark-green"),
   },
   {
     label: "Dark Yellow",
-    value: buildColor("darkyellow"),
+    value: buildColor("dark-yellow"),
   },
   {
     label: "Dark Blue",
-    value: buildColor("darkblue"),
+    value: buildColor("dark-blue"),
   },
   {
     label: "Dark Magenta",
-    value: buildColor("darkmagenta"),
+    value: buildColor("dark-magenta"),
   },
   {
     label: "Dark Cyan",
-    value: buildColor("darkcyan"),
+    value: buildColor("dark-cyan"),
   },
   {
     label: "Dark Grey",
-    value: buildColor("darkgrey"),
+    value: buildColor("dark-grey"),
   },
 ];
diff --git a/frontend/src/components/modals/toolOptions.ts b/frontend/src/components/modals/toolOptions.ts
index 9a30b9ca6..27bfcbb07 100644
--- a/frontend/src/components/modals/toolOptions.ts
+++ b/frontend/src/components/modals/toolOptions.ts
@@ -114,7 +114,7 @@ export const colorOptions: SelectorOption<string>[] = [
   },
   {
     label: "Light Gray",
-    value: "lightgray",
+    value: "light-gray",
   },
   {
     label: "Red",
@@ -146,30 +146,30 @@ export const colorOptions: SelectorOption<string>[] = [
   },
   {
     label: "Dark Red",
-    value: "darkred",
+    value: "dark-red",
   },
   {
     label: "Dark Green",
-    value: "darkgreen",
+    value: "dark-green",
   },
   {
     label: "Dark Yellow",
-    value: "darkyellow",
+    value: "dark-yellow",
   },
   {
     label: "Dark Blue",
-    value: "darkblue",
+    value: "dark-blue",
   },
   {
     label: "Dark Magenta",
-    value: "darkmagenta",
+    value: "dark-magenta",
   },
   {
     label: "Dark Cyan",
-    value: "darkcyan",
+    value: "dark-cyan",
   },
   {
     label: "Dark Grey",
-    value: "darkgrey",
+    value: "dark-grey",
   },
 ];