diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb
index 6fb72f7861..fee9cb8e38 100644
--- a/docs/app/views/pages/_color_values.html.erb
+++ b/docs/app/views/pages/_color_values.html.erb
@@ -24,7 +24,7 @@
           <%= sage_component SageCopyButton, {
             borderless: true,
             css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE::#{color.upcase}_100"
+            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_100]"
           } %>
         </div>
         <div>
@@ -62,7 +62,7 @@
           <%= sage_component SageCopyButton, {
             borderless: true,
             css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE::#{color.upcase}_200"
+            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_200]"
           } %>
         </div>
         <div>
@@ -100,7 +100,7 @@
           <%= sage_component SageCopyButton, {
             borderless: true,
             css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE::#{color.upcase}_300"
+            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_300]"
           } %>
         </div>
         <div>
@@ -138,7 +138,7 @@
           <%= sage_component SageCopyButton, {
             borderless: true,
             css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE::#{color.upcase}_400"
+            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_400]"
           } %>
         </div>
         <div>
@@ -176,7 +176,7 @@
           <%= sage_component SageCopyButton, {
             borderless: true,
             css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE::#{color.upcase}_500"
+            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_500]"
           } %>
         </div>
         <div>
diff --git a/docs/app/views/pages/_color_values_base.html.erb b/docs/app/views/pages/_color_values_base.html.erb
index 947971380e..bebc32d0dc 100644
--- a/docs/app/views/pages/_color_values_base.html.erb
+++ b/docs/app/views/pages/_color_values_base.html.erb
@@ -24,7 +24,7 @@
           <%= sage_component SageCopyButton, {
             borderless: true,
             css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE::#{color.upcase}"
+            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}]"
           } %>
         </div>
         <div>
diff --git a/docs/app/views/pages/_color_values_neutral.html.erb b/docs/app/views/pages/_color_values_neutral.html.erb
index 3f39b74d32..0c39255dd8 100644
--- a/docs/app/views/pages/_color_values_neutral.html.erb
+++ b/docs/app/views/pages/_color_values_neutral.html.erb
@@ -25,7 +25,7 @@
             <%= sage_component SageCopyButton, {
               borderless: true,
               css_classes: "colors__copy-btn",
-              value: "SageTokens::COLOR_PALETTE::#{color.upcase}_#{i}00"
+              value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_#{i}00]"
             } %>
           </div>
           <div>