diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index 2549e74327..102da35aec 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -30,7 +30,6 @@
 
   &__bubble {
     align-items: center;
-    background-color: $color-gray-05;
     display: flex;
     justify-content: center;
     @include color-bubble($bubble-size);
@@ -60,6 +59,10 @@
         );
       }
     }
+
+    &--custom {
+      background-color: $color-gray-05;
+    }
   }
 
   &__add-icon {
diff --git a/ts/components/ChatColorPicker.tsx b/ts/components/ChatColorPicker.tsx
index ea32805d3f..672624eb76 100644
--- a/ts/components/ChatColorPicker.tsx
+++ b/ts/components/ChatColorPicker.tsx
@@ -223,7 +223,7 @@ export const ChatColorPicker = ({
         })}
         <div
           aria-label={i18n('ChatColorPicker__custom-color--label')}
-          className="ChatColorPicker__bubble"
+          className="ChatColorPicker__bubble ChatColorPicker__bubble--custom"
           onClick={() =>
             setCustomColorToEdit({ id: undefined, value: undefined })
           }