diff --git a/src/components/color-picker/hue.vue b/src/components/color-picker/hue.vue
index b08c7b74..471e178f 100644
--- a/src/components/color-picker/hue.vue
+++ b/src/components/color-picker/hue.vue
@@ -48,6 +48,12 @@ export default {
         };
     },
 
+    watch: {
+        value () {
+            this.percent = clamp(this.value.hsl.h * 100 / 360, 0, 100);
+        }
+    },
+
     methods: {
         change(percent) {
             this.percent = clamp(percent, 0, 100);