diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3a0a1f2534..fcb0dad89b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.0.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "@types/minimatch": "^5.1.2",
+        "@types/seedrandom": "^3.0.5",
         "core-js": "^3.6.5",
         "highlight.js": "^10.5.0",
         "jszip": "^3.5.0",
@@ -2490,6 +2491,11 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "dev": true
     },
+    "node_modules/@types/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-kopEpYpFQvQdYsZkZVwht/0THHmTFFYXDaqV/lM45eweJ8kcGVDgZHs0RVTolSq55UPZNmjhKc9r7UvLu/mQQg=="
+    },
     "node_modules/@types/semver": {
       "version": "7.3.13",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
@@ -18515,6 +18521,11 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "dev": true
     },
+    "@types/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-kopEpYpFQvQdYsZkZVwht/0THHmTFFYXDaqV/lM45eweJ8kcGVDgZHs0RVTolSq55UPZNmjhKc9r7UvLu/mQQg=="
+    },
     "@types/semver": {
       "version": "7.3.13",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1df6d24e2d..0ac8b545c5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@types/minimatch": "^5.1.2",
+    "@types/seedrandom": "^3.0.5",
     "core-js": "^3.6.5",
     "highlight.js": "^10.5.0",
     "jszip": "^3.5.0",
diff --git a/frontend/src/utils/random-color-generator.js b/frontend/src/utils/random-color-generator.ts
similarity index 91%
rename from frontend/src/utils/random-color-generator.js
rename to frontend/src/utils/random-color-generator.ts
index 82bdc9fac3..1a6b86656b 100644
--- a/frontend/src/utils/random-color-generator.js
+++ b/frontend/src/utils/random-color-generator.ts
@@ -8,7 +8,7 @@ function getRandomHex() {
   return `#${Math.round(randomGenerator() * maxHexColorValue + 1).toString(16).padStart(6, '0')}`;
 }
 
-function rgb2lab(rgb) {
+function rgb2lab(rgb: number[]) {
   let r = rgb[0] / 255;
   let g = rgb[1] / 255;
   let b = rgb[2] / 255;
@@ -29,7 +29,7 @@ function rgb2lab(rgb) {
 
 // this delta E (perceptual color distance) implementation taken from @antimatter15 from
 // github: https://github.com/antimatter15/rgb-lab
-function deltaE(rgbA, rgbB) {
+function deltaE(rgbA: number[], rgbB: number[]) {
   const labA = rgb2lab(rgbA);
   const labB = rgb2lab(rgbB);
   const deltaL = labA[0] - labB[0];
@@ -49,7 +49,7 @@ function deltaE(rgbA, rgbB) {
   return distance < 0 ? 0 : Math.sqrt(distance);
 }
 
-function hasSimilarExistingColors(existingColors, newHex) {
+function hasSimilarExistingColors(existingColors: string[], newHex: string) {
   const deltaEThreshold = 11;
   // the lower limit of delta E to be similar, more info at http://zschuessler.github.io/DeltaE/learn/
   return existingColors.some((existingHex) => {
@@ -59,7 +59,7 @@ function hasSimilarExistingColors(existingColors, newHex) {
   });
 }
 
-function getNonRepeatingColor(existingColors) {
+function getNonRepeatingColor(existingColors: string[]) {
   let generatedHex = getRandomHex();
   while (hasSimilarExistingColors(existingColors, generatedHex)) {
     generatedHex = getRandomHex();