From 54e7e44df1cedeb41f6c6baea6b5181a3124a854 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 6 Oct 2021 16:06:51 +0200
Subject: [PATCH] :bug: Allow three character hex and web colors in color
 picker hex input

---
 CHANGES.md                                    |  1 +
 .../workspace/colorpicker/color_inputs.cljs   | 29 ++++++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 552eb693b..4b266063b 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -19,6 +19,7 @@
 - Fix text editor enter behaviour with centered texts [Taiga #2126](https://tree.taiga.io/project/penpot/issue/2126)
 - Fix residual stroke on imported svg [Taiga #2125](https://tree.taiga.io/project/penpot/issue/2125)
 - Add links for terms of service and privacy policy in register checkbox [Taiga #2020](https://tree.taiga.io/project/penpot/issue/2020)
+- Allow three character hex and web colors in color picker hex input [#1184](https://github.com/penpot/penpot/issues/1184)
 
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
index ed86777bd..00a0c7851 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
@@ -27,15 +27,27 @@
               :v     (mf/use-ref nil)
               :alpha (mf/use-ref nil)}
 
+        setup-hex-color
+        (fn [hex]
+          (let [[r g b] (uc/hex->rgb hex)
+                [h s v] (uc/hex->hsv hex)]
+            (on-change {:hex hex
+                        :h h :s s :v v
+                        :r r :g g :b b})))
         on-change-hex
         (fn [e]
           (let [val (-> e dom/get-target-val parse-hex)]
             (when (uc/hex? val)
-              (let [[r g b] (uc/hex->rgb val)
-                    [h s v] (uc/hex->hsv hex)]
-                (on-change {:hex val
-                            :h h :s s :v v
-                            :r r :g g :b b})))))
+              (setup-hex-color val))))
+
+        on-blur-hex
+        (fn [e]
+          (let [val (-> e dom/get-target-val)
+                val (cond
+                      (uc/color? val) (uc/parse-color val)
+                      (uc/hex? (parse-hex val)) (parse-hex val))]
+            (when (some? val)
+              (setup-hex-color val))))
 
         on-change-property
         (fn [property max-value]
@@ -81,9 +93,10 @@
     [:div.color-values
      {:class (when disable-opacity "disable-opacity")}
      [:input {:id "hex-value"
-                        :ref (:hex refs)
-                        :default-value hex
-                        :on-change on-change-hex}]
+              :ref (:hex refs)
+              :default-value hex
+              :on-change on-change-hex
+              :on-blur on-blur-hex}]
 
      (if (= type :rgb)
        [:*