diff --git a/client/web/src/components/popovers/ColorPicker.vue b/client/web/src/components/popovers/ColorPicker.vue
index 1b55a9447..1c59bd4dd 100644
--- a/client/web/src/components/popovers/ColorPicker.vue
+++ b/client/web/src/components/popovers/ColorPicker.vue
@@ -14,14 +14,14 @@
 
 <style lang="scss">
 .popover-color-picker {
-	--saturation-picker-color: #ff0000;
+	--saturation-picker-hue: #ff0000;
 	--opacity-picker-color: #ff0000;
 	display: flex;
 
 	.saturation-picker {
 		width: 256px;
 		background-blend-mode: multiply;
-		background: linear-gradient(to bottom, #ffffff, #000000), linear-gradient(to right, #ffffff, var(--saturation-picker-color));
+		background: linear-gradient(to bottom, #ffffff, #000000), linear-gradient(to right, #ffffff, var(--saturation-picker-hue));
 		position: relative;
 	}
 
@@ -277,7 +277,7 @@ export default defineComponent({
 		updateHue() {
 			const { colorPicker } = this.$data._;
 			let color = hsvToRgb({ h: colorPicker.color.h, s: 1, v: 255, a: 1 });
-			this.$el.style.setProperty("--saturation-picker-color", `rgb(${color.r}, ${color.g}, ${color.b})`);
+			this.$el.style.setProperty("--saturation-picker-hue", `rgb(${color.r}, ${color.g}, ${color.b})`);
 			color = hsvToRgb(colorPicker.color);
 			this.$el.style.setProperty("--opacity-picker-color", `rgb(${color.r}, ${color.g}, ${color.b})`);
 		},