diff --git a/addons/web_editor/static/src/js/editor/rte.js b/addons/web_editor/static/src/js/editor/rte.js
index 8719779c079..dfa77214c3a 100644
--- a/addons/web_editor/static/src/js/editor/rte.js
+++ b/addons/web_editor/static/src/js/editor/rte.js
@@ -7,6 +7,7 @@ var core = require('web.core');
 var Widget = require('web.Widget');
 var weContext = require('web_editor.context');
 var summernote = require('web_editor.summernote');
+var summernoteCustomColors = require('web_editor.rte.summernote_custom_colors');
 
 var _t = core._t;
 
@@ -533,7 +534,8 @@ var RTEWidget = Widget.extend({
             'lang': 'odoo',
             'onChange': function (html, $editable) {
                 $editable.trigger('content_changed');
-            }
+            },
+            'colors': summernoteCustomColors,
         };
     },
     /**
@@ -703,3 +705,18 @@ return {
     history: history,
 };
 });
+
+odoo.define('web_editor.rte.summernote_custom_colors', function (require) {
+'use strict';
+
+return [
+    ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],
+    ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],
+    ['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'],
+    ['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'],
+    ['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'],
+    ['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'],
+    ['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'],
+    ['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
+];
+});
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index aed0ca91a66..59ea0d8447b 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -4,7 +4,7 @@ odoo.define('web_editor.snippets.options', function (require) {
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var Widget = require('web.Widget');
-var weContext = require('web_editor.context');
+var summernoteCustomColors = require('web_editor.rte.summernote_custom_colors');
 var weWidgets = require('web_editor.widget');
 
 var qweb = core.qweb;
@@ -631,7 +631,7 @@ registry.colorpicker = SnippetOption.extend({
             var $clpicker = $(qweb.render('web_editor.colorpicker'));
 
             _.each($clpicker.find('.o_colorpicker_section'), function (elem) {
-                $(elem).prepend("<div class='text-muted mt8'>" + elem.dataset.display + "</div>")
+                $(elem).prepend("<div class='text-muted mt8'>" + elem.dataset.display + "</div>");
             });
 
             // Retrieve excluded palettes list
@@ -651,19 +651,16 @@ registry.colorpicker = SnippetOption.extend({
 
             // Add common colors to palettes if not excluded
             if (!('common' in excluded)) {
-                var colors = [
-                    '#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF',
-                    '#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF',
-                    '#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE',
-                    '#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD',
-                    '#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5',
-                    '#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B',
-                    '#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842',
-                    '#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031'
-                ];
                 var $commonColorSection = $clpicker.find('[data-name="common"]');
-                _.each(colors, function (color) {
-                    $commonColorSection.append('<button class="o_custom_color" style="background-color: ' + color + '" />');
+                _.each(summernoteCustomColors, function (colorRow, i) {
+                    var $div = $('<div/>', {class: 'clearfix'}).appendTo($commonColorSection);
+                    if (i === 0) {
+                        // Ignore the summernote gray palette and use ours
+                        return;
+                    }
+                    _.each(colorRow, function (color) {
+                        $div.append('<button class="o_custom_color" style="background-color: ' + color + '" />');
+                    });
                 });
             }
 
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index f9c30b62c6f..3d465ae18ee 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -904,7 +904,7 @@ table.colorpicker {
             clear: both;
         }
 
-        > button {
+        button {
             float: left;
             height: 25px;
             width: 25px;
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 9cd1a34bd4d..d180831b616 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -168,7 +168,20 @@
             <button data-color="white-50"></button>
             <button data-color="white-75"></button>
         </div>
-        <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"></div>
+        <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush">
+            <button data-color="black"></button>
+            <button data-color="white"></button>
+            <div class="clearfix"/>
+            <button data-color="900"></button>
+            <button data-color="800"></button>
+            <button data-color="700"></button>
+            <button data-color="600"></button>
+            <button data-color="500"></button>
+            <button data-color="400" class="d-none"></button><!-- Hide this one to be able to use it but not display it -->
+            <button data-color="300"></button>
+            <button data-color="200"></button>
+            <button data-color="100"></button>
+        </div>
     </colorpicker>
 </template>
 </odoo>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index ce3f726ac3b..c99668e4e16 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -78,7 +78,7 @@
         <span class="s_parallax_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
         <div class="container">
             <div class="row s_nb_column_fixed">
-                <div class="col-lg-7 jumbotron pt32 pb32" style="background-color: rgb(255, 255, 255);" data-name="Box">
+                <div class="col-lg-7 bg-white jumbotron pt32 pb32" data-name="Box">
                     <div class="row">
                         <div class="col-lg-12 s_title s_col_no_bgcolor" data-name="Title">
                             <h1 class="s_title_thin"><font style="font-size: 62px;"><b>Sell Online.</b> Easily.</font></h1>
@@ -135,11 +135,11 @@
 </template>
 
 <template id="s_three_columns" name="Three Columns">
-    <section class="s_three_columns pt32 pb32" style="background-color: rgb(239, 239, 239);">
+    <section class="s_three_columns bg-200 pt32 pb32">
         <div class="container">
             <div class="row d-flex align-items-stretch">
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card">
+                    <div class="card bg-white">
                         <img class="card-img-top" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
                         <div class="card-body">
                             <h3 class="card-title">Feature One</h3>
@@ -148,7 +148,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card">
+                    <div class="card bg-white">
                         <img class="card-img-top" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Two</h3>
@@ -160,7 +160,7 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card">
+                    <div class="card bg-white">
                         <img class="card-img-top" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Three</h3>
@@ -177,7 +177,7 @@
 </template>
 
 <template id="s_picture" name="Picture">
-    <section class="s_picture pt48 pb24" style="background-color: rgb(239, 239, 239);">
+    <section class="s_picture bg-200 pt48 pb24">
         <div class="container">
             <div class="row s_nb_column_fixed">
                 <div class="col-lg-12 s_title pt16 pb16">
@@ -280,7 +280,7 @@
 </template>
 
 <template id="s_card" name="Card">
-    <div class="s_card card w-100" style="background-color: rgba(255,255,255);">
+    <div class="s_card card bg-white w-100">
         <h4 class="card-header">Feature Title</h4>
         <div class="card-body">
             <p class="card-text">A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
@@ -366,7 +366,7 @@
             </div>
             <div class="row">
                 <div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
-                    <div class="card" style="background-color: rgb(239, 239, 239);">
+                    <div class="card bg-200">
                         <h4 class="card-header">Beginner</h4>
                         <div class="card-body text-center">
                             <h2 class="card-title">
@@ -510,7 +510,7 @@
 </template>
 
 <template id="s_call_to_action" name="Call to Action">
-    <section class="s_call_to_action pt48 pb24" style="background-color: rgb(239, 239, 239);">
+    <section class="s_call_to_action bg-200 pt48 pb24">
         <div class="container">
             <div class="row">
                 <div class="col-lg-9 pb24">
@@ -529,7 +529,7 @@
 </template>
 
 <template id="s_references" name="References">
-    <section class="s_references pt16 pb16" style="background-color: rgb(239, 239, 239);">
+    <section class="s_references bg-200 pt16 pb16">
         <div class="container">
             <div class="row">
                 <div class="col-lg-2 pt32">
@@ -566,7 +566,7 @@
             <div class="row s_col_no_bgcolor">
                 <div class="col-lg-12 pt16 pb16">
                     <div id="myCollapse" class="accordion" role="tablist">
-                        <div class="card" style="background-color: rgb(255, 255, 255);">
+                        <div class="card bg-white">
                             <a href="#" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header text-primary">Terms of service</a>
                             <div class="collapse show" role="tabpanel">
                                 <div class="card-body">
@@ -574,7 +574,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="card" style="background-color: rgb(255, 255, 255);">
+                        <div class="card bg-white">
                             <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header text-primary">Links to other Websites</a>
                             <div class="collapse" role="tabpanel">
                                 <div class="card-body">
@@ -583,7 +583,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="card" style="background-color: rgb(255, 255, 255);">
+                        <div class="card bg-white">
                             <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header text-primary">Use of Cookies</a>
                             <div class="collapse" role="tabpanel">
                                 <div class="card-body">
@@ -670,7 +670,7 @@
         <div class="container">
             <div class="row s_col_no_bgcolor">
                 <div class="col-lg-8 offset-lg-2 pt48 pb48">
-                    <div class="card">
+                    <div class="card bg-white">
                         <div class="card-header">
                             <ul class="nav nav-tabs card-header-tabs" role="tablist">
                                 <li class="nav-item">
@@ -763,10 +763,10 @@
         <!-- Content -->
         <div class="carousel-inner">
             <!-- #01 -->
-            <div class="carousel-item active pt80 pb80" style="background-color: rgb(239, 239, 239);" data-name="Slide">
+            <div class="carousel-item active bg-200 pt80 pb80" data-name="Slide">
                 <div class="container">
                     <div class="row content">
-                        <blockquote class="carousel-content col-lg-6 offset-lg-3" style="background-color: rgb(255, 255, 255);">
+                        <blockquote class="carousel-content col-lg-6 bg-white offset-lg-3">
                             <i class="fa fa-1x fa-quote-left rounded-0 bg-secondary s_quotes_carousel_icon"/>
                             <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
                             <footer>
@@ -781,7 +781,7 @@
             <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
                 <div class="container">
                     <div class="row content">
-                        <blockquote class="col-lg-6" style="background-color: rgb(255, 255, 255);">
+                        <blockquote class="col-lg-6 bg-white">
                             <p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
                             <footer>
                                 <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_4" alt=""/>
@@ -795,7 +795,7 @@
             <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
                 <div class="container">
                     <div class="row content">
-                        <blockquote class="col-lg-6 offset-lg-6" style="background-color: rgb(255, 255, 255);">
+                        <blockquote class="col-lg-6 offset-lg-6 bg-white">
                             <p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
                             <footer class="blockquote-footer">
                                 <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_5" alt=""/>