diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 9240d62c3..b76b8e1df 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -71,9 +71,8 @@
       :on-click on-click
       :on-context-menu on-context-menu
       :disabled errors?}
-     (js/console.log "resolved-value" resolved-value)
-     (when (wtt/color-token? token)
-       [:& color-bullet {:color (wtt/resolved-value-hex token)
+     (when-let [color (wtt/resolved-value-hex token)]
+       [:& color-bullet {:color color
                          :mini? true}])
      name]))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/token.cljs b/frontend/src/app/main/ui/workspace/tokens/token.cljs
index 6ddd84f22..5a6470349 100644
--- a/frontend/src/app/main/ui/workspace/tokens/token.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/token.cljs
@@ -2,7 +2,8 @@
   (:require
    [app.common.data :as d]
    [clojure.set :as set]
-   [cuerdas.core :as str]))
+   [cuerdas.core :as str]
+   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]))
 
 (defn get-workspace-tokens
   [state]
@@ -199,4 +200,6 @@
 
 (defn resolved-value-hex [{:keys [resolved-value] :as token}]
   (when (and resolved-value (color-token? token))
-    (str "#" resolved-value)))
+    (some->> (tinycolor/valid-color resolved-value)
+             (tinycolor/->hex)
+             (str "#"))))