diff --git a/frontend/src/app/main/ui/inspect/common/colors.cljs b/frontend/src/app/main/ui/inspect/common/colors.cljs
index 43b834ebfd..6e7a9543c7 100644
--- a/frontend/src/app/main/ui/inspect/common/colors.cljs
+++ b/frontend/src/app/main/ui/inspect/common/colors.cljs
@@ -6,6 +6,8 @@
 
 (ns app.main.ui.inspect.common.colors
   (:require
+   [app.common.data.macros :as dm]
+   [app.common.types.color :as cc]
    [app.main.store :as st]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -25,3 +27,13 @@
   (let [library (mf/with-memo [ref-file]
                   (make-colors-library-ref :files ref-file))]
     (mf/deref library)))
+
+(defn color->color-space->css-format
+  [color opacity color-space]
+  (case color-space
+    "hex"  color
+    "rgba" (let [[r g b a] (cc/hex->rgba color opacity)]
+             (dm/str "rgba(" (cc/format-rgba [r g b a]) ")"))
+    "hsla" (let [[h s l a] (cc/hex->hsla color opacity)]
+             (dm/str "hsla(" (cc/format-hsla [h s l a]) ")"))
+    (:color color)))
diff --git a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs
index 3b8272c5e0..64241192eb 100644
--- a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs
+++ b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs
@@ -14,6 +14,7 @@
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.tooltip :refer [tooltip*]]
    [app.main.ui.formats :as fmt]
+   [app.main.ui.inspect.common.colors :as isc]
    [app.main.ui.inspect.styles.property-detail-copiable :refer [property-detail-copiable*]]
    [app.util.color :as uc]
    [app.util.i18n :refer [tr]]