diff --git a/wled00/data/cpal/cpal.htm b/wled00/data/cpal/cpal.htm
index b58c0987a..8fa715bc8 100644
--- a/wled00/data/cpal/cpal.htm
+++ b/wled00/data/cpal/cpal.htm
@@ -167,9 +167,10 @@
   </div>
   <div style="display: flex; justify-content: center;">
     <div id="palettes" class="palettesMain">
-        <div id="palTop" class="palTop">
-          Currently in use custom palettes
-        </div>
+      <div id="distDiv" class="palTop"></div>
+      <div id="palTop" class="palTop">
+        Currently in use custom palettes
+      </div>
     </div>
   </div>
 
@@ -187,7 +188,7 @@
           Available static palettes
         </div>
     </div>
-  </div>  
+  </div>
 
 </body>
 
@@ -204,6 +205,13 @@
   var paletteName = []; // Holds the names of the palettes after load.
   var svgSave = '<svg style="width:25px;height:25px" viewBox="0 0 24 24"><path fill=#fff d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M7,12L12,17V14H16V10H12V7L7,12Z"/></svg>'
   var svgEdit = '<svg style="width:25px;height:25px" viewBox="0 0 24 24"><path fill=#fff d="M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M15.1,7.07C15.24,7.07 15.38,7.12 15.5,7.23L16.77,8.5C17,8.72 17,9.07 16.77,9.28L15.77,10.28L13.72,8.23L14.72,7.23C14.82,7.12 14.96,7.07 15.1,7.07M13.13,8.81L15.19,10.87L9.13,16.93H7.07V14.87L13.13,8.81Z"/></svg>'
+  var svgDist = '<svg style="width:25px;height:25px" viewBox="0 0 24 24"><path fill=#fff d="M4 22H2V2H4V22M22 2H20V22H22V2M13.5 7H10.5V17H13.5V7Z"/></svg>'
+  var svgTrash = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px"><path style="fill:#880000; stroke: #888888; stroke-width: -2px;stroke-dasharray: 0.1, 8;" d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"/></svg>'
+
+  const distDiv = gId("distDiv");
+  distDiv.addEventListener('click', distribute);
+  distDiv.setAttribute('title', 'Distribute colors equally');
+  distDiv.innerHTML = svgDist;
 
   function recOf() {
     rect = gradientBox.getBoundingClientRect();
@@ -433,7 +441,7 @@
     renderY = e.srcElement.getBoundingClientRect().y + 13;
     
     trash.id = "trash";
-    trash.innerHTML = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px"><path style="fill:#880000; stroke: #888888; stroke-width: -2px;stroke-dasharray: 0.1, 8;" d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"/></svg>';
+    trash.innerHTML = svgTrash;
     trash.style.position = "absolute";
     trash.style.left = (renderX) + "px";
     trash.style.top = (renderY) + "px";
@@ -712,9 +720,27 @@
     }
   }
 
+  function distribute() {
+    let colorMarkers = [...gradientBox.querySelectorAll('.color-marker')];
+    colorMarkers.sort((a, b) => a.getAttribute('data-truepos') - b.getAttribute('data-truepos'));
+    colorMarkers = colorMarkers.slice(1, -1);
+    const spacing = Math.round(256 / (colorMarkers.length + 1));
+
+    colorMarkers.forEach((e, i) => {
+      const markerId = e.id.match(/\d+/)[0];
+      const trueCol = e.getAttribute("data-truecol");
+      gradientBox.removeChild(e);
+      gradientBox.removeChild(gId(`colorPicker${markerId}`));
+      gradientBox.removeChild(gId(`colorPickerMarker${markerId}`));
+      gradientBox.removeChild(gId(`deleteMarker${markerId}`));
+      addC(spacing * (i + 1), trueCol);
+    });
+  }
+
   function rgbToHex(r, g, b) {
     const hex = ((r << 16) | (g << 8) | b).toString(16);
     return "#" + "0".repeat(6 - hex.length) + hex;
   }
+
 </script>
 </html>