diff --git a/index.html b/index.html
index 734bce55..d10e35b5 100644
--- a/index.html
+++ b/index.html
@@ -7674,7 +7674,6 @@
     <script src="libs/delaunator.min.js"></script>
 
     <script src="utils/commonUtils.js"></script>
-    <script src="utils/colorUtils.js"></script>
     <script src="utils/nodeUtils.js"></script>
     <script src="utils/numberUtils.js"></script>
     <script src="utils/polyfills.js"></script>
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index 04ca2648..69db110d 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -1,6 +1,7 @@
 import {TIME} from "/src/config/logging";
 import {findCell} from "/src/utils/graphUtils";
 import {layerIsOn} from "./ui/layers";
+import {getColors, getRandomColor, getMixedColor} from "/src/utils/colorUtils";
 
 window.BurgsAndStates = (function () {
   const generate = function () {
diff --git a/modules/cultures-generator.js b/modules/cultures-generator.js
index 8eff92a4..c281089d 100644
--- a/modules/cultures-generator.js
+++ b/modules/cultures-generator.js
@@ -1,4 +1,5 @@
 import {TIME} from "/src/config/logging";
+import {getColors} from "/src/utils/colorUtils";
 
 window.Cultures = (function () {
   let cells;
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 6a7c33f0..b6abd930 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -2,6 +2,7 @@ import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {byId} from "/src/utils/shorthands";
 import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {getRandomColor, getMixedColor} from "/src/utils/colorUtils";
 
 const $body = insertEditorHtml();
 addListeners();
diff --git a/modules/religions-generator.js b/modules/religions-generator.js
index 88bfa674..b682f38f 100644
--- a/modules/religions-generator.js
+++ b/modules/religions-generator.js
@@ -1,6 +1,7 @@
 import {TIME} from "/src/config/logging";
 import {findAll} from "/src/utils/graphUtils";
 import {unique} from "/src/utils/arrayUtils";
+import {getRandomColor, getMixedColor} from "/src/utils/colorUtils";
 
 window.Religions = (function () {
   // name generation approach and relative chance to be selected
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index 9eae1ddf..2e3f266b 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -1,6 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {getRandomColor} from "/src/utils/colorUtils";
 
 export function editBiomes() {
   if (customization) return;
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index efbd29d3..8815fe54 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -2,6 +2,7 @@ import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {unique} from "/src/utils/arrayUtils";
 import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {getRandomColor} from "/src/utils/colorUtils";
 
 export function editProvinces() {
   if (customization) return;
diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js
index d2535a46..82c4de16 100644
--- a/modules/ui/stylePresets.js
+++ b/modules/ui/stylePresets.js
@@ -24,7 +24,7 @@ const customPresetPrefix = "fmgStyle_";
   document.getElementById("stylePreset").innerHTML = options;
 }
 
-async function applyStyleOnLoad() {
+export async function applyStyleOnLoad() {
   const desiredPreset = localStorage.getItem("presetStyle") || "default";
   const styleData = await getStylePreset(desiredPreset);
   const [appliedPreset, style] = styleData;
diff --git a/src/main.ts b/src/main.ts
index e0228015..2a8f49e4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,27 +1,28 @@
 // Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2022. MIT License
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
+import {invokeActiveZooming} from "../modules/activeZooming";
+import {applyPreset, drawBorders, drawRivers, drawStates} from "../modules/ui/layers";
+import {applyMapSize, applyStoredOptions, randomizeOptions} from "../modules/ui/options";
+import {ERROR, INFO, TIME, WARN} from "./config/logging";
 import {UINT16_MAX} from "./constants";
-import {INFO, TIME, WARN, ERROR} from "./config/logging";
+import {clearLegend} from "./modules/legend";
+import {drawScaleBar, Ruler, Rulers} from "./modules/measurers";
+import {applyStyleOnLoad} from "../modules/ui/stylePresets";
+import {restoreDefaultEvents} from "./scripts/events";
+import {addGlobalListeners} from "./scripts/listeners";
+import {locked} from "./scripts/options/lock";
+import {clearMainTip, tip} from "./scripts/tooltips";
+import {createTypedArray} from "./utils/arrayUtils";
 import {
-  shouldRegenerateGrid,
-  generateGrid,
   calculateVoronoi,
+  findCell,
+  generateGrid,
   getPackPolygon,
   isLand,
-  findCell
+  shouldRegenerateGrid
 } from "./utils/graphUtils";
-import {createTypedArray} from "./utils/arrayUtils";
-import {applyPreset, drawRivers, drawStates, drawBorders} from "../modules/ui/layers";
-import {invokeActiveZooming} from "../modules/activeZooming";
-import {applyStoredOptions, applyMapSize, randomizeOptions} from "../modules/ui/options";
-import {locked} from "./scripts/options/lock";
-import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
 import {byId} from "./utils/shorthands";
-import {addGlobalListeners} from "./scripts/listeners";
-import {restoreDefaultEvents} from "./scripts/events";
-import {clearMainTip, tip} from "./scripts/tooltips";
-import {clearLegend} from "./modules/legend";
 import "./components";
 
 addGlobalListeners();
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 3c51dde4..6ceb3955 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -12,6 +12,7 @@ interface Window {
   };
   pack: IPack;
   grig: IGrid;
+  d3: typeof d3;
 }
 
 interface Node {
diff --git a/src/utils/colorUtils.ts b/src/utils/colorUtils.ts
new file mode 100644
index 00000000..a71b51b7
--- /dev/null
+++ b/src/utils/colorUtils.ts
@@ -0,0 +1,40 @@
+const d3 = window.d3;
+
+const c12 = [
+  "#dababf",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#c6b9c1",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
+  "#8dd3c7",
+  "#eb8de7"
+];
+
+export function getColors(number: number) {
+  const cRB = d3.scaleSequential(d3.interpolateRainbow);
+  const colors = d3.shuffle(
+    d3
+      .range(number)
+      .map((index: number) => (index < 12 ? c12[index] : d3.color(cRB((index - 12) / (number - 12))).hex()))
+  );
+  return colors;
+}
+
+export function getRandomColor() {
+  return d3.color(d3.scaleSequential(d3.interpolateRainbow)(Math.random())).hex();
+}
+
+// mix a color with a random color
+export function getMixedColor(hexColor: string, mixation = 0.2, bright = 0.3) {
+  // if provided color is not hex (e.g. harching), generate random one
+  const color1 = hexColor && hexColor[0] === "#" ? hexColor : getRandomColor();
+  const color2 = getRandomColor();
+  const mixedColor = d3.interpolate(color1, color2)(mixation);
+
+  return d3.color(mixedColor).brighter(bright).hex();
+}
diff --git a/utils/colorUtils.js b/utils/colorUtils.js
deleted file mode 100644
index 3a5c6d24..00000000
--- a/utils/colorUtils.js
+++ /dev/null
@@ -1,33 +0,0 @@
-"use strict";
-// FMG utils related to colors
-
-// convert RGB color string to HEX without #
-function toHEX(rgb) {
-  if (rgb.charAt(0) === "#") return rgb;
-
-  rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-  return rgb && rgb.length === 4
-    ? "#" +
-        ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
-        ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
-        ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2)
-    : "";
-}
-
-// return array of standard shuffled colors
-function getColors(number) {
-  const c12 = ["#dababf", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#c6b9c1", "#bc80bd", "#ccebc5", "#ffed6f", "#8dd3c7", "#eb8de7"];
-  const cRB = d3.scaleSequential(d3.interpolateRainbow);
-  const colors = d3.shuffle(d3.range(number).map(i => (i < 12 ? c12[i] : d3.color(cRB((i - 12) / (number - 12))).hex())));
-  return colors;
-}
-
-function getRandomColor() {
-  return d3.color(d3.scaleSequential(d3.interpolateRainbow)(Math.random())).hex();
-}
-
-// mix a color with a random color
-function getMixedColor(color, mix = 0.2, bright = 0.3) {
-  const c = color && color[0] === "#" ? color : getRandomColor(); // if provided color is not hex (e.g. harching), generate random one
-  return d3.color(d3.interpolate(c, getRandomColor())(mix)).brighter(bright).hex();
-}