diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 96137e56561..2a87025a980 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -140,6 +140,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/form_view_extra.scss',
             'web/static/src/legacy/scss/list_view_extra.scss',
             'web/static/src/legacy/scss/profiling_qweb_view.scss',
+            'web/static/src/legacy/scss/color_picker.scss',
             'base/static/src/scss/res_partner.scss',
 
             # Form style should be computed before
diff --git a/addons/web/static/src/legacy/scss/color_picker.scss b/addons/web/static/src/legacy/scss/color_picker.scss
new file mode 100644
index 00000000000..2ff27c59c7e
--- /dev/null
+++ b/addons/web/static/src/legacy/scss/color_picker.scss
@@ -0,0 +1,64 @@
+.o_field_color_picker {
+    display: flex;
+    float: right;
+    margin-right: 7px;
+    width: 100%;
+    ul {
+        display: flex;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        @include o-kanban-colorpicker;
+        @include o-kanban-record-color;
+        width: 100%;
+        max-width: unset;
+        margin: 0;
+        padding: 0;
+        > li {
+            border: 2px solid white;
+            box-shadow: 0 0 0 1px gray('300');
+            margin: $o-kanban-inner-hmargin 4px 0 0;
+            > a:focus {
+                outline: none;
+            }
+        }
+    }
+}
+
+.o_field_color_picker_preview {
+    @include o-kanban-record-color;
+    margin-right: 7px;
+    > li {
+        display: inline-block;
+        margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
+        border: 1px solid white;
+        box-shadow: 0 0 0 1px gray('300');
+
+        > a {
+            display: block;
+
+            &::after {
+                content: "";
+                display: block;
+                width: 20px;
+                height: 15px;
+            }
+        }
+
+        // No Color
+        a.oe_kanban_color_0 {
+            position: relative;
+            &::before {
+                content: "";
+                @include o-position-absolute(-2px, $left: 10px);
+                display: block;
+                width: 1px;
+                height: 20px;
+                transform: rotate(45deg);
+                background-color: red;
+            }
+            &::after {
+                background-color: white;
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/views/fields/color_picker/color_picker_field.scss b/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
index 2384eaa80e1..608b70e946c 100644
--- a/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
+++ b/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
@@ -28,42 +28,3 @@
         }
     }
 }
-
-.o_field_color_picker_preview {
-    @include o-kanban-record-color;
-    margin-right: 7px;
-    > li {
-        display: inline-block;
-        margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
-        border: 1px solid white;
-        box-shadow: 0 0 0 1px gray('300');
-
-        > a {
-            display: block;
-
-            &::after {
-                content: "";
-                display: block;
-                width: 20px;
-                height: 15px;
-            }
-        }
-
-        // No Color
-        a.oe_kanban_color_0 {
-            position: relative;
-            &::before {
-                content: "";
-                @include o-position-absolute(-2px, $left: 10px);
-                display: block;
-                width: 1px;
-                height: 20px;
-                transform: rotate(45deg);
-                background-color: red;
-            }
-            &::after {
-                background-color: white;
-            }
-        }
-    }
-}