diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs
index c3d65e6c95..ce119886fc 100644
--- a/frontend/src/app/main/data/colors.cljs
+++ b/frontend/src/app/main/data/colors.cljs
@@ -120,19 +120,19 @@
              is-text? #(= :text (:type (get objects %)))
              text-ids (filter is-text? ids)
              shape-ids (filter (comp not is-text?) ids)
-             update-fn (fn [shape] (assoc shape
-                                          :fill-color color
-                                          :fill-opacity opacity
-                                          :fill-color-ref-id id
-                                          :fill-color-ref-file file-id))
-             editor (get-in state [:workspace-local :editor])
-             converted-attrs {:fill color}
 
+             attrs (cond-> {:fill-color color
+                            :fill-color-ref-id id
+                            :fill-color-ref-file file-id}
+                     (and opacity (not= opacity :multiple)) (assoc :fill-opacity opacity))
+
+             update-fn (fn [shape] (merge shape attrs))
+             editors (get-in state [:workspace-local :editors])
              reduce-fn (fn [state id]
                          (update-in state [:workspace-data :pages-index pid :objects id]  update-fn))]
 
          (rx/from (conj
-                   (map #(dwt/update-text-attrs {:id % :editor editor :attrs converted-attrs}) text-ids)
+                   (map #(dwt/update-text-attrs {:id % :editor (get editors %) :attrs attrs}) text-ids)
                    (dwc/update-shapes shape-ids update-fn))))))))
 
 (defn change-stroke [ids color id file-id]
diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs
index 3a67ed4ae8..05707f50b9 100644
--- a/frontend/src/app/main/ui/shapes/text.cljs
+++ b/frontend/src/app/main/ui/shapes/text.cljs
@@ -17,6 +17,7 @@
    [app.common.geom.shapes :as geom]
    [app.common.geom.matrix :as gmt]
    [app.util.object :as obj]
+   [app.util.color :as uc]
    [app.util.text :as ut]))
 
 ;; --- Text Editor Rendering
@@ -60,13 +61,22 @@
 
         font-family (obj/get data "font-family")
         font-size  (obj/get data "font-size")
+
+        ;; Old properties for backwards compatibility
         fill (obj/get data "fill")
-        opacity (obj/get data "opacity")
+        opacity (obj/get data "opacity" 1)
+
+        fill-color (obj/get data "fill-color" fill)
+        fill-opacity (obj/get data "fill-opacity" opacity)
+        fill-color-ref-id (obj/get data "fill-color-ref-id")
+        fill-color-ref-file (obj/get data "fill-color-ref-file")
+
+        [r g b a] (uc/hex->rgba fill-color fill-opacity)
+
         fontsdb (deref fonts/fontsdb)
 
         base #js {:textDecoration text-decoration
-                  :color fill
-                  :opacity opacity
+                  :color (str/format "rgba(%s, %s, %s, %s)" r g b a)
                   :textTransform text-transform
                   :lineHeight (or line-height "inherit")}]
 
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index a92ed60639..b2d357217f 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -318,7 +318,9 @@
                            :min 0
                            :step 0.1
                            :max 1
-                           :value (math/precision (:alpha @current-color) 2)
+                           :value (if (= (:alpha @current-color) :multiple)
+                                    ""
+                                    (math/precision (:alpha @current-color) 2))
                            :on-change (fn [e]
                                         (let [val (-> e dom/get-target dom/get-value (math/clamp 0 1))]
                                           (swap! current-color assoc :alpha val)
diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs
index 0dca22b442..d391181fa1 100644
--- a/frontend/src/app/main/ui/workspace/shapes/text.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs
@@ -31,6 +31,7 @@
    [app.util.text :as ut]
    [app.common.geom.shapes :as geom]
    [app.util.object :as obj]
+   [app.util.color :as uc]
    [app.util.timers :as timers]
    ["slate" :as slate]
    ["slate-react" :as rslate])
@@ -141,13 +142,22 @@
 
         font-family (obj/get data "font-family")
         font-size  (obj/get data "font-size")
+
+        ;; Old properties for backwards compatibility
         fill (obj/get data "fill")
-        opacity (obj/get data "opacity")
+        opacity (obj/get data "opacity" 1)
+
+        fill-color (obj/get data "fill-color" fill)
+        fill-opacity (obj/get data "fill-opacity" opacity)
+        fill-color-ref-id (obj/get data "fill-color-ref-id")
+        fill-color-ref-file (obj/get data "fill-color-ref-file")
+
+        [r g b a] (uc/hex->rgba fill-color fill-opacity)
+
         fontsdb (deref fonts/fontsdb)
 
         base #js {:textDecoration text-decoration
-                  :color fill
-                  :opacity opacity
+                  :color (str/format "rgba(%s, %s, %s, %s)" r g b a)
                   :textTransform text-transform
                   :lineHeight (or line-height "inherit")}]
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs
index b4f544b084..b13a69acbf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs
@@ -50,8 +50,7 @@
                                            extract-fn))]
                     (geom/get-attrs-multi (map mapfn shapes) (or attrs text-attrs))))
 
-        measure-values
-        (geom/get-attrs-multi shapes measure-attrs)
+        measure-values (geom/get-attrs-multi shapes measure-attrs)
 
         fill-values (extract {:attrs fill-attrs
                               :text-attrs ot/text-fill-attrs
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index f039df99ff..3965cb3376 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -67,7 +67,6 @@
         get-color-name (fn [{:keys [id file-id]}]
                          (let [src-colors (if file-id (get-in shared-libs [file-id :data :colors]) file-colors)]
                            (get-in src-colors [id :name])))
-        ;;
 
         default-color {:value "#000000" :opacity 1}
 
@@ -120,11 +119,10 @@
     (mf/use-effect
      (mf/deps color)
      #(reset! state (parse-color color)))
-        ;; is this necessary?
 
     [:div.row-flex.color-data
      [:span.color-th
-      {:class (when (:id color) "color-name")
+      {:class (when (and (:id color) (not= (:id color) :multiple)) "color-name")
        :style {:background-color (-> value value-to-background)}
        :on-click (color-picker-callback @state handle-pick-color handle-open handle-close disable-opacity)}
       (when (= value :multiple) "?")]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
index 8ad4b4e72b..5a324a0f62 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
@@ -32,7 +32,7 @@
    ["slate" :refer [Transforms]]))
 
 (def text-typography-attrs [:typography-ref-id :typography-ref-file])
-(def text-fill-attrs [:fill :opacity])
+(def text-fill-attrs [:fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file :fill :opacity ])
 (def text-font-attrs [:font-id :font-family :font-variant-id :font-size :font-weight :font-style])
 (def text-align-attrs [:text-align])
 (def text-spacing-attrs [:line-height :letter-spacing])
@@ -290,8 +290,10 @@
                       :shape shape
                       :attrs text-fill-attrs})
 
-        converted-fill-values {:fill-color (:fill fill-values)
-                               :fill-opacity (:opacity fill-values)}
+        fill-values (cond-> fill-values
+                      ;; Keep for backwards compatibility
+                      (:fill fill-values) (assoc :fill-color (:fill fill-values))
+                      (:opacity fill-values) (assoc :fill-opacity (:fill fill-values)))
 
         text-values (merge
                      (dwt/current-root-values
@@ -310,7 +312,7 @@
                         :values measure-values}]
      [:& fill-menu {:ids ids
                     :type type
-                    :values converted-fill-values
+                    :values fill-values
                     :editor editor}]
      [:& shadow-menu {:ids ids
                       :type type