diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 5b6f11d39..a850e2528 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -160,7 +160,8 @@
 
 (defonce form-token-cache-atom (atom nil))
 
-(defn hex->value
+;; FIXME: this function has confusing name
+(defn- hex->value
   [hex]
   (when-let [tc (tinycolor/valid-color hex)]
     (let [hex (tinycolor/->hex-string tc)
@@ -183,18 +184,25 @@
         on-finish-drag
         (mf/use-fn #(mf/set-ref-val! dragging-ref false))
 
+        internal-color*
+        (mf/use-state #(hex->value color))
+
+        internal-color
+        (deref internal-color*)
+
         on-change'
         (mf/use-fn
          (mf/deps on-change)
-         (fn [{:keys [hex alpha]}]
+         (fn [{:keys [hex alpha] :as selector-color}]
            (let [dragging? (mf/ref-val dragging-ref)]
              (when-not (and dragging? hex)
+               (reset! internal-color* selector-color)
                (on-change hex alpha)))))]
 
-    (colorpicker/use-color-picker-css-variables! wrapper-node-ref (hex->value color))
+    (colorpicker/use-color-picker-css-variables! wrapper-node-ref internal-color)
     [:div {:ref wrapper-node-ref}
      [:> ramp-selector*
-      {:color (hex->value color)
+      {:color internal-color
        :on-start-drag on-start-drag
        :on-finish-drag on-finish-drag
        :on-change on-change'}]]))