diff --git a/assets/js/colors.test.ts b/assets/js/colors.test.ts
index 82b60addd..0de0ad3af 100644
--- a/assets/js/colors.test.ts
+++ b/assets/js/colors.test.ts
@@ -27,7 +27,7 @@ describe("setAlpha helpers", () => {
 });
 
 describe("resolveColors", () => {
-  const palette = colors.palette; // 18 entries
+  const palette = colors.palette;
 
   it("returns empty map for empty ids", () => {
     expect(resolveColors([], {})).toEqual({});
diff --git a/assets/js/colors.ts b/assets/js/colors.ts
index 619d1f1c0..bcbd6775d 100644
--- a/assets/js/colors.ts
+++ b/assets/js/colors.ts
@@ -51,6 +51,7 @@ const colors: {
     "#F472B6", // pink
     "#34D399", // green
     "#A78BFA", // violet
+    "#94A3B8", // gray
     // mid
     "#2563EB", // blue
     "#F59E0B", // amber
@@ -58,6 +59,7 @@ const colors: {
     "#EC4899", // pink
     "#10B981", // green
     "#8B5CF6", // violet
+    "#64748B", // gray
     // dark
     "#1E40AF", // blue
     "#B45309", // amber
@@ -65,6 +67,7 @@ const colors: {
     "#BE185D", // pink
     "#047857", // green
     "#6D28D9", // violet
+    "#334155", // gray
   ],
 });
 
diff --git a/assets/js/components/Helper/ColorPickerPopover.vue b/assets/js/components/Helper/ColorPickerPopover.vue
index 460bf72e7..f97822cef 100644
--- a/assets/js/components/Helper/ColorPickerPopover.vue
+++ b/assets/js/components/Helper/ColorPickerPopover.vue
@@ -106,12 +106,12 @@ export default defineComponent({
 	},
 	computed: {
 		palette(): string[] {
-			// de-interleave warm/cool palette into 3×6 grid (rows: light/mid/dark, cols: hue)
-			const grid: string[][] = Array.from({ length: 3 }, () => Array(6).fill(""));
+			// de-interleave warm/cool palette into 3×7 grid (rows: light/mid/dark, cols: hue)
+			const grid: string[][] = Array.from({ length: 3 }, () => Array(7).fill(""));
 			colors.palette.forEach((hex, i) => {
-				const row = Math.floor(i / 6);
-				const step = i % 6;
-				const col = Math.floor(step / 2) + (step % 2) * 3;
+				const row = Math.floor(i / 7);
+				const step = i % 7;
+				const col = step < 6 ? Math.floor(step / 2) + (step % 2) * 3 : 6;
 				grid[row][col] = hex;
 			});
 			return grid.flat();
@@ -240,8 +240,8 @@ export default defineComponent({
 }
 .swatch-grid {
 	display: grid;
-	grid-template-columns: repeat(6, 1fr);
-	gap: 0.5rem;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 0.4rem;
 }
 .swatch {
 	cursor: pointer;