diff --git a/docs/docs/palettes/app/custom.css b/docs/docs/palettes/app/custom.css
index a2a3c5609..f01c2d0fe 100644
--- a/docs/docs/palettes/app/custom.css
+++ b/docs/docs/palettes/app/custom.css
@@ -57,10 +57,38 @@
       }
 
       .name {
+        display: flex;
+        gap: var(--wa-space-xs);
         position: absolute;
         bottom: var(--wa-space-xs);
         left: var(--wa-space-s);
         font-weight: var(--wa-font-weight-semibold);
+
+        wa-dropdown.pin-hue {
+          wa-button {
+            --outlined-border-color: oklab(from currentColor l a b / 10%);
+            --outlined-background-color-hover: transparent;
+            --border-width: 1.5px;
+            --text-color: currentColor;
+            --wa-space: var(--wa-space-xs);
+            --wa-space-smaller: var(--wa-space-2xs);
+          }
+
+          &.pin-hue.pinned {
+            wa-button {
+              --outlined-border-color: oklab(from currentColor l a b / 40%);
+              font-weight: var(--wa-font-weight-bold);
+            }
+          }
+
+          wa-icon[name='thumbtack'] {
+            opacity: 60%;
+          }
+        }
+
+        .level {
+          font-weight: var(--wa-font-weight-bold);
+        }
       }
     }
 
diff --git a/docs/docs/palettes/app/vue-components/color-input.js b/docs/docs/palettes/app/vue-components/color-input.js
index 421c3bd9f..36e459ac3 100644
--- a/docs/docs/palettes/app/vue-components/color-input.js
+++ b/docs/docs/palettes/app/vue-components/color-input.js
@@ -18,7 +18,21 @@ const template = `
       </template>
     </color-popup>
 
-    <div class="name">{{ capitalize(hue) || 'New color' }} {{ level }}</div>
+    <div class="name">
+      <wa-dropdown class="pin-hue" :class="{pinned: pinnedHue}">
+        <wa-button slot="trigger" appearance="outlined" caret>
+          <wa-icon name="thumbtack" v-if="pinnedHue" variant="solid" slot="prefix"></wa-icon>
+          {{ capitalize(hue) || 'New color' }}
+        </wa-button>
+        <wa-menu @wa-select="pinnedHue = $event.detail.item.value">
+          <wa-menu-item type="checkbox" :checked="pinnedHue ? null : ''">Automatic <em>({{ capitalize(detectedColorInfo.hue) }})</em></wa-menu-item>
+          <wa-divider></wa-divider>
+          <wa-menu-label>Pin to…</wa-menu-label>
+          <wa-menu-item v-for="hue in allHues" type="checkbox" :value="hue" :checked="pinnedHue === hue ? '' : null">{{ capitalize(hue) }}</wa-menu-item>
+        </wa-menu>
+      </wa-dropdown>
+      <span class="level">{{ level }}</span>
+     </div>
   </div>
 
   <wa-select class="color-to-role" multiple appearance="plain" placeholder="(No states)" max-options-visible="2"