diff --git a/preview/pages/_includes/ui/colorpicker.html b/preview/pages/_includes/ui/colorpicker.html
index 210436e3e..5b3539568 100644
--- a/preview/pages/_includes/ui/colorpicker.html
+++ b/preview/pages/_includes/ui/colorpicker.html
@@ -19,18 +19,9 @@
 			{% if format %}format: "{{ format }}",{% endif %}
 			{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
 			swatches: [
-				"#066fd1",
-				"#45aaf2",
-				"#6574cd",
-				"#a55eea",
-				"#f66d9b",
-				"#fa4654",
-				"#fd9644",
-				"#f1c40f",
-				"#7bd235",
-				"#5eba00",
-				"#2bcbba",
-				"#17a2b8",
+				{% for color in site.colors %}
+				"{{ color[1].hex }}",
+				{% endfor %}
 			],
 		}))
 	})
diff --git a/preview/pages/colorpicker.html b/preview/pages/colorpicker.html
index 73a4cf5ab..8be9a2ef0 100644
--- a/preview/pages/colorpicker.html
+++ b/preview/pages/colorpicker.html
@@ -7,15 +7,13 @@ layout: default
 permalink: colorpicker.html
 ---
 
-{% assign colors = "#066fd1,#45aaf2,#6574cd,#a55eea,#f66d9b,#fa4654,#fd9644,#f1c40f,#7bd235,#5eba00,#2bcbba,#17a2b8" | split: "," %}
-
 <div class="card">
 	<div class="card-body">
 		<h3 class="card-title">Basic</h3>
 		<div class="row g-3">
-			{% for color in colors %}
+			{% for color in site.colors %}
 			<div class="col-2">
-				<div>{% include "ui/colorpicker.html" value=color id=forloop.index format="hex" %}</div>
+				<div>{% include "ui/colorpicker.html" value=color[1].hex id=forloop.index format="hex" %}</div>
 			</div>
 			{% endfor %}
 		</div>