diff --git a/sass/_core.scss b/sass/_core.scss
index a0b1679f9..d9d48e090 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -524,14 +524,14 @@ body.converse-fullscreen {
     }
 
     .badge-groupchat {
-        background-color: var(--chatroom-head-color);
+        background-color: var(--chatroom-badge-color);
         border-color: transparent;
         &:hover {
-            background-color: var(--chatroom-head-color-dark);
+            background-color: var(--chatroom-badge-hover-color);
             border-color: transparent;
         }
         &.active {
-            background-color: var(--chatroom-head-color-dark) !important;
+            background-color: var(--chatroom-badge-hover-color) !important;
             border-color: transparent !important;
         }
     }
diff --git a/sass/_variables.scss b/sass/_variables.scss
index c44e4233a..a7a56671f 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -114,6 +114,8 @@ $mobile_portrait_length: 480px !default;
     --chatroom-head-border-bottom: 0px;
     --chatroom-width: 400px;
     --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
+    --chatroom-badge-color: var(--chatroom-head-color);
+    --chatroom-badge-hover-color: var(--chatroom-head-color-dark);
 
     --headline-head-color: #E7A151; // $orange
     --headline-message-color: #D2842B;
@@ -212,6 +214,8 @@ $mobile_portrait_length: 480px !default;
     --chatroom-head-description-padding-left: 12px;
     --chatroom-head-border-bottom: 1px solid #EEE;
     --chatroom-correcting-color: #FFFFC0;
+    --chatroom-badge-color: #E77051; // $orange
+    --chatroom-badge-hover-color: #D24E2B; // $red
 
     --occupants-background-color: #F3F3F3;
     /* TODO: find a way to allow that and reflow the chat-area properly.