diff --git a/web_tree_dynamic_colored_field/__manifest__.py b/web_tree_dynamic_colored_field/__manifest__.py
index 0ca070b45..2e68af151 100644
--- a/web_tree_dynamic_colored_field/__manifest__.py
+++ b/web_tree_dynamic_colored_field/__manifest__.py
@@ -11,6 +11,7 @@
     'website': 'https://github.com/OCA/web',
     'demo': [
         "demo/res_users.xml",
+        "demo/ir_translation.xml",
     ],
     'data': [
         'views/web_tree_dynamic_colored_field.xml',
diff --git a/web_tree_dynamic_colored_field/demo/ir_translation.xml b/web_tree_dynamic_colored_field/demo/ir_translation.xml
new file mode 100644
index 000000000..a78b087b5
--- /dev/null
+++ b/web_tree_dynamic_colored_field/demo/ir_translation.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+
+    <record model="ir.ui.view" id="view_translation_tree_view">
+        <field name="name">ir.translation.tree#demo@web_tree_dynamic_colored_field</field>
+        <field name="model">ir.translation</field>
+        <field name="inherit_id" ref="base.view_translation_tree"/>
+        <field name="arch" type="xml">
+            <tree position="attributes">
+                <attribute name="colors">color_field: value; bgcolor_field: source</attribute>
+            </tree>
+        </field>
+    </record>
+
+    <!-- Create fake translation for demoing  -->
+    <record id="colored_sample_1" model="ir.translation">
+        <field name="name">Light Green</field>
+        <field name="source">#90ffb1</field>
+        <field name="value">yellow</field>
+    </record>
+
+    <!-- Create fake translation for demoing  -->
+    <record id="colored_sample_2" model="ir.translation">
+        <field name="name">Light Red</field>
+        <field name="source">#ffb0ba</field>
+        <field name="value">blue</field>
+    </record>
+
+</odoo>
diff --git a/web_tree_dynamic_colored_field/readme/DESCRIPTION.rst b/web_tree_dynamic_colored_field/readme/DESCRIPTION.rst
index c3f632caa..4e68ec02d 100644
--- a/web_tree_dynamic_colored_field/readme/DESCRIPTION.rst
+++ b/web_tree_dynamic_colored_field/readme/DESCRIPTION.rst
@@ -12,4 +12,5 @@ Features
 
 * Add attribute ``bg_color`` on field's ``options`` to color background of a cell in tree view
 * Add attribute ``fg_color`` on field's ``options`` to change text color of a cell in tree view
-* Add attribute ``color_field`` on the tree element's ``colors`` to use as color
+* Add attribute ``color_field`` on the tree element's ``colors`` to use as text color
+* Add attribute ``bg_color_field`` on the tree element's ``colors`` to use as background color
diff --git a/web_tree_dynamic_colored_field/readme/USAGE.rst b/web_tree_dynamic_colored_field/readme/USAGE.rst
index 251009474..33f64baa7 100644
--- a/web_tree_dynamic_colored_field/readme/USAGE.rst
+++ b/web_tree_dynamic_colored_field/readme/USAGE.rst
@@ -30,9 +30,10 @@
 
     ...
     <field name="arch" type="xml">
-        <tree string="View name" colors="color_field: my_color" >
+        <tree string="View name" colors="color_field: my_color; bg_color_field: my_background_color" >
             ...
             <field name="my_color" invisible="1"/>
+            <field name="my_background_color" invisible="1"/>
             ...
         </tree>
     </field>
diff --git a/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js b/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js
index 50267976e..66ef20fd5 100644
--- a/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js
+++ b/web_tree_dynamic_colored_field/static/src/js/web_tree_dynamic_colored_field.js
@@ -13,20 +13,25 @@ odoo.define('web_tree_dynamic_colored_field', function (require) {
         _renderBody: function () {
             if (this.arch.attrs.colors) {
                 var colorAttr = this.arch.attrs.colors.split(';');
-                if (colorAttr.length > 0) {
-                    var colorType = colorAttr[0].split(':')[0].trim()
-                    var colorField = colorAttr[0].split(':')[1].trim();
-                    // validate the presence of that field in tree view
-                    if (this.state.data.length && colorField in this.state.data[0].data) {
-                        if (colorType === "color_field") {
-                            this.colorField = colorField;
-                        } else if (colorType === "bg_color_field") {
-                            this.bgColorField = colorField;
+                for (var i=0, len=colorAttr.length; i<len; i++) {
+                    var attr = colorAttr[i].split(':')
+                    if (attr.length == 2) {
+                        var colorType = attr[0].trim()
+                        var colorField = attr[1].trim();
+                        // validate the presence of that field in tree view
+                        if (this.state.data.length && colorField in this.state.data[0].data) {
+                            if (colorType === "color_field") {
+                                this.colorField = colorField;
+                            } else if (colorType === "bg_color_field") {
+                                this.bgColorField = colorField;
+                            }
+                        } else {
+                            console.warn(
+                                "No field named '" + colorField + "' present in view."
+                            );
                         }
                     } else {
-                        console.warn(
-                            "No field named '" + colorField + "' present in view."
-                        );
+                        console.warn("Invalid colors attribute:", attr);
                     }
                 }
             }