diff --git a/index.html b/index.html
index 2f66509f..b1824de6 100644
--- a/index.html
+++ b/index.html
@@ -1121,6 +1121,13 @@
                  <label for="gridCellNumbers" class="checkbox-label">Show cell numbers</label>
                </td>
               </tr>
+
+              <tr data-tip="Set the color of grid cell numbers">
+                <td>Cell num color</td>
+                <td>
+                  <input id="gridCellNumbersStrokeColor" type="color" value="#000000" />
+                </td>
+              </tr>
             </tbody>
 
             <tbody id="styleCompass">
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index ebdb599c..62095460 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -1447,14 +1447,11 @@ function drawGrid() {
     .attr("fill", "url(" + pattern + ")")
     .attr("stroke", "none");
 
-    // Check both the attribute and the checkbox state
     if (gridOverlay.attr("cell-numbers") === "true" || document.getElementById("gridCellNumbers").checked) {
       drawCellNumbers();
     }
 }
 
-
-
 function drawCellNumbers() {
   const pattern = gridOverlay.attr("type") || "pointyHex";
   const scale = +gridOverlay.attr("scale") || 1;
@@ -1471,6 +1468,8 @@ function drawCellNumbers() {
   const columns = Math.ceil(maxWidth / patternWidth);
   const rows = Math.ceil(maxHeight / patternHeight);
 
+  const labelStyle = gridOverlay.attr("data-label-style") || "stroke: #000000;";
+
   for (let row = 0; row < rows; row++) {
     for (let col = 0; col < columns; col++) {
       const x = col * patternWidth + dx;
@@ -1484,6 +1483,8 @@ function drawCellNumbers() {
         .attr("text-anchor", "middle")
         .attr("dominant-baseline", "central")
         .attr("font-size", Math.min(patternWidth, patternHeight) / 4)
+        .attr("fill", "none")  // Set fill to none so only stroke is visible
+        .attr("style", labelStyle)
         .text(cellNumber);
     }
   }
diff --git a/modules/ui/style.js b/modules/ui/style.js
index 41e92602..a588eddc 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -201,6 +201,8 @@ function selectStyleElement() {
   
     if (gridCellNumbers) {
       gridCellNumbers.checked = el.attr("cell-numbers") === "true";
+      styleStroke.style.display = "block";
+      styleStrokeInput.value = styleStrokeOutput.value = gridOverlay.attr("data-label-style")?.match(/stroke: ([^;]+)/)?.[1] || "#000000";
       gridCellNumbers.addEventListener("change", function() {
         el.attr("cell-numbers", this.checked);
         drawGrid();
@@ -208,6 +210,7 @@ function selectStyleElement() {
     } else {
       console.warn("gridCellNumbers element not found");
     }
+    
   }
 
   if (styleElement === "compass") {
@@ -542,10 +545,21 @@ styleGridNumbers.on("change", function () {
 
 byId("gridCellNumbers")?.addEventListener("change", function() {
   gridOverlay.attr("cell-numbers", this.checked);
-  // drawGrid(); // without condition of if layerIsOn.
+  updateGridCellNumbersStyle();
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
+document.getElementById("gridCellNumbersColor").addEventListener("input", updateGridCellNumbersStyle);
+
+function updateGridCellNumbersStyle() {
+  const color = document.getElementById("gridCellNumbersColor").value;
+  
+  const style = `stroke: ${color};`;
+  gridOverlay.attr("data-label-style", style);
+  
+  if (layerIsOn("toggleGrid")) drawGrid();
+}
+
 styleRescaleMarkers.on("change", function () {
   markers.attr("rescale", +this.checked);
   invokeActiveZooming();