diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
index 0dbd19944..e03b2389a 100644
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -137,7 +137,7 @@
           </div>
           <div class="popup">
             <template v-if="hue === 'gray'">
-            <wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
+            <wa-radio-group class="core-color" orientation="horizontal" :value="computedGrayColor" @input="grayColor = $event.target.value">
               <template v-for="h in hues">
                 <wa-radio-button :id="'gray-undertone-' + h" :value="h" :label="capitalize(h)" :style="{'--color': `var(--wa-color-${ h })`}"></wa-radio-button>
                 <wa-tooltip :for="'gray-undertone-' + h" hoist>{{ capitalize(h) }}</wa-tooltip>
@@ -147,11 +147,12 @@
               </div>
             </wa-radio-group>
             <color-slider class="gray-chroma-slider" type="percentage" :default-value="originalGrayChroma"
-             v-model="grayChroma"
+            :model-value="computedGrayChroma"
+            @update:model-value="grayChroma = $event"
              v-model:tweaking="tweaking.grayChroma"
             :min="0" :max="maxGrayChroma" :step="0.01"
-            :get-color="scale => baseCoreColors[grayColor].clone().set('oklch.c', c => c * scale)"
-            label="Gray colorfulness" label-min="Neutral" :label-max="moreHue[grayColor]"
+            :get-color="scale => baseCoreColors[computedGrayColor].clone().set('oklch.c', c => c * scale)"
+            label="Gray colorfulness" label-min="Neutral" :label-max="moreHue[computedGrayColor]"
             ></color-slider>
 
             </template>
diff --git a/docs/docs/palettes/app/color/tweak.js b/docs/docs/palettes/app/color/tweak.js
index 0546f1b1a..a45879832 100644
--- a/docs/docs/palettes/app/color/tweak.js
+++ b/docs/docs/palettes/app/color/tweak.js
@@ -4,16 +4,11 @@ import { tints } from '/assets/scripts/tweak/data.js';
 
 export function tweakPalette(baseColors, tweaks, tweaked) {
   let ret = {};
-  let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
 
   if (!tweaked) {
     return baseColors;
   }
 
-  if (tweaked.grayChroma) {
-    grayChroma = this.computedGrayChroma;
-  }
-
   for (let hue in baseColors) {
     let originalScale = baseColors[hue];
     let scale = (ret[hue] = {});
@@ -25,6 +20,8 @@ export function tweakPalette(baseColors, tweaks, tweaked) {
 
     if (hue === 'gray') {
       if (tweaked.grayChroma || tweaked.grayColor) {
+        let grayColor = tweaks.grayColor ?? this.originalGrayColor;
+        let grayChroma = this.computedGrayChroma;
         ret.gray = generateGrays(baseColors, { grayColor, grayChroma });
       } else {
         ret.gray = originalScale;
diff --git a/docs/docs/palettes/app/tweak.js b/docs/docs/palettes/app/tweak.js
index cc1f1d051..8b100cf71 100644
--- a/docs/docs/palettes/app/tweak.js
+++ b/docs/docs/palettes/app/tweak.js
@@ -64,9 +64,6 @@ let paletteAppSpec = {
     // Non-reactive variables to expose
     Object.assign(this, { moreHue, HUE_RANGES, L_RANGES, hues, tints, MAX_CHROMA_BOUNDS });
 
-    this.grayChroma = this.originalGrayChroma;
-    this.grayColor = this.originalGrayColor;
-
     if (location.search) {
       // Read URL params and apply them. This facilitates permalinks.
       for (let hue in this.hueShifts) {
@@ -340,7 +337,7 @@ let paletteAppSpec = {
         return this.originalColors;
       }
 
-      let { huesAfter, grayChroma, grayColor } = this;
+      let { huesAfter, grayChroma = 0.15, grayColor = 'indigo' } = this;
       return generatePalette(this.seedHues, { huesAfter, grayChroma, grayColor }) ?? this.originalColors;
     },
 
@@ -374,8 +371,8 @@ let paletteAppSpec = {
         seedColors: this.seedColors.length > 0,
         chromaScale: this.chromaScale !== 1,
         hue,
-        grayChroma: this.grayChroma !== this.originalGrayChroma,
-        grayColor: this.grayColor !== this.originalGrayColor,
+        grayChroma: this.grayChroma !== undefined && this.grayChroma !== this.originalGrayChroma,
+        grayColor: this.grayColor !== undefined && this.grayColor !== this.originalGrayColor,
       };
 
       let anyTweaked = Object.values(ret).some(Boolean);
@@ -533,7 +530,12 @@ let paletteAppSpec = {
      * This property is the gray chroma % that is actually applied.
      */
     computedGrayChroma() {
-      return Math.min(this.grayChroma, this.maxGrayChroma);
+      let grayChroma = this.grayChroma ?? this.originalGrayChroma;
+      return Math.min(grayChroma, this.maxGrayChroma);
+    },
+
+    computedGrayColor() {
+      return this.grayColor ?? this.originalGrayColor;
     },
 
     maxGrayChroma() {