diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
index 51190b58695..2c2c8f4ac00 100644
--- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -31,7 +31,6 @@ define([
       var title = options.title;
       var className = options.className;
       var dropdown = options.dropdown;
-      var no_caret = options.no_caret;
       var hide = options.hide;
 
       return (dropdown ? '<div class="btn-group' +
@@ -48,7 +47,7 @@ define([
                  (hide ? ' data-hide=\'' + hide + '\'' : '') +
                  ' tabindex="-1">' +
                  label +
-                 ((dropdown && !no_caret)? ' <span class="caret"></span>' : '') +
+                 (dropdown ? ' <span class="caret"></span>' : '') +
                '</button>' +
                (dropdown || '') +
              (dropdown ? '</div>' : '');
@@ -225,52 +224,27 @@ define([
           value: '{"backColor":"#B35E9B"}'
         });
 
-        // This is a copy of web_editor.snippet.option.colorpicker qweb template
-        var colorpicker_template = '' +
-          '<div class="dropdown-menu">' +
-            '<div class="colorpicker">' +
-              '<div class="note-palette-title">{0}</div>' +
-              '<div class="btn-group palette-reset">' +
-                '<div class="note-color-reset" data-event="{2}" data-value="inherit" title="{1}">' +
-                  '<i class="fa fa-ban"></i>' +
-                '</div>' +
-              '</div>' +
-              '<div class="o_colorpicker_sections">' +
-                '<ul class="nav nav-pills o_colorpicker_section_menu">' +
-                  '<li><a href="#o_palette_spectrum"><i class="fa fa-eyedropper"></i></a></li>' +
-                '</ul>' +
-                '<div class="tab-content o_colorpicker_section_tabs">' +
-                  '<div class="tab-pane" id="o_palette_spectrum">' +
-                    '<div class="note-color-palette" data-target-event="{2}"></div>' +
-                  '</div>' +
-                '</div>' +
-              '</div>' +
-            '</div>' +
-          '</div>';
+        var items = [
+          '<li><div class="btn-group">',
+          '<div class="note-palette-title">' + lang.color.background + '</div>',
+          '<div class="note-color-reset" data-event="backColor"',
+          ' data-value="inherit" title="' + lang.color.transparent + '">' + lang.color.setTransparent + '</div>',
+          '<div class="note-color-palette" data-target-event="backColor"></div>',
+          '</div><div class="btn-group">',
+          '<div class="note-palette-title">' + lang.color.foreground + '</div>',
+          '<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">',
+          lang.color.resetToDefault,
+          '</div>',
+          '<div class="note-color-palette" data-target-event="foreColor"></div>',
+          '</div></li>'
+        ];
 
-        var foreground = formatStr(colorpicker_template, [lang.color.foreground, lang.color.reset, 'foreColor']);
-        var background = formatStr(colorpicker_template, [lang.color.background, lang.color.transparent, 'backColor']);
-
-        var foregroundButton = tplButton('', {
-          title: lang.color.foreground,
-          className: 'o_foreground_toggle',
-          dropdown: foreground,
-          no_caret: true,
-        });
-        var backgroundButton = tplButton('', {
-          title: lang.color.background,
-          className: 'o_background_toggle',
-          dropdown: background,
-          no_caret: true,
+        var moreButton = tplButton('', {
+          title: lang.color.more,
+          dropdown: tplDropdown(items)
         });
 
-        return colorButton + foregroundButton + backgroundButton;
-
-        function formatStr(str, values) {
-          return str.replace(/{(\d+)}/g, function (match, number) {
-            return (values[number] !== undefined)? values[number] : match;
-          });
-        };
+        return colorButton + moreButton;
       },
       bold: function (lang, options) {
         return tplIconButton(options.iconPrefix + options.icons.font.bold, {
diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
index a83e9136a06..cb0e809b439 100644
--- a/addons/web_editor/static/src/js/rte.summernote.js
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -46,65 +46,38 @@ renderer.createPalette = function ($container, options) {
 
     var $clpicker = $(QWeb.render('web_editor.colorpicker'));
 
-    $container.find('.colorpicker').each(function (i, picker) {
-        var $picker = $(picker);
-
-        var $sections = $clpicker.find('.o_colorpicker_section').clone(true);
-
-        var $toggles = $picker.find('.o_colorpicker_section_menu');
-        var $tabs = $picker.find('.o_colorpicker_section_tabs');
-        var $defaultToggle = $toggles.find('li');
-        var $defaultTab = $tabs.find('.tab-pane');
-
-        var newDefaultID = _.uniqueId();
-        $defaultToggle.children('a').attr('href', $defaultToggle.children('a').attr('href') + newDefaultID);
-        $defaultTab.attr('id', $defaultTab.attr('id') + newDefaultID);
-
-        if ($sections.length) {
-            $sections.each(function () {
-                var $section = $(this);
-                var id = 'o_palette_' + $section.data('name') + _.uniqueId();
-
-                var $li = $('<li/>')
-                            .append($('<a/>', {href: '#' + id})
-                                .append($('<i/>', {'class': $section.data('iconClass') || '', html: $section.data('iconContent') || ''})));
-                $defaultToggle.before($li);
-
-                $defaultTab.before($section.addClass('tab-pane').attr('id', id));
-            });
-        } else {
-            var id = 'o_palette_other' + _.uniqueId();
-
-            var $li = $('<li/>')
-                        .append($('<a/>', {href: '#' + id, 'aria-controls': id})
-                            .append($('<i/>', {'class': 'fa fa-magic'})));
-            $toggles.prepend($li);
-
-            $tabs.prepend($('<div/>', {'class': 'tab-pane', id: id}).append($clpicker.clone(true)));
-        }
-
-        $toggles.find('li:first-child').addClass('active');
-        $tabs.find('div:first-child').addClass('active');
-
-        $toggles.on('click mouseover', '> li > a', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            $(this).tab('show');
+    var groups;
+    if ($clpicker.is("colorpicker")) {
+        groups = _.map($clpicker.children(), function (el) {
+            return $(el).find("button").empty();
         });
-    });
+    } else {
+        groups = [$clpicker.find("button").empty()];
+    }
 
-    var $bg = $container.find('.o_background_toggle .dropdown-menu button');
-    var $fore = $container.find('.o_foreground_toggle .dropdown-menu button');
+    var html = "<h6>" + _t("Theme colors") + "</h6>" + _.map(groups, function ($group) {
+        var $row = $("<div/>", {"class": "note-color-row mb8"}).append($group);
+        var $after_breaks = $row.find(".o_small + :not(.o_small)");
+        if ($after_breaks.length === 0) {
+            $after_breaks = $row.find(":nth-child(8n+9)");
+        }
+        $after_breaks.addClass("o_clear");
+        return $row[0].outerHTML;
+    }).join("") + "<h6>" + _t("Common colors") + "</h6>";
+    var $palettes = $container.find(".note-color .note-color-palette");
+    $palettes.prepend(html);
 
+    var $bg = $palettes.first().find("button:not(.note-color-btn)").addClass("note-color-btn");
+    var $fore = $palettes.last().find("button:not(.note-color-btn)").addClass("note-color-btn");
     $bg.each(function () {
         var $el = $(this);
-        var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('bg-' + $el.data('color'));
+        var className = 'bg-' + $el.data('color');
         $el.attr('data-event', 'backColor').attr('data-value', className).addClass(className);
     });
     $fore.each(function () {
         var $el = $(this);
-        var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('text-' + $el.data('color'));
-        $el.attr('data-event', 'foreColor').attr('data-value', className).addClass(className);
+        var className = 'text-' + $el.data('color');
+        $el.attr('data-event', 'foreColor').attr('data-value', className).addClass('bg-' + $el.data('color'));
     });
 };
 
diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
index 9e867ff9f39..1e0093f80c0 100644
--- a/addons/web_editor/static/src/js/tour.rte.js
+++ b/addons/web_editor/static/src/js/tour.rte.js
@@ -61,7 +61,7 @@ Tour.register({
         },
         {
             waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
-            element:   '.note-color button.dropdown-toggle:visible:first',
+            element:   '.note-color button.dropdown-toggle:visible',
             title:     "change selection to change text color",
             onload: function () {
                 var $el = $('#editable_area > section .row > div:first:not(:has(p font)) h1 font');
@@ -70,17 +70,12 @@ Tour.register({
             }
         },
         {
-            title:     "Select foreground spectrum colorpanel",
-            waitFor:   ".dropdown-menu:visible",
-            element:   ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
-        },
-        {
-            element:   ".dropdown-menu:visible .note-color-row:eq(1) button[data-event=foreColor]:first",
+            element:   ".dropdown-menu:visible .btn-group:last .note-color-row:eq(1) button[data-event=foreColor]:first",
             title:     "change text color",
         },
         {
             waitFor:   '#editable_area > section .row > div:first h1 font:eq(2)',
-            element:   '.note-color button.dropdown-toggle:visible:last',
+            element:   '.note-color button.dropdown-toggle:visible',
             title:     "change selection to change text bg-color again",
             onload: function () {
                 var $el = $('#editable_area > section .row > div:first h1 font:eq(2)');
@@ -89,12 +84,7 @@ Tour.register({
             }
         },
         {
-            title:     "Select background spectrum colorpanel",
-            waitFor:   ".dropdown-menu:visible",
-            element:   ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
-        },
-        {
-            element:   ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=backColor]:first",
+            element:   ".dropdown-menu:visible .btn-group:first .note-color-row:eq(0) button[data-event=backColor]:first",
             title:     "change text backColor again",
         },
         {
@@ -109,7 +99,7 @@ Tour.register({
         },
         {
             waitFor:   ".dropdown-menu:visible",
-            element:   ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=foreColor]:first",
+            element:   ".dropdown-menu:visible .btn-group:last .note-color-row:eq(0) button[data-event=foreColor]:first",
             title:     "change text foreColor again",
         },
         {
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index f453d0ca384..f3b91123d78 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -726,29 +726,33 @@ html[lang] > body.editor_enable{
                 .o-text-overflow(inline-block);
                 max-width: 100px;
             }
+
+            &.active {
+                border-top: 2px solid white;
+                background-color: @o-we-color-dark;
+                color: @o-we-color-text-light;
+                box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
+            }
         }
-        .btn.active {
-            border-top: 2px solid white;
-            background-color: @o-we-color-dark;
-            color: @o-we-color-text-light;
-            box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
-        }
-        >.btn-group {
-            margin-top: -2px
-        }
-        .btn-group.open .dropdown-toggle {
-            border-top: 2px solid white;
-            background-color: @o-we-color-darker;
-            color: white;
-            box-shadow: none;
+        > .btn-group {
+            margin-top: -2px;
+
+            &.open .dropdown-toggle {
+                border-top: 2px solid white;
+                background-color: @o-we-color-darker;
+                color: white;
+                box-shadow: none;
+            }
         }
         .dropdown-menu {
             margin: 0;
             border-radius: 0;
             background-color: @o-we-color-darker;
+            color: @o-we-color-text-normal;
             > li > a {
                 width: 100%;
                 color: @o-we-color-text-light;
+
                 &:hover {
                     background-color: @o-we-tab-active-bg;
                     color: white;
@@ -765,16 +769,31 @@ html[lang] > body.editor_enable{
             border: 1px solid #989898;
             border-color: fadeOut(@o-we-color-text-normal, 0.5);
         }
-        .note-color-palette td > button, .note-color-palette div .note-color-btn {
-            border-color: fadeOut(white, 50%);
-            border-radius: 0;
-            margin: 1px;
-        }
+        .note-color-palette .note-color-row {
+            height: auto!important;
 
-        // COLORPICKER
-        .note-color {
-            border: 1px solid @o-we-color-divider;
-            border-width: 0 1px;
+            &::after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+
+            .note-color-btn {
+                float: left;
+                margin: 1px 1px 0 0;
+                border-color: black;
+
+                &.o_small {
+                    width: 16px;
+                    height: 16px;
+                    margin: 3px 3px 2px 2px;
+                    border-radius: 50%;
+                }
+
+                &.o_clear {
+                    clear: both;
+                }
+            }
         }
     }
 }
@@ -804,8 +823,7 @@ html[lang] > body.editor_enable{
             content: '\f0c3';
         }
         .dropdown-menu {
-            min-width: 250px!important;
-            padding: 0!important;
+            min-width: 353px!important;
         }
     }
 }