diff --git a/src/js/controller/dialogs/CreatePaletteController.js b/src/js/controller/dialogs/CreatePaletteController.js
index 03ff9e3f..5fff0cb3 100644
--- a/src/js/controller/dialogs/CreatePaletteController.js
+++ b/src/js/controller/dialogs/CreatePaletteController.js
@@ -4,8 +4,6 @@
   ns.CreatePaletteController = function (piskelController) {
     this.paletteService = pskl.app.paletteService;
     this.paletteImportService = pskl.app.paletteImportService;
-    this.selectedIndex = -1;
-    this.mode = null;
   };
 
   pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
@@ -13,8 +11,6 @@
   ns.CreatePaletteController.prototype.init = function (paletteId) {
     this.superclass.init.call(this);
 
-    this.colorsList = document.querySelector('.colors-list');
-    this.colorPreviewEl = document.querySelector('.color-preview');
     this.hiddenFileInput = document.querySelector('.create-palette-import-input');
     this.nameInput = document.querySelector('input[name="palette-name"]');
 
@@ -23,7 +19,6 @@
     var downloadButton = document.querySelector('.create-palette-download-button');
     var importFileButton = document.querySelector('.create-palette-import-button');
 
-    this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
     this.nameInput.addEventListener('input', this.onNameInputChange_.bind(this));
     this.hiddenFileInput.addEventListener('change', this.onFileInputChange_.bind(this));
 
@@ -31,124 +26,73 @@
     downloadButton.addEventListener('click', this.onDownloadButtonClick_.bind(this));
     importFileButton.addEventListener('click', this.onImportFileButtonClick_.bind(this));
 
-    $('.colors-list').sortable({
-      placeholder: 'colors-list-drop-proxy',
-      update: this.onColorDrop_.bind(this),
-      items: '.create-palette-color'
-    });
-
-    var colorPickerContainer = document.querySelector('.color-picker-container');
-    this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
-    this.hslRgbColorPicker.init();
+    var colorsListContainer = document.querySelector('.colors-container');
+    this.colorsListWidget = new pskl.controller.widgets.ColorsList(colorsListContainer);
 
     var palette;
     var isCurrentColorsPalette = paletteId == Constants.CURRENT_COLORS_PALETTE_ID;
     if (paletteId && !isCurrentColorsPalette) {
-      var paletteObject = this.paletteService.getPaletteById(paletteId);
-      palette = pskl.model.Palette.fromObject(paletteObject);
       importFileButton.style.display = 'none';
       this.setTitle('Edit Palette');
+
+      var paletteObject = this.paletteService.getPaletteById(paletteId);
+      palette = pskl.model.Palette.fromObject(paletteObject);
     } else {
-      if (isCurrentColorsPalette) {
-        var currentColorsPalette = this.paletteService.getPaletteById(Constants.CURRENT_COLORS_PALETTE_ID);
-        var colors = currentColorsPalette.getColors();
-        if (!colors.length) {
-          colors = ['#000000'];
-        }
-        palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'Current colors clone', colors);
-      } else {
-        palette = new pskl.model.Palette(pskl.utils.Uuid.generate(), 'New palette', ['#000000']);
-      }
       downloadButton.style.display = 'none';
       deleteButton.style.display = 'none';
       this.setTitle('Create Palette');
+
+      var uuid = pskl.utils.Uuid.generate();
+      if (isCurrentColorsPalette) {
+        palette = new pskl.model.Palette(uuid, 'Current colors clone', this.getCurrentColors_());
+      } else {
+        palette = new pskl.model.Palette(uuid, 'New palette', []);
+      }
     }
 
     this.setPalette_(palette);
   };
 
+  ns.CreatePaletteController.prototype.getCurrentColors_ = function () {
+    var palette = this.paletteService.getPaletteById(Constants.CURRENT_COLORS_PALETTE_ID);
+    return palette.getColors();
+  };
+
   ns.CreatePaletteController.prototype.setPalette_ = function (palette) {
     this.palette = palette;
-    this.nameInput.value = pskl.utils.unescapeHtml(this.palette.name);
-    this.selectColor_(0);
-    this.refresh_();
+    this.nameInput.value = pskl.utils.unescapeHtml(palette.name);
+    this.colorsListWidget.setColors(palette.getColors());
   };
 
   ns.CreatePaletteController.prototype.destroy = function () {
-    this.colorsList = null;
-    this.colorPreviewEl = null;
+    this.colorsListWidget.destroy();
     this.nameInput = null;
   };
 
-  ns.CreatePaletteController.prototype.onColorUpdated_ = function (color) {
-    var rgbColor = color.toRgbString();
-    this.colorPreviewEl.style.background = rgbColor;
-    if (this.palette) {
-      this.palette.set(this.selectedIndex, rgbColor);
-      this.refreshColorElement_(this.selectedIndex);
-    }
-  };
-
-  /**
-   * Lightweight refresh only changing the color of one element of the palette color list
-   */
-  ns.CreatePaletteController.prototype.refreshColorElement_ = function (index) {
-    var color = this.palette.get(this.selectedIndex);
-    var element = document.querySelector('[data-palette-index="'+index+'"]');
-    if (element) {
-      element.style.background = color;
-      element.classList.toggle('light-color', this.isLight_(color));
-    }
-  };
-
-  ns.CreatePaletteController.prototype.onColorContainerClick_ = function (evt) {
-    var target = evt.target;
-    if (target.classList.contains('create-palette-color')) {
-      this.onPaletteColorClick_(evt, target);
-    } else if (target.classList.contains('create-palette-new-color')) {
-      this.onNewColorClick_(evt, target);
-    } else if (target.classList.contains('create-palette-remove-color')) {
-      this.onRemoveColorClick_(evt, target);
-    }
-    this.refresh_();
-  };
-
-  ns.CreatePaletteController.prototype.onPaletteColorClick_ = function (evt, target) {
-    var index = parseInt(target.dataset.paletteIndex,10);
-    this.selectColor_(index);
-  };
-
-  ns.CreatePaletteController.prototype.onRemoveColorClick_ = function (evt, target) {
-    var colorElement = target.parentNode;
-    var index = parseInt(colorElement.dataset.paletteIndex,10);
-    this.removeColor_(index);
-  };
-
-  ns.CreatePaletteController.prototype.onNewColorClick_ = function (evt, target) {
-    var newColor = this.palette.get(this.selectedIndex) || '#000000';
-    this.palette.add(newColor);
-    this.selectColor_(this.palette.size()-1);
-  };
-
   ns.CreatePaletteController.prototype.onButtonClick_ = function (evt) {
     var target = evt.target;
     if (target.dataset.action === 'submit') {
-      this.saveAndSelectPalette_(this.palette);
-      this.closeDialog();
+      this.saveAndSelectPalette_();
     } else if (target.dataset.action === 'cancel') {
       this.closeDialog();
     } else if (target.dataset.action === 'delete') {
-      if (window.confirm('Are you sure you want to delete palette ' + this.palette.name)) {
-        this.paletteService.deletePaletteById(this.palette.id);
-        pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, Constants.CURRENT_COLORS_PALETTE_ID);
-        this.closeDialog();
-      }
+      this.deletePalette_();
     }
   };
 
-  ns.CreatePaletteController.prototype.saveAndSelectPalette_ = function (palette) {
-    this.paletteService.savePalette(palette);
-    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
+  ns.CreatePaletteController.prototype.saveAndSelectPalette_ = function () {
+    this.palette.setColors(this.colorsListWidget.getColors());
+    this.paletteService.savePalette(this.palette);
+    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, this.palette.id);
+    this.closeDialog();
+  };
+
+  ns.CreatePaletteController.prototype.deletePalette_ = function () {
+    if (window.confirm('Are you sure you want to delete palette ' + this.palette.name)) {
+      this.paletteService.deletePaletteById(this.palette.id);
+      pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, Constants.CURRENT_COLORS_PALETTE_ID);
+      this.closeDialog();
+    }
   };
 
   ns.CreatePaletteController.prototype.onDownloadButtonClick_ = function () {
@@ -174,52 +118,4 @@
   ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
     this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
   };
-
-  ns.CreatePaletteController.prototype.selectColor_ = function (index) {
-    this.selectedIndex = index;
-    this.hslRgbColorPicker.setColor(this.palette.get(index));
-  };
-
-  ns.CreatePaletteController.prototype.removeColor_ = function (index) {
-    this.palette.removeAt(index);
-    this.refresh_();
-  };
-
-  ns.CreatePaletteController.prototype.refresh_ = function () {
-    var html = "";
-    var tpl = pskl.utils.Template.get('create-palette-color-template');
-    var colors = this.palette.getColors();
-
-    colors.forEach(function (color, index) {
-      var isSelected = (index === this.selectedIndex);
-
-      html += pskl.utils.Template.replace(tpl, {
-        'color':color, index:index,
-        ':selected':isSelected,
-        ':light-color':this.isLight_(color)
-      });
-    }.bind(this));
-
-    html += '<li class="create-palette-new-color">+</li>';
-
-    this.colorsList.innerHTML = html;
-  };
-
-  ns.CreatePaletteController.prototype.isLight_ = function (color) {
-    var rgb = window.tinycolor(color).toRgb();
-    return rgb.r+rgb.b+rgb.g > 128*3;
-  };
-
-
-  ns.CreatePaletteController.prototype.onColorDrop_ = function (evt, drop) {
-    var colorElement = drop.item.get(0);
-
-    var oldIndex = parseInt(colorElement.dataset.paletteIndex, 10);
-    var newIndex = $('.create-palette-color').index(drop.item);
-    this.palette.move(oldIndex, newIndex);
-
-    this.selectedIndex = newIndex;
-
-    this.refresh_();
-  };
 })();
\ No newline at end of file
diff --git a/src/js/controller/widgets/ColorsList.js b/src/js/controller/widgets/ColorsList.js
new file mode 100644
index 00000000..1c137b5c
--- /dev/null
+++ b/src/js/controller/widgets/ColorsList.js
@@ -0,0 +1,145 @@
+(function () {
+  var ns = $.namespace('pskl.controller.widgets');
+
+  var DEFAULT_COLOR = '#000000';
+
+  ns.ColorsList = function (container) {
+    this.selectedIndex = -1;
+    this.palette = new pskl.model.Palette('tmp', 'tmp', []);
+    this.container = container;
+
+    this.colorsList = this.container.querySelector('.colors-list');
+    this.colorPreviewEl = this.container.querySelector('.color-preview');
+
+    $(container).sortable({
+      placeholder: 'colors-list-drop-proxy',
+      update: this.onColorDrop_.bind(this),
+      items: '.create-palette-color'
+    });
+
+    this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
+
+    var colorPickerContainer = container.querySelector('.color-picker-container');
+    this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
+    this.hslRgbColorPicker.init();
+  };
+
+  ns.ColorsList.prototype.setColors = function (colors) {
+    if (colors.length === 0) {
+      colors.push(DEFAULT_COLOR);
+    }
+
+    this.palette.setColors(colors);
+
+    this.selectColor_(0);
+    this.refresh_();
+  };
+
+  ns.ColorsList.prototype.getColors = function () {
+    return this.palette.getColors();
+  };
+
+  ns.ColorsList.prototype.destroy = function () {
+    this.hslRgbColorPicker.destroy();
+    this.container = null;
+    this.colorsList = null;
+    this.colorPreviewEl = null;
+  };
+
+  /**
+   * Lightweight refresh only changing the color of one element of the palette color list
+   */
+  ns.ColorsList.prototype.refreshColorElement_ = function (index) {
+    var color = this.palette.get(this.selectedIndex);
+    var element = document.querySelector('[data-palette-index="'+index+'"]');
+    if (element) {
+      element.style.background = color;
+      element.classList.toggle('light-color', this.isLight_(color));
+    }
+  };
+
+  ns.ColorsList.prototype.onColorContainerClick_ = function (evt) {
+    var target = evt.target;
+    if (target.classList.contains('create-palette-color')) {
+      this.onPaletteColorClick_(evt, target);
+    } else if (target.classList.contains('create-palette-new-color')) {
+      this.onNewColorClick_(evt, target);
+    } else if (target.classList.contains('create-palette-remove-color')) {
+      this.onRemoveColorClick_(evt, target);
+    }
+    this.refresh_();
+  };
+
+  ns.ColorsList.prototype.onColorUpdated_ = function (color) {
+    var rgbColor = color.toRgbString();
+    this.colorPreviewEl.style.background = rgbColor;
+    if (this.palette) {
+      this.palette.set(this.selectedIndex, rgbColor);
+      this.refreshColorElement_(this.selectedIndex);
+    }
+  };
+
+  ns.ColorsList.prototype.onPaletteColorClick_ = function (evt, target) {
+    var index = parseInt(target.dataset.paletteIndex,10);
+    this.selectColor_(index);
+  };
+
+  ns.ColorsList.prototype.onRemoveColorClick_ = function (evt, target) {
+    var colorElement = target.parentNode;
+    var index = parseInt(colorElement.dataset.paletteIndex,10);
+    this.removeColor_(index);
+  };
+
+  ns.ColorsList.prototype.onNewColorClick_ = function (evt, target) {
+    var newColor = this.palette.get(this.selectedIndex) || '#000000';
+    this.palette.add(newColor);
+    this.selectColor_(this.palette.size()-1);
+  };
+
+  ns.ColorsList.prototype.refresh_ = function () {
+    var html = "";
+    var tpl = pskl.utils.Template.get('create-palette-color-template');
+    var colors = this.palette.getColors();
+
+    colors.forEach(function (color, index) {
+      var isSelected = (index === this.selectedIndex);
+
+      html += pskl.utils.Template.replace(tpl, {
+        'color':color, index:index,
+        ':selected':isSelected,
+        ':light-color':this.isLight_(color)
+      });
+    }.bind(this));
+
+    html += '<li class="create-palette-new-color">+</li>';
+
+    this.colorsList.innerHTML = html;
+  };
+
+  ns.ColorsList.prototype.selectColor_ = function (index) {
+    this.selectedIndex = index;
+    this.hslRgbColorPicker.setColor(this.palette.get(index));
+  };
+
+  ns.ColorsList.prototype.removeColor_ = function (index) {
+    this.palette.removeAt(index);
+    this.refresh_();
+  };
+
+  ns.ColorsList.prototype.isLight_ = function (color) {
+    var rgb = window.tinycolor(color).toRgb();
+    return rgb.r+rgb.b+rgb.g > 128*3;
+  };
+
+  ns.ColorsList.prototype.onColorDrop_ = function (evt, drop) {
+    var colorElement = drop.item.get(0);
+
+    var oldIndex = parseInt(colorElement.dataset.paletteIndex, 10);
+    var newIndex = $('.create-palette-color').index(drop.item);
+    this.palette.move(oldIndex, newIndex);
+
+    this.selectedIndex = newIndex;
+
+    this.refresh_();
+  };
+})();
\ No newline at end of file
diff --git a/src/js/controller/widgets/ColorsListController.js b/src/js/controller/widgets/ColorsListController.js
deleted file mode 100644
index 903ec27d..00000000
--- a/src/js/controller/widgets/ColorsListController.js
+++ /dev/null
@@ -1,8 +0,0 @@
-(function () {
-  var ns = $.namespace('pskl.controller.widgets');
-
-  ns.ColorsListController = function (container) {
-    this.container = container;
-    this.colorsList = this.container.querySelector('.colors-list');
-  };
-})();
\ No newline at end of file
diff --git a/src/js/controller/widgets/HslRgbColorPicker.js b/src/js/controller/widgets/HslRgbColorPicker.js
index a83adaec..f7e539d5 100644
--- a/src/js/controller/widgets/HslRgbColorPicker.js
+++ b/src/js/controller/widgets/HslRgbColorPicker.js
@@ -27,6 +27,11 @@
     this.setColor("#000000");
   };
 
+  ns.HslRgbColorPicker.prototype.destroy = function () {
+    this.container = null;
+    this.spectrumEl = null;
+  };
+
   ns.HslRgbColorPicker.prototype.onPickerChange_ = function (evt) {
     var target = evt.target;
 
diff --git a/src/js/model/Palette.js b/src/js/model/Palette.js
index ef1709a2..eaadedae 100644
--- a/src/js/model/Palette.js
+++ b/src/js/model/Palette.js
@@ -16,6 +16,10 @@
     return this.colors;
   };
 
+  ns.Palette.prototype.setColors = function (colors) {
+    this.colors = colors;
+  };
+
   ns.Palette.prototype.get = function (index) {
     return this.colors[index];
   };
diff --git a/src/js/service/palette/PaletteService.js b/src/js/service/palette/PaletteService.js
index def44a3e..d02e7708 100644
--- a/src/js/service/palette/PaletteService.js
+++ b/src/js/service/palette/PaletteService.js
@@ -52,8 +52,8 @@
 
   ns.PaletteService.prototype.savePalettes_ = function (palettes) {
     palettes = palettes.filter(function (palette) {
-      return palette instanceof pskl.model.Palette;
-    });
+      return this.dynamicPalettes.indexOf(palette) === -1;
+    }.bind(this));
     this.localStorageService.setItem('piskel.palettes', JSON.stringify(palettes));
     $.publish(Events.PALETTE_LIST_UPDATED);
   };
diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js
index e2b28987..5d0ea962 100644
--- a/src/piskel-script-list.js
+++ b/src/piskel-script-list.js
@@ -110,6 +110,7 @@
   "js/controller/dialogs/DialogsController.js",
 
   // Widget controller
+  "js/controller/widgets/ColorsList.js",
   "js/controller/widgets/HslRgbColorPicker.js",
 
   // Services