diff --git a/frontend/package.json b/frontend/package.json
index c7d620fc8..047329918 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -116,6 +116,7 @@
     "source-map-support": "^0.5.21",
     "style-dictionary": "patch:style-dictionary@npm%3A4.0.0-prerelease.36#~/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch",
     "tdigest": "^0.1.2",
+    "tinycolor2": "npm:^1.6.0",
     "ua-parser-js": "^1.0.38",
     "xregexp": "^5.1.1"
   }
diff --git a/frontend/src/app/main/ui/workspace/tokens/tinycolor.cljs b/frontend/src/app/main/ui/workspace/tokens/tinycolor.cljs
new file mode 100644
index 000000000..99fd64f84
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/tinycolor.cljs
@@ -0,0 +1,26 @@
+(ns app.main.ui.workspace.tokens.tinycolor
+  "Bindings for tinycolor2 which supports a wide range of css compatible colors.
+
+  Used by StyleDictionary, so we might as well use it directly."
+  (:require
+   ["tinycolor2" :as tinycolor]))
+
+(defn tinycolor? [x]
+  (and (instance? tinycolor x) (.isValid x)))
+
+(defn valid-color [color-str]
+  (let [tc (tinycolor color-str)]
+    (when (.isValid tc) tc)))
+
+(defn ->hex [tc]
+  (assert (tinycolor? tc))
+  (.toHex tc))
+
+(defn color-format [tc]
+  (assert (tinycolor? tc))
+  (.getFormat tc))
+
+(comment
+  (some-> (valid-color "red") ->hex)
+  (some-> (valid-color "red") color-format)
+  nil)
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index ebde9b8cf..b13ad3a1a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -6966,6 +6966,7 @@ __metadata:
     style-dictionary: "patch:style-dictionary@npm%3A4.0.0-prerelease.36#~/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch"
     svg-sprite: "npm:^2.0.4"
     tdigest: "npm:^0.1.2"
+    tinycolor2: "npm:^1.6.0"
     typescript: "npm:^5.4.5"
     ua-parser-js: "npm:^1.0.38"
     vite: "npm:^5.1.4"