diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 17c6783658..751ce3c763 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -2,7 +2,7 @@
 // Docs color palette classes
 //
 
-@each $color, $value in $colors {
+@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
   .swatch-#{$color} {
     color: color-contrast($value);
     background-color: #{$value};
@@ -40,13 +40,6 @@
   }
 }
 
-@each $color, $value in $grays {
-  .swatch-#{$color} {
-    color: color-contrast($value);
-    background-color: #{$value};
-  }
-}
-
 // stylelint-disable declaration-block-single-line-max-declarations
 
 .bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
diff --git a/site/content/docs/5.0/customize/color.md b/site/content/docs/5.0/customize/color.md
index b48bbaadb3..6e61e6df15 100644
--- a/site/content/docs/5.0/customize/color.md
+++ b/site/content/docs/5.0/customize/color.md
@@ -49,7 +49,7 @@ Be sure to monitor contrast ratios as you customize colors. As shown below, we'v
   {{ end -}}
 
   <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 bd-gray-500">
+    <div class="p-3 mb-2 position-relative swatch-gray-500">
       <strong class="d-block">$gray-500</strong>
       #adb5bd
     </div>