pixel-editor/js/_addColorButton.js

//add color button
on('click', 'add-color-button', function(){
  if (!documentCreated) return;

  var colorCheckingStyle = `
    color: white;
    background: #3c4cc2;
  `;
  
  var colorIsUnique = true
  do {
    //console.log('%cchecking for unique colors', colorCheckingStyle)
    //generate random color
    var hue = Math.floor(Math.random()*255);
    var sat = 130+Math.floor(Math.random()*100);
    var lit = 70+Math.floor(Math.random()*100);
    var newColorRgb = hslToRgb(hue,sat,lit)
    var newColor = rgbToHex(newColorRgb.r,newColorRgb.g,newColorRgb.b)
    
    var newColorHex = newColor;
    
    //check if color has been used before
    colors = document.getElementsByClassName('color-button');
    colorCheckingLoop: for (var i = 0; i < colors.length; i++) {
      //console.log('%c'+newColorHex +' '+ colors[i].jscolor.toString(), colorCheckingStyle)
      
      //if generated color matches this color
      if (newColorHex == colors[i].jscolor.toString()) {
        //console.log('%ccolor already exists', colorCheckingStyle)
        
        //start loop again
        colorIsUnique = false;
        
        //exit 
        break colorCheckingLoop;
      }
    }
  }
  while (colorIsUnique == false);
  
  //remove current color selection
  document.querySelector("#colors-menu li.selected").classList.remove("selected");
  
  //add new color and make it selected
	var addedColor = addColor(newColor);
	addedColor.classList.add('selected');
  context.fillStyle = '#' + newColor;
  
  //add history state
  //saveHistoryState({type: 'addcolor', colorValue: addedColor.firstElementChild.jscolor.toString()});
  new HistoryStateAddColor(addedColor.firstElementChild.jscolor.toString());
  
  //show color picker
  addedColor.firstElementChild.jscolor.show();
  console.log("showing picker");
  
  //hide edit button
  addedColor.lastChild.classList.add('hidden');
}, false);