diff --git a/site/content/docs/4.5/getting-started/theming.md b/site/content/docs/4.5/getting-started/theming.md
index 7e942001700d..51e852ccac11 100644
--- a/site/content/docs/4.5/getting-started/theming.md
+++ b/site/content/docs/4.5/getting-started/theming.md
@@ -301,7 +301,10 @@ All colors available in Bootstrap 4, are available as Sass variables and a Sass
   {{- range $.Site.Data.colors }}
     {{- if (and (not (eq .name "white")) (not (eq .name "gray")) (not (eq .name "gray-dark"))) }}
     <div class="col-md-4">
-      <div class="p-3 mb-3 swatch-{{ .name }}">{{ .name | title }}</div>
+      <div class="p-3 mb-3 text-monospace swatch-{{ .name }}">
+        <strong class="d-block">${{ .name }}</strong>
+        <small>{{ .hex }}</small>
+      </div>
     </div>
     {{ end -}}
   {{ end -}}
@@ -332,7 +335,10 @@ We use a subset of all colors to create a smaller color palette for generating c
   {{< theme-colors.inline >}}
   {{- range (index $.Site.Data "theme-colors") }}
     <div class="col-md-4">
-      <div class="p-3 mb-3 bg-{{ .name }} {{ if (or (eq .name "light") (eq .name "warning")) }}text-dark{{ else }}text-white{{ end }}">{{ .name | title }}</div>
+      <div class="p-3 mb-3 text-monospace bg-{{ .name }} {{ if (or (eq .name "light") (eq .name "warning")) }}text-dark{{ else }}text-white{{ end }}">
+        <strong class="d-block">${{ .name }}</strong>
+        <small>{{ .hex }}</small>
+      </div>
     </div>
   {{ end -}}
   {{< /theme-colors.inline >}}
@@ -346,7 +352,10 @@ An expansive set of gray variables and a Sass map in `scss/_variables.scss` for
   <div class="col-md-4">
     {{< theme-colors.inline >}}
     {{- range $.Site.Data.grays }}
-      <div class="p-3 swatch-{{ .name }}">{{ .name | title }}</div>
+      <div class="p-3 text-monospace swatch-{{ .name }}">
+        <strong class="d-block">$gray-{{ .name }}</strong>
+        <small>{{ .hex }}</small>
+      </div>
     {{ end -}}
   {{< /theme-colors.inline >}}
   </div>