diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue
index d6e239bb..eac96d71 100644
--- a/src/components/ColorPicker/Hue.vue
+++ b/src/components/ColorPicker/Hue.vue
@@ -37,7 +37,7 @@ export default defineComponent({
     
     const color = computed(() => {
       const hsla = tinycolor(props.value).toHsl()
-      if (props.hue) hsla.h = props.hue
+      if (props.hue !== -1) hsla.h = props.hue
       return hsla
     })
 
@@ -70,7 +70,7 @@ export default defineComponent({
         percent = left * 100 / containerWidth
         h = 360 * percent / 100
       }
-      if (color.value.h !== h) {
+      if (props.hue === -1 || color.value.h !== h) {
         emit('colorChange', {
           h,
           l: color.value.l,
diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue
index a6caeb10..a86a6677 100644
--- a/src/components/ColorPicker/Saturation.vue
+++ b/src/components/ColorPicker/Saturation.vue
@@ -39,7 +39,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const color = computed(() => {
       const hsva = tinycolor(props.value).toHsv()
-      if (props.hue) hsva.h = props.hue
+      if (props.hue !== -1) hsva.h = props.hue
       return hsva
     })
 
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index df1603c5..2c6e75d0 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -140,7 +140,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const hue = ref(0)
+    const hue = ref(-1)
     const recentColors = ref<string[]>([])
 
     const color = computed({
@@ -162,6 +162,7 @@ export default defineComponent({
     })
 
     const selectPresetColor = (colorString: string) => {
+      hue.value = tinycolor(colorString).toHsl().h
       emit('update:modelValue', colorString)
     }
 
@@ -189,9 +190,14 @@ export default defineComponent({
     })
 
     const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
-      if ('h' in value && 'l' in value) hue.value = value.h
-      if ('h' in value) color.value = tinycolor(value).toRgb()
-      else color.value = value
+      if ('h' in value) {
+        hue.value = value.h
+        color.value = tinycolor(value).toRgb()
+      }
+      else {
+        hue.value = tinycolor(value).toHsl().h
+        color.value = value
+      }
 
       updateRecentColorsCache()
     }