diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue
index 5f443158..7b42da01 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 (hsla.s === 0) hsla.h = props.hue
+      hsla.h = props.hue
       return hsla
     })
 
@@ -68,7 +68,7 @@ export default defineComponent({
       else if (left > containerWidth) h = 360
       else {
         percent = left * 100 / containerWidth
-        h = (360 * percent / 100)
+        h = 360 * percent / 100
       }
       if (color.value.h !== h) {
         emit('colorChange', {
diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue
index 8ae26e9b..82e1c979 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 (hsva.s === 0) hsva.h = props.hue
+      hsva.h = props.hue
       return hsva
     })
 
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index d37dd8b4..df1603c5 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -189,10 +189,8 @@ export default defineComponent({
     })
 
     const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
-      if ('h' in value) {
-        hue.value = value.h
-        color.value = tinycolor(value).toRgb()
-      }
+      if ('h' in value && 'l' in value) hue.value = value.h
+      if ('h' in value) color.value = tinycolor(value).toRgb()
       else color.value = value
 
       updateRecentColorsCache()