diff --git a/components/colorPicker/index.js b/components/colorPicker/index.js
index <HASH>..<HASH> 100644
--- a/components/colorPicker/index.js
+++ b/components/colorPicker/index.js
@@ -9,6 +9,8 @@ module.exports = {
         this.$on('openCP', function (event) {
             this.show = true;
             this.originalColor = event;
+            this.cancelIntercept = this.onCancel.bind(this);
+            document.addEventListener("backbutton", this.cancelIntercept, true);
         });
     },
     computed: {
@@ -38,6 +40,8 @@ module.exports = {
         },
         onCancel: function (e) {
             e.preventDefault();
+            e.stopPropagation();
+            document.removeEventListener("backbutton", this.cancelIntercept, true);
             this.selectedColor = this.originalColor;
             this.show = false;
         }
color picker always  hides on 'back' now