diff --git a/common/uxbox/common/spec.cljc b/common/uxbox/common/spec.cljc
index bb3382902..569a35cfd 100644
--- a/common/uxbox/common/spec.cljc
+++ b/common/uxbox/common/spec.cljc
@@ -75,7 +75,7 @@
 
 (defn- color-conformer
   [v]
-  (if (and (string? v) (re-matches #"^#[0-9A-Fa-f]{6}$" v))
+  (if (and (string? v) (re-matches #"^#(?:[0-9a-fA-F]{3}){1,2}$" v))
     v
     ::s/invalid))
 
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 5abc8c6e6..05c8119a5 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -168,6 +168,11 @@
         border-color: $color-primary;
         color: $color-white;
       }
+
+      &:invalid {
+        border-color: $color-danger;
+      }
+
     }
   }
 
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
index 1364e659b..2e991cb9b 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
@@ -28,6 +28,13 @@
         (fn [color]
           (st/emit! (udw/update-shape (:id shape) {:fill-color color})))
 
+        on-color-input-change
+        (fn [event]
+          (let [input (dom/get-target event)
+                value (dom/get-value input)]
+            (when (dom/valid? input)
+              (on-color-change value))))
+
         on-opacity-change
         (fn [event]
           (let [value (-> (dom/get-target event)
@@ -57,9 +64,9 @@
          :on-click show-color-picker}]
 
        [:div.color-info
-        [:input {:read-only true
-                 :key (:fill-color shape)
-                 :default-value (:fill-color shape)}]]
+        [:input {:default-value (:fill-color shape)
+                 :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
+                 :on-change on-color-input-change}]]
 
        [:div.input-element.percentail
         [:input.input-text {:type "number"
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
index 22776af74..1c1f3296f 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
@@ -55,11 +55,12 @@
         (fn [color]
           (st/emit! (dw/update-options {:grid-color color})))
 
-        on-color-change
+        on-color-input-change
         (fn [event]
-          (let [value (-> (dom/get-target event)
-                          (dom/get-value))]
-            (change-color value)))
+          (let [input (dom/get-target event)
+                value (dom/get-value input)]
+            (when (dom/valid? input)
+              (change-color value))))
 
         show-color-picker
         (fn [event]
@@ -89,8 +90,9 @@
        [:span.color-th {:style {:background-color (:grid-color options)}
                         :on-click show-color-picker}]
        [:div.color-info
-        [:input {:on-change on-color-change
-                 :value (:grid-color options)}]]]]]))
+        [:input {:default-value (:grid-color options)
+                 :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
+                 :on-change on-color-input-change}]]]]]))
 
 (mf/defc options
   [{:keys [page] :as props}]
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
index 8fa27008f..ec28a6515 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
@@ -57,6 +57,17 @@
                           (/ 100))]
             (st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
 
+        on-color-change
+        (fn [color]
+          (st/emit! (udw/update-shape (:id shape) {:stroke-color color})))
+
+        on-color-input-change
+        (fn [event]
+          (let [input (dom/get-target event)
+                value (dom/get-value input)]
+            (when (dom/valid? input)
+              (on-color-change value))))
+
         show-color-picker
         (fn [event]
           (let [x (.-clientX event)
@@ -64,7 +75,7 @@
                 props {:x x :y y
                        :default "#ffffff"
                        :value (:stroke-color shape)
-                       :on-change #(st/emit! (udw/update-shape (:id shape) {:stroke-color %}))
+                       :on-change on-color-change
                        :transparent? true}]
             (modal/show! colorpicker-modal props)))]
 
@@ -81,9 +92,9 @@
          [:span.color-th {:style {:background-color (:stroke-color shape)}
                           :on-click show-color-picker}]
          [:div.color-info
-          [:input {:read-only true
-                   :key (:stroke-color shape)
-                   :default-value (:stroke-color shape)}]]
+          [:input {:default-value (:stroke-color shape)
+                   :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
+                   :on-change on-color-input-change}]]
 
          [:div.input-element.percentail
           [:input.input-text {:placeholder ""
diff --git a/frontend/src/uxbox/util/dom.cljs b/frontend/src/uxbox/util/dom.cljs
index 50b71a48e..00583aea7 100644
--- a/frontend/src/uxbox/util/dom.cljs
+++ b/frontend/src/uxbox/util/dom.cljs
@@ -85,11 +85,18 @@
   (.-files node))
 
 (defn checked?
-  "Check if the node that reprsents a radio
+  "Check if the node that represents a radio
   or checkbox is checked or not."
   [node]
   (.-checked node))
 
+(defn valid?
+  "Check if the node that is a form input
+  has a valid value, against html5 form validation
+  properties (required, min/max, pattern...)."
+  [node]
+  (.-valid (.-validity node)))
+
 (defn clean-value!
   [node]
   (set! (.-value node) ""))