diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 2170ebfeb..a76247538 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -52,6 +52,25 @@
 
 ;; --- Color Picker Modal
 
+(defn use-color-picker-css-variables! [node-ref current-color]
+  (mf/with-effect [current-color]
+    (let [node (mf/ref-val node-ref)
+          {:keys [r g b h v]} current-color
+          rgb [r g b]
+          hue-rgb (cc/hsv->rgb [h 1.0 255])
+          hsl-from (cc/hsv->hsl [h 0.0 v])
+          hsl-to (cc/hsv->hsl [h 1.0 v])
+
+          format-hsl (fn [[h s l]]
+                       (str/fmt "hsl(%s, %s, %s)"
+                                h
+                                (str (* s 100) "%")
+                                (str (* l 100) "%")))]
+      (dom/set-css-property! node "--color" (str/join ", " rgb))
+      (dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
+      (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
+      (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))))
+
 (mf/defc colorpicker
   {::mf/props :obj}
   [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}]
@@ -220,23 +239,7 @@
       (st/emit! (dc/update-colorpicker data)))
 
     ;; Updates the CSS color variable when there is a change in the color
-    (mf/with-effect [current-color]
-      (let [node (mf/ref-val node-ref)
-            {:keys [r g b h v]} current-color
-            rgb [r g b]
-            hue-rgb (cc/hsv->rgb [h 1.0 255])
-            hsl-from (cc/hsv->hsl [h 0.0 v])
-            hsl-to (cc/hsv->hsl [h 1.0 v])
-
-            format-hsl (fn [[h s l]]
-                         (str/fmt "hsl(%s, %s, %s)"
-                                  h
-                                  (str (* s 100) "%")
-                                  (str (* l 100) "%")))]
-        (dom/set-css-property! node "--color" (str/join ", " rgb))
-        (dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
-        (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
-        (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))
+    (use-color-picker-css-variables! node-ref current-color)
 
     ;; Updates color when pixel picker is used
     (mf/with-effect [picking-color? picked-color picked-color-select]
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 83d80dfc1..da7eb68c3 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -7,18 +7,20 @@
 (ns app.main.ui.workspace.tokens.form
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.ui.workspace.tokens.errors :as wte]
    ["lodash.debounce" :as debounce]
-   [app.common.colors :as cc]
+   [app.common.colors :as c]
    [app.common.data :as d]
    [app.main.data.modal :as modal]
    [app.main.data.tokens :as dt]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :refer [color-bullet]]
+   [app.main.ui.workspace.colorpicker :as colorpicker]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
    [app.main.ui.workspace.tokens.common :as tokens.common]
+   [app.main.ui.workspace.tokens.errors :as wte]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
+   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
@@ -26,8 +28,7 @@
    [malli.core :as m]
    [malli.error :as me]
    [promesa.core :as p]
-   [rumext.v2 :as mf]
-   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]))
+   [rumext.v2 :as mf]))
 
 ;; Schemas ---------------------------------------------------------------------
 
@@ -155,21 +156,30 @@ Token names should only contain letters and digits separated by . characters.")}
 
 (mf/defc ramp
   [{:keys [color on-change]}]
-  (let [dragging? (mf/use-state)
-        [r g b] (cc/hex->rgb color)
-        [h s v] (cc/hex->hsv color)
-        value (mf/use-state {:hex color
-                             :r r :g g :b b
-                             :h h :s s :v v})
-        on-change' (fn [color]
-                     (swap! value merge color)
-                     (when-not (and @dragging? (:hex color))
-                       (on-change (:hex color))))]
-    [:& ramp-selector {:color @value
-                       :disable-opacity true
-                       :on-start-drag #(reset! dragging? true)
-                       :on-finish-drag #(reset! dragging? false)
-                       :on-change on-change'}]))
+  (let [wrapper-node-ref (mf/use-ref nil)
+        dragging? (mf/use-state)
+        hex->value (fn [hex]
+                     (when-let [tc (tinycolor/valid-color hex)]
+                       (let [hex (str "#" (tinycolor/->hex tc))
+                             [r g b] (c/hex->rgb hex)
+                             [h s v] (c/hex->hsv hex)]
+                         {:hex hex
+                          :r r :g g :b b
+                          :h h :s s :v v
+                          :alpha 1})))
+        value (mf/use-state (hex->value color))
+        on-change' (fn [{:keys [hex]}]
+                     (reset! value (hex->value hex))
+                     (when-not (and @dragging? hex)
+                       (on-change hex)))]
+    (colorpicker/use-color-picker-css-variables! wrapper-node-ref @value)
+    [:div {:ref wrapper-node-ref}
+     [:& ramp-selector
+      {:color @value
+       :disable-opacity true
+       :on-start-drag #(reset! dragging? true)
+       :on-finish-drag #(reset! dragging? false)
+       :on-change on-change'}]]))
 
 (mf/defc token-value-or-errors
   [{:keys [result-or-errors]}]
@@ -343,8 +353,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                                                   [:div {:class (stl/css :color-bullet-placeholder)}])]))}]
       (when @color-ramp-open?
         [:& ramp {:color (some-> (or @token-resolve-result (:value token))
-                                 (tinycolor/valid-color)
-                                 (tinycolor/->hex))
+                                 (tinycolor/valid-color))
                   :on-change on-update-color}])
       [:& token-value-or-errors {:result-or-errors @token-resolve-result}]