diff --git a/src/Editor/Util/ColorPicker/_colorpicker.scss b/src/Editor/Util/ColorPicker/_colorpicker.scss
index 4361b4cfb..8250a6573 100644
--- a/src/Editor/Util/ColorPicker/_colorpicker.scss
+++ b/src/Editor/Util/ColorPicker/_colorpicker.scss
@@ -19,6 +19,8 @@
 
 @import 'Editor/_wickbrand.scss';
 
+$color-picker-button-stroke-width: 4px;
+
 .btn-color-picker {
   display: flex;
   flex-direction: column-reverse;
@@ -26,7 +28,7 @@
   width: 100%;
   height: 100%;
   border-radius: 16px;
-  border: 4px solid $editor-secondary-text;
+  border: $color-picker-button-stroke-width solid $editor-secondary-text;
   box-sizing: border-box;
   overflow: hidden;
   padding: 0;
@@ -45,10 +47,11 @@
 }
 .btn-color-picker-stroke .btn-color-picker-background-opaque {
   flex-basis: unset;
+  width: calc(100% + 2 * $color-picker-button-stroke-width);
   height: 100%;
   // percent-based margin is calculated based on width of an element
   // therefore, pill-shaped buttons (e.g. in inspector) need a workaround
-  margin: 0 -4px;
+  margin: 0 (-$color-picker-button-stroke-width);
   transform: translateY(50%); // cover bottom half
 }