diff --git a/main.js b/main.js
index e366a9b..f86d714 100644
--- a/main.js
+++ b/main.js
@@ -175,8 +175,19 @@ customLayerDiv.querySelector("button").addEventListener("click", function(){
 });
 document.querySelector("aside").appendChild(customLayerDiv);
 
-// https://stackoverflow.com/a/64090995
-let hslToRgb = (h,s,l, a=s*Math.min(l,1-l), f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1)) => [f(0),f(8),f(4)];
+// borrowed from https://github.com/ChartsCSS/charts.css/blob/main/src/general/_variables.scss#L7; randomly ordered
+let colors = [
+  [170, 90, 240],
+  [90, 165, 255],
+  [100, 210, 80],
+  [180, 180, 180],
+  [170, 150, 110],
+  [255, 180, 50],
+  [240, 50, 50],
+  [130, 50, 20],
+  [110, 110, 110],
+  [255, 220, 90],
+];
 
 function newCustomLayer(name, sourceURL, colorString) {
   let color;
@@ -188,7 +199,7 @@ function newCustomLayer(name, sourceURL, colorString) {
     }
   }
   if (!color) {
-    color = hslToRgb(Math.random()*360, 1, 0.5).map(c => c * 255);
+    color = colors[document.querySelectorAll('aside div:has(input[name]) li').length % colors.length];
   }
   const li = document.createElement("li");
   const layer = new VectorLayer({