diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4486b57124..3a77eec4c9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -847,6 +847,8 @@ $input-height-sm:                       add($input-line-height * 1em, add($input
 $input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width:                      3rem !default;
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 9728b91f34..96423c530c 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -199,7 +199,7 @@ textarea {
 // stylelint-enable selector-no-qualifying-type
 
 .form-control-color {
-  max-width: 3rem;
+  width: $form-color-width;
   height: auto; // Override fixed browser height
   padding: $input-padding-y;