diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index f5dda59d27e..c370bf6aede 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -3770,6 +3770,9 @@ var FieldColorPicker = FieldInteger.extend({
 
         }
     },
+    _onNavigationMove() {
+        // disable navigation from FieldInput, to prevent a crash
+    }
 });
 
 return {
diff --git a/addons/web/static/src/scss/color_picker.scss b/addons/web/static/src/scss/color_picker.scss
index 304563f7d90..18eb7aea841 100644
--- a/addons/web/static/src/scss/color_picker.scss
+++ b/addons/web/static/src/scss/color_picker.scss
@@ -15,6 +15,9 @@
         > li {
             border: 2px solid white;
             box-shadow: 0 0 0 1px gray('300');
+            > a:focus {
+                outline: none;
+            }
         }
     }
 }
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index c7024e67830..7d44b6e3af1 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -7824,6 +7824,38 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.module('FieldColorPicker');
+
+    QUnit.test('FieldColorPicker: can navigate away with TAB', async function (assert) {
+        assert.expect(1);
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: `
+                <form string="Partners">
+                    <field name="int_field" widget="color_picker"/>
+                    <field name="foo" />
+                </form>`,
+            res_id: 1,
+            viewOptions: {
+                mode: 'edit',
+            },
+        });
+
+        form.$el.find('a.oe_kanban_color_1')[0].focus();
+
+        form.$el.find('a.oe_kanban_color_1').trigger($.Event('keydown', {
+            which: $.ui.keyCode.TAB,
+            keyCode: $.ui.keyCode.TAB,
+        }));
+        assert.strictEqual(document.activeElement, form.$el.find('input[name="foo"]')[0],
+            "foo field should be focused");
+        form.destroy();
+    });
+
+
     QUnit.module('FieldBadge');
 
     QUnit.test('FieldBadge component on a char field in list view', async function (assert) {