diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 51b3baa83860..772a4ff3fd6d 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -169,7 +169,7 @@ textarea {
 
 .form-control-color {
   width: $form-color-width;
-  height: auto; // Override fixed browser height
+  height: $input-height;
   padding: $input-padding-y;
 
   &:not(:disabled):not([readonly]) {
@@ -177,12 +177,14 @@ textarea {
   }
 
   &::-moz-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
 
   &::-webkit-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
     @include border-radius($input-border-radius);
   }
+
+  &.form-control-sm { height: $input-height-sm; }
+  &.form-control-lg { height: $input-height-lg; }
 }
diff --git a/site/content/docs/5.1/forms/form-control.md b/site/content/docs/5.1/forms/form-control.md
index 9c1c495b161d..046004d7c05c 100644
--- a/site/content/docs/5.1/forms/form-control.md
+++ b/site/content/docs/5.1/forms/form-control.md
@@ -108,6 +108,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 
 ## Color
 
+Set the `type="color"` and add `.form-control-color` to the `<input>`. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers.
+
 {{< example >}}
 <label for="exampleColorInput" class="form-label">Color picker</label>
 <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">