diff --git a/CookieMonster.js b/CookieMonster.js
index 7609daa..a3c8503 100644
--- a/CookieMonster.js
+++ b/CookieMonster.js
@@ -3259,13 +3259,12 @@ CM.Disp.CreatePrefOption = function(config) {
 			var innerDiv = document.createElement('div');
 			innerDiv.className = 'listing';
 			var input = document.createElement('input');
-			input.id = CM.ConfigPrefix + 'Color' + CM.Disp.colors[i];
-			input.className = 'option';
+			input.id = CM.Disp.colors[i];
 			input.style.width = '65px';
 			input.setAttribute('value', CM.Options.Colors[CM.Disp.colors[i]]);
 			innerDiv.appendChild(input);
-			eval('var change = function() {CM.Options.Colors[\'' + CM.Disp.colors[i] + '\'] = l(CM.ConfigPrefix + \'Color\' + \'' + CM.Disp.colors[i] + '\').value; CM.Disp.UpdateColors(); CM.Config.SaveConfig();}');
-			var jscolorpicker = new jscolor.color(input, {hash: true, caps: false, pickerZIndex: 1000000, pickerPosition: 'right', onImmediateChange: change});
+			let change = function() {CM.Options.Colors[this.targetElement.id] = this.toHEXString(); CM.Disp.UpdateColors(); CM.Config.SaveConfig(); console.log('done');};
+			let picker = new JSColor(input, {hash: true, position: "right", onInput: change})
 			var label = document.createElement('label');
 			label.textContent = CM.ConfigData.Colors.desc[CM.Disp.colors[i]];
 			innerDiv.appendChild(label);
@@ -5504,10 +5503,13 @@ CM.load = function(str) {
  * It is called by the last function in the footer
  */
 CM.Footer.AddJscolor = function() {
+    /**
 	CM.Footer.Jscolor = document.createElement('script');
 	CM.Footer.Jscolor.type = 'text/javascript';
 	CM.Footer.Jscolor.setAttribute('src', 'https://aktanusa.github.io/CookieMonster/jscolor/jscolor.js');
-	document.head.appendChild(CM.Footer.Jscolor);
+    document.head.appendChild(CM.Footer.Jscolor);
+     */
+    jscolor.init();
 }
 
 /**
diff --git a/src/Disp.js b/src/Disp.js
index 435cd9f..2b2de57 100644
--- a/src/Disp.js
+++ b/src/Disp.js
@@ -2076,13 +2076,12 @@ CM.Disp.CreatePrefOption = function(config) {
 			var innerDiv = document.createElement('div');
 			innerDiv.className = 'listing';
 			var input = document.createElement('input');
-			input.id = CM.ConfigPrefix + 'Color' + CM.Disp.colors[i];
-			input.className = 'option';
+			input.id = CM.Disp.colors[i];
 			input.style.width = '65px';
 			input.setAttribute('value', CM.Options.Colors[CM.Disp.colors[i]]);
 			innerDiv.appendChild(input);
-			eval('var change = function() {CM.Options.Colors[\'' + CM.Disp.colors[i] + '\'] = l(CM.ConfigPrefix + \'Color\' + \'' + CM.Disp.colors[i] + '\').value; CM.Disp.UpdateColors(); CM.Config.SaveConfig();}');
-			var jscolorpicker = new jscolor.color(input, {hash: true, caps: false, pickerZIndex: 1000000, pickerPosition: 'right', onImmediateChange: change});
+			let change = function() {CM.Options.Colors[this.targetElement.id] = this.toHEXString(); CM.Disp.UpdateColors(); CM.Config.SaveConfig(); console.log('done');};
+			let picker = new JSColor(input, {hash: true, position: "right", onInput: change})
 			var label = document.createElement('label');
 			label.textContent = CM.ConfigData.Colors.desc[CM.Disp.colors[i]];
 			innerDiv.appendChild(label);
diff --git a/src/Footer.js b/src/Footer.js
index c3dfe24..bb251d5 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -52,10 +52,13 @@ CM.load = function(str) {
  * It is called by the last function in the footer
  */
 CM.Footer.AddJscolor = function() {
+    /**
 	CM.Footer.Jscolor = document.createElement('script');
 	CM.Footer.Jscolor.type = 'text/javascript';
 	CM.Footer.Jscolor.setAttribute('src', 'https://aktanusa.github.io/CookieMonster/jscolor/jscolor.js');
-	document.head.appendChild(CM.Footer.Jscolor);
+    document.head.appendChild(CM.Footer.Jscolor);
+     */
+    jscolor.init();
 }
 
 /**