diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index d89755e290..6142f3f78b 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -660,13 +660,13 @@ $rtl-icon-map: (
 @mixin color-bubble($bubble-size) {
   background-clip: content-box;
   border-color: transparent;
-  border-radius: $bubble-size + 12px;
+  border-radius: $bubble-size;
   border-style: solid;
   border-width: 4px;
   cursor: pointer;
-  height: $bubble-size + 12px;
+  height: $bubble-size;
   padding: 2px;
-  width: $bubble-size + 12px;
+  width: $bubble-size;
 
   @each $color, $value in $conversation-colors {
     &--#{$color} {
diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index 3c090ab823..c4befd4f81 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .ChatColorPicker {
-  $bubble-size: 40px;
+  $bubble-size: 52px;
 
   &__container {
     max-width: 748px;
diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss
index 35f862cf68..34f5ea7797 100644
--- a/stylesheets/components/ConversationDetails.scss
+++ b/stylesheets/components/ConversationDetails.scss
@@ -79,7 +79,7 @@
   }
 
   &__chat-color {
-    @include color-bubble(20px);
+    @include color-bubble(32px);
   }
 
   &-membership-list,
diff --git a/stylesheets/components/CustomColorEditor.scss b/stylesheets/components/CustomColorEditor.scss
index 5957ffa700..3991037f89 100644
--- a/stylesheets/components/CustomColorEditor.scss
+++ b/stylesheets/components/CustomColorEditor.scss
@@ -16,7 +16,7 @@
   }
 
   &__gradient-knob {
-    @include color-bubble(30px);
+    @include color-bubble(42px);
     cursor: move;
     position: absolute;
   }
diff --git a/stylesheets/components/GradientDial.scss b/stylesheets/components/GradientDial.scss
index 7652c851b1..684cba20bd 100644
--- a/stylesheets/components/GradientDial.scss
+++ b/stylesheets/components/GradientDial.scss
@@ -30,7 +30,7 @@
   }
 
   &__knob {
-    @include color-bubble(30px);
+    @include color-bubble(42px);
     box-shadow: 0 0 4px $color-black-alpha-20;
     cursor: move;
     margin-inline-start: -20px;