diff --git a/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css b/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
index 642e4fdf3..fc82aaa6c 100644
--- a/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
+++ b/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
@@ -88,16 +88,16 @@
 }
 .sp-alpha-handle {
   background-color: #ccc;
-  border: 1px solid #555;
+  border: 1px solid #666;
   width: 4px;
 }
 .sp-color,
 .sp-hue {
-  border: 1px solid #333333;
+  border: 1px solid #ccc;
 }
 .sp-slider {
   background-color: #ccc;
-  border: 1px solid #555;
+  border: 1px solid #666;
   height: 3px;
   left: -4px;
   width: 22px;
diff --git a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
index b40907474..fb725683f 100644
--- a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
+++ b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
@@ -41,6 +41,7 @@
 
         this.$colorList.on('click', '>li', function(){
             self.selectColor(this)
+            self.$dataLocker.trigger('change')
         })
 
         /*
diff --git a/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less b/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
index f14fe2826..b64dca607 100644
--- a/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
+++ b/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
@@ -96,16 +96,17 @@
 
 .sp-alpha-handle {
     background-color: #ccc;
-    border: 1px solid #555;
+    border: 1px solid #666;
     width: 4px;
 }
 
 .sp-color, .sp-hue {
-    border: 1px solid #333333;
+    border: 1px solid #ccc;
 }
+
 .sp-slider {
     background-color: #ccc;
-    border: 1px solid #555;
+    border: 1px solid #666;
     height: 3px;
     left: -4px;
     width: 22px;