diff --git a/.changeset/cuddly-jeans-drop.md b/.changeset/cuddly-jeans-drop.md
new file mode 100644
index 0000000000..be7a3a2302
--- /dev/null
+++ b/.changeset/cuddly-jeans-drop.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/color-picker": patch
+---
+
+- Add `--color` to the swatch and swatch trigger parts
+- Allow clicking swatch being in the open state
diff --git a/.xstate/color-picker.js b/.xstate/color-picker.js
index c75fb7d088..d15ef37de8 100644
--- a/.xstate/color-picker.js
+++ b/.xstate/color-picker.js
@@ -42,6 +42,9 @@ const fetchMachine = createMachine({
     },
     "EYEDROPPER.CLICK": {
       actions: ["openEyeDropper"]
+    },
+    "SWATCH_TRIGGER.CLICK": {
+      actions: ["setValue"]
     }
   },
   on: {
diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts
index 3384270a20..cd68b8ed8a 100644
--- a/packages/machines/color-picker/src/color-picker.connect.ts
+++ b/packages/machines/color-picker/src/color-picker.connect.ts
@@ -607,6 +607,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value })
         },
         style: {
+          "--color": swatchState.valueAsString,
           position: "relative",
         },
       })
@@ -624,14 +625,16 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     getSwatchProps(props) {
       const { respectAlpha = true } = props
       const swatchState = getSwatchTriggerState(props)
+      const color = swatchState.value.toString(respectAlpha ? "css" : "hex")
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
         style: {
+          "--color": color,
           position: "relative",
-          background: swatchState.value.toString(respectAlpha ? "css" : "hex"),
+          background: color,
         },
       })
     },
diff --git a/packages/machines/color-picker/src/color-picker.machine.ts b/packages/machines/color-picker/src/color-picker.machine.ts
index 7a1e0db8d8..f4238f6cf7 100644
--- a/packages/machines/color-picker/src/color-picker.machine.ts
+++ b/packages/machines/color-picker/src/color-picker.machine.ts
@@ -77,6 +77,9 @@ export function machine(userContext: UserDefinedContext) {
         "EYEDROPPER.CLICK": {
           actions: ["openEyeDropper"],
         },
+        "SWATCH_TRIGGER.CLICK": {
+          actions: ["setValue"],
+        },
       },
 
       states: {