diff --git a/src/components/content.tsx b/src/components/content.tsx
index 2f0478fab..26bb51d74 100644
--- a/src/components/content.tsx
+++ b/src/components/content.tsx
@@ -12,6 +12,19 @@ function startsWithVowel(string: string) {
   return ["a", "e", "i", "o", "u"].includes(string[0]);
 }
 
+function utilityToThemeKeyColorPrefix(utility: string) {
+  switch (utility) {
+    case "decoration":
+      return "text-decoration";
+    case "bg":
+      return "background";
+    case "shadow":
+      return "box-shadow";
+    default:
+      return utility;
+  }
+}
+
 function htmlSnippet({
   elementName,
   attributes,
@@ -450,6 +463,8 @@ export function CustomizingYourThemeColors({
   element?: string;
   elementAttributes?: Record<string, string>;
 }) {
+  const primaryUtility = utility || utilities![0];
+
   return (
     <CustomizingYourTheme
       themeKey="color"
@@ -460,6 +475,12 @@ export function CustomizingYourThemeColors({
       customValue="#243c5a"
       element={element}
       elementAttributes={elementAttributes}
+      children={
+        <p>
+          You may also specify colors specifically for <code>{primaryUtility}</code> by using{" "}
+          <code>--{utilityToThemeKeyColorPrefix(primaryUtility)}-color-*</code> in your theme.
+        </p>
+      }
     />
   );
 }
diff --git a/src/docs/box-shadow.mdx b/src/docs/box-shadow.mdx
index 9836988a1..0b8f4b400 100644
--- a/src/docs/box-shadow.mdx
+++ b/src/docs/box-shadow.mdx
@@ -458,4 +458,8 @@ Use the `shadow-none`, `inset-shadow-none`,`ring-0`, and `inset-ring-0` utilitie
 
 ### Customizing shadow colors
 
-<CustomizingYourThemeColors utilities={["shadow", "inset-shadow", "ring", "inset-ring"]} />
+<CustomizingYourThemeColors utilities={["shadow", "inset-shadow"]} />
+
+### Customizing ring colors
+
+<CustomizingYourThemeColors utilities={["ring", "inset-ring"]} />