diff --git a/frontend/__tests__/utils/colors.spec.ts b/frontend/__tests__/utils/colors.spec.ts
new file mode 100644
index 000000000..1328711f8
--- /dev/null
+++ b/frontend/__tests__/utils/colors.spec.ts
@@ -0,0 +1,70 @@
+import { hexToRgb } from "../../src/ts/utils/colors";
+
+describe("colors.ts", () => {
+  describe("hexToRgb", () => {
+    it("Invalid hex values", () => {
+      expect(hexToRgb("ffff")).toEqual(undefined);
+      expect(hexToRgb("fff0000")).toEqual(undefined);
+      expect(hexToRgb("#ff")).toEqual(undefined);
+      expect(hexToRgb("ffffff")).toEqual(undefined);
+      expect(hexToRgb("fff")).toEqual(undefined);
+    });
+    it("Valid hex value", () => {
+      expect(hexToRgb("#ffffff")).toEqual({
+        r: 255,
+        g: 255,
+        b: 255,
+      });
+      expect(hexToRgb("#000000")).toEqual({
+        r: 0,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#fff")).toEqual({
+        r: 255,
+        g: 255,
+        b: 255,
+      });
+      expect(hexToRgb("#000")).toEqual({
+        r: 0,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#ff0000")).toEqual({
+        r: 255,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#00ff00")).toEqual({
+        r: 0,
+        g: 255,
+        b: 0,
+      });
+      expect(hexToRgb("#0000ff")).toEqual({
+        r: 0,
+        g: 0,
+        b: 255,
+      });
+      expect(hexToRgb("#f00")).toEqual({
+        r: 255,
+        g: 0,
+        b: 0,
+      });
+      expect(hexToRgb("#0f0")).toEqual({
+        r: 0,
+        g: 255,
+        b: 0,
+      });
+      expect(hexToRgb("#00f")).toEqual({
+        r: 0,
+        g: 0,
+        b: 255,
+      });
+      expect(hexToRgb("#123456")).toEqual({
+        r: 18,
+        g: 52,
+        b: 86,
+      });
+    });
+  });
+});
diff --git a/frontend/src/ts/utils/colors.ts b/frontend/src/ts/utils/colors.ts
index c8b055e9a..8c24118a3 100644
--- a/frontend/src/ts/utils/colors.ts
+++ b/frontend/src/ts/utils/colors.ts
@@ -44,27 +44,27 @@ export function blendTwoHexColors(
  * @param hex The hexadecimal color string (e.g., "#ff0000" or "#f00").
  * @returns An object with 'r', 'g', and 'b' properties representing the red, green, and blue components of the color, or undefined if the input is invalid.
  */
-function hexToRgb(hex: string):
+export function hexToRgb(hex: string):
   | {
       r: number;
       g: number;
       b: number;
     }
   | undefined {
-  if (hex.length !== 4 && hex.length !== 7 && !hex.startsWith("#")) {
+  if ((hex.length !== 4 && hex.length !== 7) || !hex.startsWith("#")) {
     return undefined;
   }
   let r: number;
   let g: number;
   let b: number;
   if (hex.length === 4) {
-    r = ("0x" + hex[1] + hex[1]) as unknown as number;
-    g = ("0x" + hex[2] + hex[2]) as unknown as number;
-    b = ("0x" + hex[3] + hex[3]) as unknown as number;
+    r = Number("0x" + hex[1] + hex[1]);
+    g = Number("0x" + hex[2] + hex[2]);
+    b = Number("0x" + hex[3] + hex[3]);
   } else if (hex.length === 7) {
-    r = ("0x" + hex[1] + hex[2]) as unknown as number;
-    g = ("0x" + hex[3] + hex[4]) as unknown as number;
-    b = ("0x" + hex[5] + hex[6]) as unknown as number;
+    r = Number("0x" + hex[1] + hex[2]);
+    g = Number("0x" + hex[3] + hex[4]);
+    b = Number("0x" + hex[5] + hex[6]);
   } else {
     return undefined;
   }