diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 760152347..db2d53a06 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -15,8 +15,9 @@
     @bg-color: @colortheme_apps[default], // color of the toolbar background
 ) {
     @toolbar-bg-color: @bg-color;
-    @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@bg-color, 30%));
-    @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@bg-color, 20%));
+    @desat-color: desaturate(@bg-color, 20%);
+    @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%));
+    @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
 };
 
 .toolbar_main (
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 3b1a50ef3..cada76870 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -144,7 +144,8 @@
         .cp-callout-@{key} {
             i { color: @value; }
             &:hover {
-                background-color: contrast(@cryptpad_text_col, lighten(@value, 30%), darken(@value, 30%));
+                @desat: desaturate(@value, 15%);
+                background-color: contrast(@cryptpad_text_col, lighten(@value, 30%), darken(@desat, 20%));
                 i { color: @cryptpad_text_col; }
             }
         }