diff --git a/web_widget_color/static/src/js/widget.js b/web_widget_color/static/src/js/widget.js
index 44299752..488a8b88 100644
--- a/web_widget_color/static/src/js/widget.js
+++ b/web_widget_color/static/src/js/widget.js
@@ -18,7 +18,7 @@ openerp.web_widget_color = function (instance) {
         widget_class: 'oe_form_field_color',
         is_syntax_valid: function () {
             var $input = this.$('input');
-            if (!this.get("effective_readonly") && $input.size() > 0) {
+            if (!this.get("effective_readonly") && $input.size() > 0 && $input.val()) {
                 var val = $input.val();
                 var isOk = /^#[0-9A-F]{6}$/i.test(val);
                 if (!isOk) {
diff --git a/web_widget_color/static/src/xml/widget.xml b/web_widget_color/static/src/xml/widget.xml
index c62ae1cf..79c9ad74 100644
--- a/web_widget_color/static/src/xml/widget.xml
+++ b/web_widget_color/static/src/xml/widget.xml
@@ -9,7 +9,7 @@
                        t-att-autofocus="widget.node.attrs.autofocus"
                        t-att-placeholder="widget.node.attrs.placeholder"
                        t-att-maxlength="widget.field.size"
-                       class="color {hash:true}"
+                       class="color {hash:true, required:false}"
                         />
             </t>
             <t t-if="widget.get('effective_readonly')">