diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 3a4c1fe2e2..b8be6e5bc9 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -411,8 +411,8 @@ $utilities: map-merge(
           "success": $green-2,
           "info": $blue-2,
           "warning": $yellow-2,
-          "danger": $pink,
-          "purple": $purple,
+          "danger": $purple,
+          "pink": $pink,
           "body": $body-bg,
           "light": $light,
           "white": $white,
diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/4.3/utilities/colors.md
index 1e6c7cf31b..92bff9a0ba 100644
--- a/site/content/docs/4.3/utilities/colors.md
+++ b/site/content/docs/4.3/utilities/colors.md
@@ -31,7 +31,7 @@ Similar to the contextual text color classes, easily set the background of an el
 <div class="p-3 mb-2 bg-{{ .name }}">.bg-{{ .name }}</div>
 {{- end -}}
 {{< /colors.inline >}}
-<div class="p-3 mb-2 bg-purple">.bg-purple</div>
+<div class="p-3 mb-2 bg-pink">.bg-pink</div>
 <div class="p-3 mb-2 bg-white">.bg-white or .bg-body</div>
 <div class="p-3 mb-2 bg-transparent">.bg-transparent</div>
 {{< /example >}}