diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index c8ed42e6ff5..6680ab21c6e 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -365,16 +365,55 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 
 .oe_black {
   background-color: rgba(0, 0, 0, 0.9);
+  color: white;
 }
 
 .oe_green {
-  background-color: rgba(0, 128, 0, 0.8);
+  background-color: #51d466;
+  color: white;
+}
+.oe_green .text-muted {
+  color: #dddddd;
+}
+
+.oe_blue_light {
+  background-color: #4791d2;
+  color: white;
+}
+.oe_blue_light .text-muted {
+  color: #dddddd;
+}
+
+.oe_blue {
+  background-color: #34495e;
+  color: white;
+}
+
+.oe_orange {
+  background-color: #e67e22;
+  color: white;
+}
+.oe_orange .text-muted {
+  color: #dddddd;
+}
+
+.oe_purple {
+  background-color: #b163a3;
+  color: white;
+}
+.oe_purple .text-muted {
+  color: #dddddd;
 }
 
 .oe_red {
-  background-color: rgba(255, 0, 0, 0.8);
+  background-color: #f75353;
+  color: white;
+}
+.oe_red .text-muted {
+  color: #dddddd;
 }
 
+/* Misc */
 .oe_img_bg {
   background-size: 100%;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 58a3660950d..3e025ec3c11 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -284,17 +284,52 @@ div.carousel[data-snippet-id="slider"]
         padding: 32px 0
 
 /* Background */
- 
+
 .oe_dark
     background: #eff8f8
     background: rgba(100, 200, 200, 0.14)
     +box-shadow(0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset)
+
 .oe_black
     background-color: rgba(0, 0, 0, 0.9)
+    color: white
+
 .oe_green
-    background-color: rgba(0, 128, 0, 0.8)
+    background-color: #51d466
+    color: white
+    .text-muted
+        color: #ddd
+
+.oe_blue_light
+    background-color: #4791d2
+    color: white
+    .text-muted
+        color: #ddd
+
+.oe_blue
+    background-color: #34495e
+    color: white
+
+.oe_orange
+    background-color: #e67e22
+    color: white
+    .text-muted
+        color: #ddd
+
+.oe_purple
+    background-color: #b163a3
+    color: white
+    .text-muted
+        color: #ddd
+
 .oe_red
-    background-color: rgba(255, 0, 0, 0.8)
+    background-color: #f75353
+    color: white
+    .text-muted
+        color: #ddd
+
+/* Misc */
+
 .oe_img_bg
     background-size: 100%
 
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index a11d2b4f722..6781a831cc6 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -796,6 +796,10 @@
                         <li data-class='oe_dark'><a>Darken</a></li>
                         <li data-class='oe_green'><a>Green</a></li>
                         <li data-class='oe_red'><a>Red</a></li>
+                        <li data-class='oe_blue_light'><a>Light Blue</a></li>
+                        <li data-class='oe_blue'><a>Dark Blue</a></li>
+                        <li data-class='oe_orange'><a>Orange</a></li>
+                        <li data-class='oe_purple'><a>Purple</a></li>
                         <li data-class='oe_black'><a>Black</a></li>
                     </ul>
                 </li>