diff --git a/web_widget_color/README.rst b/web_widget_color/README.rst
index a163f899..ad79a61a 100644
--- a/web_widget_color/README.rst
+++ b/web_widget_color/README.rst
@@ -87,6 +87,7 @@ Contributors
 ------------
 
 * Adil Houmadi <adil.houmadi@gmail.com>
+* Nicolas JEUDY (Sudokeys) <https://www.github.com/njeudy>
 
 Maintainer
 ----------
diff --git a/web_widget_color/__openerp__.py b/web_widget_color/__openerp__.py
index 50838cc8..74e7a798 100644
--- a/web_widget_color/__openerp__.py
+++ b/web_widget_color/__openerp__.py
@@ -30,6 +30,7 @@
     "author": "Savoir-faire Linux, "
               "Anybox, "
               "Taktik SA, "
+              "Sudokeys, "
               "Odoo Community Association (OCA)",
     'depends': ['base', 'web'],
     'data': [
diff --git a/web_widget_color/static/src/css/widget.css b/web_widget_color/static/src/css/widget.css
index 06201af1..9a701ad1 100644
--- a/web_widget_color/static/src/css/widget.css
+++ b/web_widget_color/static/src/css/widget.css
@@ -21,3 +21,10 @@
     top: 3px;
     width: 40px;
 }
+
+.color_box {
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    margin-right: 5px;
+}
diff --git a/web_widget_color/static/src/js/widget.js b/web_widget_color/static/src/js/widget.js
index 5c2d2c21..aad55279 100644
--- a/web_widget_color/static/src/js/widget.js
+++ b/web_widget_color/static/src/js/widget.js
@@ -1,4 +1,12 @@
-openerp.web_widget_color = function (instance) {
+odoo.define('web.web_widget_color', function(require) {
+    "use strict";
+
+    var core = require('web.core');
+    var widget = require('web.form_widgets');
+    var FormView = require('web.FormView');
+
+    var QWeb = core.qweb;
+    var _lt = core._lt;
 
     var _super_getDir = jscolor.getDir.prototype;
     jscolor.getDir = function () {
@@ -9,9 +17,7 @@ openerp.web_widget_color = function (instance) {
         return jscolor.dir;
     };
 
-    instance.web.form.widgets.add('color', 'instance.web.form.FieldColor');
-
-    instance.web.form.FieldColor = instance.web.form.FieldChar.extend({
+    var FieldColor = widget.FieldChar.extend({
         template: 'FieldColor',
         widget_class: 'oe_form_field_color',
         is_syntax_valid: function () {
@@ -31,6 +37,21 @@ openerp.web_widget_color = function (instance) {
             }
             return true;
         },
+        store_dom_value: function() {
+            if (!this.silent) {
+                if (!this.get('effective_readonly') &&
+                    this.$('input').val() !== '' &&
+                    this.is_syntax_valid()) {
+                    // We use internal_set_value because we were called by
+                    // ``.commit_value()`` which is called by a ``.set_value()``
+                    // itself called because of a ``onchange`` event
+                    this.internal_set_value(
+                        this.parse_value(
+                            this.$('input').val())
+                        );
+                }
+            }
+            },
         render_value: function () {
             var show_value = this.format_value(this.get('value'), '');
             if (!this.get("effective_readonly")) {
@@ -45,13 +66,19 @@ openerp.web_widget_color = function (instance) {
         }
     });
 
+    core.form_widget_registry.add('color', FieldColor);
+
     /*
      * Init jscolor for each editable mode on view form
      */
-    instance.web.FormView.include({
+    FormView.include({
         to_edit_mode: function () {
             this._super();
             jscolor.init(this.$el[0]);
         }
     });
-};
+
+    return {
+        FieldColor: FieldColor
+    };
+});
diff --git a/web_widget_color/static/src/xml/widget.xml b/web_widget_color/static/src/xml/widget.xml
index c62ae1cf..82c043b4 100644
--- a/web_widget_color/static/src/xml/widget.xml
+++ b/web_widget_color/static/src/xml/widget.xml
@@ -19,6 +19,6 @@
         </span>
     </t>
     <tr t-extend="ListView.row">
-        <t t-jquery="t td t" t-operation="replace"><t t-if="column.widget =='color' || column.type == 'color'"><div t-att-style="'background-color:' + render_cell(record, column)"/></t><t t-raw="render_cell(record, column)"/></t>
+        <t t-jquery="t td t" t-operation="replace"><t t-if="column.widget =='color' || column.type == 'color'"><div class="color_box" t-att-style="'background-color:' + render_cell(record, column)"/></t><t t-raw="render_cell(record, column)"/></t>
     </tr>
 </templates>