diff --git a/common/app/common/pages.cljc b/common/app/common/pages.cljc
index 8fb0313b3..a976641ae 100644
--- a/common/app/common/pages.cljc
+++ b/common/app/common/pages.cljc
@@ -68,6 +68,8 @@
 (s/def :internal.shape/collapsed boolean?)
 (s/def :internal.shape/content any?)
 (s/def :internal.shape/fill-color string?)
+(s/def :internal.shape/fill-color-ref-file uuid?)
+(s/def :internal.shape/fill-color-ref-id uuid?)
 (s/def :internal.shape/fill-opacity number?)
 (s/def :internal.shape/font-family string?)
 (s/def :internal.shape/font-size number?)
@@ -83,6 +85,8 @@
 (s/def :internal.shape/rx number?)
 (s/def :internal.shape/ry number?)
 (s/def :internal.shape/stroke-color string?)
+(s/def :internal.shape/stroke-color-ref-file uuid?)
+(s/def :internal.shape/stroke-color-ref-id uuid?)
 (s/def :internal.shape/stroke-opacity number?)
 (s/def :internal.shape/stroke-style #{:solid :dotted :dashed :mixed :none})
 (s/def :internal.shape/stroke-width number?)
@@ -133,6 +137,8 @@
                    :internal.shape/collapsed
                    :internal.shape/content
                    :internal.shape/fill-color
+                   :internal.shape/fill-color-ref-file
+                   :internal.shape/fill-color-ref-id
                    :internal.shape/fill-opacity
                    :internal.shape/font-family
                    :internal.shape/font-size
@@ -152,6 +158,8 @@
                    :internal.shape/y
                    :internal.shape/exports
                    :internal.shape/stroke-color
+                   :internal.shape/stroke-color-ref-file
+                   :internal.shape/stroke-color-ref-id
                    :internal.shape/stroke-opacity
                    :internal.shape/stroke-style
                    :internal.shape/stroke-width
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 77d5bb0d3..19047e241 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -5,7 +5,7 @@
 // Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-.colorpicker-v2 {
+.colorpicker {
     display: flex;
     flex-direction: column;
     width: 13rem;
@@ -215,153 +215,16 @@
     }
 }
 
-.color-picker {
-  display: flex;
-  flex-direction: column;
-
-  .picker-area {
-    display: flex;
-
-    /* Common stuff */
-    .picker-wrapper,
-    .slide-wrapper {
-      position: relative;
-    }
-    .picker-indicator,
-    .slide-indicator {
-      position: absolute;
-      left: 0;
-      top: 0;
-      pointer-events: none;
-      transition: none;
-    }
-    .picker,
-    .slide {
-      cursor: crosshair;
-      svg {
-        transition: none;
-      }
-    }
-  }
-
-  .inputs-area {
-    display: flex;
-    justify-content: space-around;
-    width: 200px;
-
-    .row-flex{
-      margin: 0;
-    }
-
-    > input {
-      width: 50%;
-    }
-
-    .input-text {
-      color: $color-gray-60;
-      font-size: $fs13;
-      margin: 5px;
-      padding: 5px;
-      width: 100%;
-    }
-
-  }
-
-  span {
-    color: $color-gray-20;
-    font-size: $fs12;
-  }
-
-
-  /* Default skin */
-
-  &.theme-default {
-    padding: 4px;
-    border-radius: 2px;
-    width: 230px;
-
-    .picker {
-      width: 200px;
-      height: 200px;
-    }
-
-    .slide {
-      width: 20px;
-      height: 200px;
-    }
-    .slide-wrapper {
-      margin-left: 4px;
-    }
-    .picker-indicator {
-      width: 5px;
-      height: 5px;
-      border: 2px solid darkblue;
-      border-radius: 4px;
-      opacity: .5;
-      background-color: white;
-    }
-    .slide-indicator {
-      width: 28px;
-      height: 10px;
-      left: -4px;
-      opacity: .6;
-      border: 4px solid lightblue;
-      border-radius: 4px;
-      background-color: white;
-    }
-
-    .inputs-area {
-      width: 230px;
-    }
-
-  }
-
-  /* Small skin */
-
-  &.theme-small {
-    border-radius: 2px;
-
-    .picker {
-      width: 170px;
-      height: 170px;
-    }
-
-    .slide {
-      width: 20px;
-      height: 170px;
-    }
-    .slide-wrapper {
-      margin-left: 4px;
-    }
-    .picker-indicator {
-      width: 5px;
-      height: 5px;
-      border: 2px solid darkblue;
-      border-radius: 4px;
-      opacity: .5;
-      background-color: white;
-    }
-    .slide-indicator {
-      width: 28px;
-      height: 10px;
-      left: -4px;
-      opacity: .6;
-      border: 4px solid lightblue;
-      border-radius: 4px;
-      background-color: white;
-    }
-
-  }
-
-}
-
-/* NEW COLOR PICKER */
-/* color th */
 .color-data {
   align-items: center;
   display: flex;
   position: relative;
 
+  .color-name {
+      font-size: $fs13;
+      margin: 5px 6px 0px 6px;
+  }
+
   .color-info {
     input {
       background-color: $color-gray-50;
@@ -430,11 +293,3 @@
 
   }
 }
-
-.chrome-picker {
-  font-family: inherit !important;
-
-  input {
-    margin-bottom: auto;
-  }
-}
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index f2b401a15..e9dd091a9 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -11,8 +11,6 @@
   (:require
    [rumext.alpha :as mf]
    [app.main.store :as st]
-   [app.main.ui.colorpicker :as cp]
-
    [cuerdas.core :as str]
    [app.util.dom :as dom]
    [app.util.color :as uc]
@@ -97,8 +95,9 @@
                             :left (str (* opacity 100) "%")}}]]))
 
 (defn as-color-components [value opacity]
-  (let [[r g b] (uc/hex->rgb (or value "000000"))
-        [h s v] (uc/hex->hsv (or value "000000"))]
+  (let [value (if (uc/hex? value) value "#000000")
+        [r g b] (uc/hex->rgb value)
+        [h s v] (uc/hex->hsv value)]
     {:hex (or value "000000")
      :alpha (or opacity 1)
      :r r :g g :b b
@@ -137,11 +136,19 @@
     ;; Load library colors when the select is changed
     (mf/use-effect
      (mf/deps @selected-library)
-     (fn [] (cond
-              (= @selected-library "recent") (reset! current-library-colors (reverse (or recent-colors [])))
-              (= @selected-library "file") (reset! current-library-colors (into [] (map :value (vals file-colors))))
-              :else ;; Library UUID
-              (reset! current-library-colors (into [] (map :value (vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))))))
+     (fn []
+       (let [mapped-colors
+             (cond
+               (= @selected-library "recent")
+               (map #(hash-map :value %) (reverse (or recent-colors [])))
+
+               (= @selected-library "file")
+               (map #(select-keys % [:id :value]) (vals file-colors))
+
+               :else ;; Library UUID
+               (map #(merge {:file-id (uuid @selected-library)} (select-keys % [:id :value]))
+                    (vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))]
+         (reset! current-library-colors (into [] mapped-colors)))))
 
     ;; If the file colors change and the file option is selected updates the state
     (mf/use-effect
@@ -153,7 +160,7 @@
     (mf/use-effect
      (fn [] #(st/emit! (dwl/add-recent-color @value-ref))))
 
-    [:div.colorpicker-v2 {:ref ref-picker}
+    [:div.colorpicker {:ref ref-picker}
      [:& value-selector {:hue (:h @current-color)
                          :saturation (:s @current-color)
                          :value (:v @current-color)
@@ -285,18 +292,18 @@
        [:div.color-bullet.button {:style {:background-color "white"}}
         i/palette]
 
-       (for [[idx color] (map-indexed vector @current-library-colors)]
+       (for [[idx {:keys [id file-id value]}] (map-indexed vector @current-library-colors)]
          [:div.color-bullet {:key (str "color-" idx)
                              :on-click (fn []
-                                         (swap! current-color assoc :hex color)
-                                         (reset! value-ref color)
-                                         (let [[r g b] (uc/hex->rgb color)
-                                               [h s v] (uc/hex->hsv color)]
+                                         (swap! current-color assoc :hex value)
+                                         (reset! value-ref value)
+                                         (let [[r g b] (uc/hex->rgb value)
+                                               [h s v] (uc/hex->hsv value)]
                                            (swap! current-color assoc
                                                   :r r :g g :b b
                                                   :h h :s s :v v)
-                                           (on-change color (:alpha @current-color))))
-                             :style {:background-color color}}])]
+                                           (on-change value (:alpha @current-color) id file-id)))
+                             :style {:background-color value}}])]
 
       ]
      (when on-accept
@@ -319,13 +326,9 @@
     [:div.modal-overlay.transparent
      [:div.colorpicker-tooltip
       {:style (clj->js style)}
-      #_[:& cp/colorpicker {:value (or value default)
-                            :opacity (or opacity 1)
-                            :colors (into-array @cp/most-used-colors)
-                            :on-change on-change
-                            :disable-opacity disable-opacity}]
       [:& colorpicker {:value (or value default)
                        :opacity (or opacity 1)
                        :on-change on-change
                        :on-accept on-accept
                        :disable-opacity disable-opacity}]]]))
+
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index 0e3a6dbcf..f5eab6e80 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -20,7 +20,6 @@
    [app.main.data.workspace.libraries :as dwl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.colorpicker :refer [colorpicker most-used-colors]]
    [app.main.ui.components.context-menu :refer [context-menu]]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
@@ -40,33 +39,6 @@
    [okulary.core :as l]
    [rumext.alpha :as mf]))
 
-#_(mf/defc modal-edit-color
-  [{:keys [color-value on-accept on-cancel] :as ctx}]
-  (let [state (mf/use-state {:current-color color-value})]
-    (letfn [(accept [event]
-              (dom/prevent-default event)
-              (modal/hide!)
-              (when on-accept (on-accept (:current-color @state))))
-
-            (cancel [event]
-              (dom/prevent-default event)
-              (modal/hide!)
-              (when on-cancel (on-cancel)))]
-
-      [:div.modal-overlay.transparent
-        [:div.modal-create-color
-         [:h3.modal-create-color-title (tr "modal.create-color.new-color")]
-         [:& colorpicker {:value (:current-color @state)
-                          :colors (into-array @most-used-colors)
-                          :disable-opacity true
-                          :on-change #(swap! state assoc :current-color %)}]
-
-         [:input.btn-primary {:type "button"
-                              :value (tr "ds.button.save")
-                              :on-click accept}]
-
-         [:a.close {:href "#" :on-click cancel} i/close]]])))
-
 (mf/defc graphics-box
   [{:keys [file-id local? objects] :as props}]
   (let [input-ref  (mf/use-ref nil)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
index 40572ed25..eae18ec17 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
@@ -20,7 +20,7 @@
    [app.util.i18n :as i18n :refer [tr t]]
    [app.util.object :as obj]))
 
-(def fill-attrs [:fill-color :fill-opacity])
+(def fill-attrs [:fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file])
 
 (defn- fill-menu-props-equals?
   [np op]
@@ -52,7 +52,9 @@
                 (t locale "workspace.options.fill"))
 
         color {:value (:fill-color values)
-               :opacity (:fill-opacity values)}
+               :opacity (:fill-opacity values)
+               :id (:fill-color-ref-id values)
+               :file-id (:fill-color-ref-file values)}
 
         on-add
         (mf/use-callback
@@ -70,9 +72,11 @@
         on-change
         (mf/use-callback
          (mf/deps ids)
-         (fn [value opacity]
+         (fn [value opacity id file-id]
            (let [change #(cond-> %
-                           value (assoc :fill-color value)
+                           value (assoc :fill-color value
+                                        :fill-color-ref-id id
+                                        :fill-color-ref-file file-id)
                            opacity (assoc :fill-opacity opacity))
                  converted-attrs (cond-> {}
                                    value (assoc :fill value)
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 5db38a7cc..c8e387b6e 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
@@ -16,7 +16,8 @@
    [app.util.i18n :as i18n :refer [tr]]
    [app.main.ui.modal :as modal]
    [app.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
-   [app.common.data :as d]))
+   [app.common.data :as d]
+   [app.main.refs :as refs]))
 
 (defn color-picker-callback
   [color handle-change-color disable-opacity]
@@ -56,8 +57,18 @@
 (defn remove-multiple [v]
   (if (= v :multiple) nil v))
 
-(mf/defc color-row [{:keys [color on-change disable-opacity]}]
-  (let [default-color {:value "#000000" :opacity 1}
+(mf/defc color-row
+  [{:keys [color on-change disable-opacity]}]
+  (let [;;
+        file-colors (mf/deref refs/workspace-file-colors)
+        shared-libs (mf/deref refs/workspace-libraries)
+
+        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}
 
         parse-color (fn [color]
                       (-> (merge default-color color)
@@ -77,9 +88,9 @@
                          (swap! state assoc :opacity new-opacity)
                          (when on-change (on-change (remove-multiple value) new-opacity)))
 
-        handle-pick-color (fn [new-value new-opacity]
+        handle-pick-color (fn [new-value new-opacity id file-id]
                             (reset! state {:value new-value :opacity new-opacity})
-                            (when on-change (on-change new-value new-opacity)))
+                            (when on-change (on-change new-value new-opacity id file-id)))
 
         handle-value-change (fn [event]
                               (let [target (dom/get-target event)]
@@ -107,16 +118,20 @@
 
     [:div.row-flex.color-data
      [:span.color-th
-      {:style {:background-color (-> value value-to-background)}
+      {:style {:background-color (-> value value-to-background)
+               :border-radius (if (:id color) "10px" "inherit")}
        :on-click (color-picker-callback @state handle-pick-color disable-opacity)}
       (when (= value :multiple) "?")]
 
-     [:div.color-info
-      [:input {:value (-> value remove-hash)
-               :pattern "^[0-9a-fA-F]{0,6}$"
-               :placeholder (tr "settings.multiple")
-               :on-click select-all
-               :on-change handle-value-change}]]
+     (if (:id color)
+       [:div.color-info
+        [:div.color-name (str (get-color-name color))]]
+       [:div.color-info
+        [:input {:value (-> value remove-hash)
+                 :pattern "^[0-9a-fA-F]{0,6}$"
+                 :placeholder (tr "settings.multiple")
+                 :on-click select-all
+                 :on-change handle-value-change}]])
 
      (when (not disable-opacity)
        [:div.input-element
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
index dda7ac088..08fffd164 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
@@ -17,7 +17,6 @@
    [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.main.ui.modal :as modal]
-   [app.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
    [app.util.data :refer [classnames]]
    [app.util.dom :as dom]
@@ -29,6 +28,8 @@
    :stroke-alignment
    :stroke-width
    :stroke-color
+   :stroke-color-ref-id
+   :stroke-color-ref-file
    :stroke-opacity])
 
 (defn- stroke-menu-props-equals?
@@ -73,13 +74,17 @@
         show-options (not= (or (:stroke-style values) :none)  :none)
 
         current-stroke-color {:value (:stroke-color values)
-                              :opacity (:stroke-opacity values)}
+                              :opacity (:stroke-opacity values)
+                              :id (:stroke-color-ref-id values)
+                              :file-id (:stroke-color-ref-file values)}
 
         handle-change-stroke-color
-        (fn [value opacity]
+        (fn [value opacity id file-id]
           (let [change #(cond-> %
-                         value (assoc :stroke-color value)
-                         opacity (assoc :stroke-opacity opacity))]
+                          value (assoc :stroke-color value
+                                       :stroke-color-ref-id id
+                                       :stroke-color-ref-file file-id)
+                          opacity (assoc :stroke-opacity opacity))]
             (st/emit! (dwc/update-shapes ids change))))
 
         on-stroke-style-change