diff --git a/frontend/uxbox/ui/workspace/options.cljs b/frontend/uxbox/ui/workspace/options.cljs
index c61106c14..9194c62e2 100644
--- a/frontend/uxbox/ui/workspace/options.cljs
+++ b/frontend/uxbox/ui/workspace/options.cljs
@@ -64,6 +64,12 @@
       [:div.element-set-content
        ;; SLIDEBAR FOR ROTATION AND OPACITY
        [:span "Color"]
+       [:div.element-color-picker
+        [:div.color-picker-body
+          [:img {:src "images/color-gamma.png", :border "none"}]]
+        [:div.color-picker-bar
+          [:div.color-bar-select]
+          [:img {:src "images/color-bar.png", :border "none"}]]]
        [:div.row-flex
         [:input#width.input-text
          {:placeholder "#"
@@ -184,5 +190,3 @@
    {:render element-opts-render
     :name "element-opts"
     :mixins [rum/reactive (mx/local {})]}))
-
-
diff --git a/resources/public/images/color-bar.png b/resources/public/images/color-bar.png
new file mode 100644
index 000000000..70dad5429
Binary files /dev/null and b/resources/public/images/color-bar.png differ
diff --git a/resources/public/images/color-gamma.png b/resources/public/images/color-gamma.png
new file mode 100644
index 000000000..f0132e1fe
Binary files /dev/null and b/resources/public/images/color-gamma.png differ
diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/element-options.scss
index 24a7ce051..5eb453c77 100644
--- a/resources/public/styles/partials/element-options.scss
+++ b/resources/public/styles/partials/element-options.scss
@@ -204,3 +204,26 @@
     }
   }
 }
+
+.element-color-picker {
+  align-items: center;
+  display: flex;
+  height: 160px;
+  margin: 0 4px;
+  .color-picker-body {
+    height: 100%;
+    margin-right: 15px;
+  }
+  .color-picker-bar {
+    height: 100%;
+    padding: relative;
+    width: 15px;
+    .color-bar-select {
+      background-color: $color-white;
+      height: 3px;
+      position: absolute;
+      width: 15px;
+      top: 30%;
+    }
+  }
+}